/* /Pages/1003/FileContactRules/FileContactRules.razor.rz.scp.css */
.fcr-unsaved-banner[b-g76m5cf4ye] {
    position: sticky;
    top: 0;
    z-index: 10;
    border-left: 4px solid var(--mud-palette-warning);
    background-color: var(--mud-palette-warning-hover, #fff8e1);
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Documents/CaseAccessRequestsPanel.razor.rz.scp.css */
/* Access Requests sub-tab — layout only; colors and typography come from avalme-v1.css
   (§10 av-datagrid, §10.10 user-cell, §10.11 av-tag, §16 search). */

.docs-subtab-toolbar__filters[b-k06x10px1f]  .av-search-input {
    flex: 0 1 360px;
}

.docs-subtab-doc[b-k06x10px1f] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Restricted-file badge in front of the name. */
.docs-subtab-doc__icon[b-k06x10px1f] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgb(from var(--color-warning) r g b / 0.12);
    color: var(--color-warning-darker, var(--color-warning));
}

html.dark .docs-subtab-doc__icon[b-k06x10px1f] {
    background: rgb(from var(--color-warning) r g b / 0.18);
    color: var(--color-warning);
}

.docs-subtab-doc__icon[b-k06x10px1f]  .mud-icon-root {
    width: 18px;
    height: 18px;
}

.docs-subtab-avatar[b-k06x10px1f] {
    width: 28px;
    height: 28px;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Documents/CaseActivityLogPanel.razor.rz.scp.css */
/* Activity Log sub-tab — layout only; colors and typography come from avalme-v1.css
   (§10 av-datagrid, §10.10 user-cell, §10.11 av-tag, §13 filter pill, §16 search). */

.docs-subtab-toolbar__filters[b-6cq678uwln] {
    flex-wrap: wrap;
}

.docs-subtab-search[b-6cq678uwln] {
    display: flex;
    flex: 0 1 320px;
    min-width: 200px;
}

.docs-subtab-search[b-6cq678uwln]  .av-search-input {
    flex: 1 1 auto;
}

/* The Filters popover anchors against this wrapper. */
.docs-subtab-popover-anchor[b-6cq678uwln] {
    position: relative;
}

.docs-subtab-badge[b-6cq678uwln] {
    margin-inline-start: 4px;
}

.docs-subtab-summary[b-6cq678uwln] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.docs-subtab-summary__filters[b-6cq678uwln] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.docs-subtab-avatar[b-6cq678uwln] {
    width: 28px;
    height: 28px;
}

.docs-subtab-avatar[b-6cq678uwln]  .mud-icon-root {
    width: 16px;
    height: 16px;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Documents/CaseDocumentRequestsPanel.razor.rz.scp.css */
/* Requests sub-tab — layout only; colors and typography come from avalme-v1.css
   (§10 av-datagrid, §10.10 user-cell, §10.11 av-tag, §13 filter pill, §16 search). */

/* One flat row that wraps: search + pills on the left, actions on the right. */
.docs-subtab-toolbar__filters[b-n0ccvikewr] {
    flex-wrap: wrap;
}

.docs-subtab-toolbar__filters[b-n0ccvikewr]  .av-search-input {
    flex: 0 1 320px;
}

.docs-subtab-toolbar__actions[b-n0ccvikewr] {
    flex-wrap: wrap;
}

.docs-subtab-toolbar[b-n0ccvikewr]  .docs-subtab-btn.mud-button-root {
    height: 38px;
    border-radius: 10px;
}

/* Status pill menu: label left, count right. */
.docs-subtab-menu-item[b-n0ccvikewr] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.docs-subtab-title-cell[b-n0ccvikewr],
.docs-subtab-stack[b-n0ccvikewr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.docs-subtab-tags[b-n0ccvikewr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.docs-subtab-tags--wrap[b-n0ccvikewr] {
    flex-wrap: wrap;
    white-space: normal;
}

/* Initials avatar, a notch smaller than the 36px default for dense rows. */
.docs-subtab-avatar[b-n0ccvikewr] {
    width: 28px;
    height: 28px;
}

.docs-subtab-avatar[b-n0ccvikewr]  .mud-icon-root {
    width: 16px;
    height: 16px;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Documents/DocumentFolderTree.razor.rz.scp.css */
/* DocumentFolderTree — Tailux "My Cloud" folder list (WI #1880).
   Source of truth: mockups/avalme-documents-tab.html (.side / .node / .side-label / .btn-create).
   Typography comes from MudText Typo (body2 rows, caption counts, overline label/badges) per the
   typography doctrine, so this file sets colour, spacing and layout only. Mud-rendered elements
   (MudText, MudIcon, MudButton, MudTreeView internals) carry no scope attribute, hence ::deep
   anchored on our own elements. The old global dft-* rules in documents.css no longer match. */

.docs-tree[b-so56cdqsed] {
    display: flex;
    flex-direction: column;
    padding: 4px;
    user-select: none;
    color: var(--color-gray-800);
}

html.dark .docs-tree[b-so56cdqsed] {
    color: var(--color-dark-100);
}

/* Picker dialogs keep the height the old tree had. */
.docs-tree--picker[b-so56cdqsed] {
    min-height: 200px;
}

.docs-tree--readonly[b-so56cdqsed] {
    opacity: 0.85;
}

/* ---- New Folder (sidebar only; skin = av-btn--outline av-btn--pill) ----------- */

.docs-tree__create[b-so56cdqsed] {
    margin-bottom: 12px;
}

/* ---- Rows (standalone buttons + tree bodies share the look) ------------------- */

.docs-tree__group[b-so56cdqsed] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs-tree__node[b-so56cdqsed] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.docs-tree__node:hover[b-so56cdqsed] {
    background: var(--surface-2);
}

.docs-tree__node--on[b-so56cdqsed],
.docs-tree__node--on:hover[b-so56cdqsed] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

html.dark .docs-tree__node--on[b-so56cdqsed],
html.dark .docs-tree__node--on:hover[b-so56cdqsed] {
    background: rgb(from var(--color-primary-500) r g b / 0.16);
    color: var(--color-primary-300);
}

.docs-tree__body[b-so56cdqsed] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 7px 8px 7px 0;
}

.docs-tree__body--on[b-so56cdqsed] {
    color: var(--color-primary-700);
}

html.dark .docs-tree__body--on[b-so56cdqsed] {
    color: var(--color-primary-300);
}

/* Name follows the row ink (the brand skin otherwise pins body2 to charcoal). */
.docs-tree .docs-tree__node[b-so56cdqsed]  .docs-tree__name.mud-typography,
.docs-tree .docs-tree__body[b-so56cdqsed]  .docs-tree__name.mud-typography {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

/* Icons: 18px, muted; folders amber; selected rows take the soft-primary ink. */
.docs-tree__node[b-so56cdqsed]  .docs-tree__ic,
.docs-tree__body[b-so56cdqsed]  .docs-tree__ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

html.dark .docs-tree__node[b-so56cdqsed]  .docs-tree__ic,
html.dark .docs-tree__body[b-so56cdqsed]  .docs-tree__ic {
    color: var(--color-dark-300);
}

.docs-tree__node--on[b-so56cdqsed]  .docs-tree__ic {
    color: var(--color-primary-700);
}

html.dark .docs-tree__node--on[b-so56cdqsed]  .docs-tree__ic {
    color: var(--color-primary-300);
}

.docs-tree__body[b-so56cdqsed]  .docs-tree__ic--folder {
    color: var(--color-amber-500);
}

html.dark .docs-tree__body[b-so56cdqsed]  .docs-tree__ic--folder {
    color: var(--color-amber-400);
}

/* TRIAGE / AUTO / ROOT: av-tag soft pills, shrunk to row-badge height. */
.docs-tree__badge[b-so56cdqsed] {
    height: 18px;
    padding: 0 6px;
}

.docs-tree__node[b-so56cdqsed]  .docs-tree__count,
.docs-tree__body[b-so56cdqsed]  .docs-tree__count {
    margin-left: auto;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-500);
}

html.dark .docs-tree__node[b-so56cdqsed]  .docs-tree__count,
html.dark .docs-tree__body[b-so56cdqsed]  .docs-tree__count {
    color: var(--color-dark-300);
}

.docs-tree__node--on[b-so56cdqsed]  .docs-tree__count,
.docs-tree__body--on[b-so56cdqsed]  .docs-tree__count {
    color: var(--color-primary-700);
}

html.dark .docs-tree__node--on[b-so56cdqsed]  .docs-tree__count,
html.dark .docs-tree__body--on[b-so56cdqsed]  .docs-tree__count {
    color: var(--color-primary-300);
}

/* ---- Folders group ------------------------------------------------------------- */

.docs-tree__section[b-so56cdqsed] {
    margin-top: 8px;
}

.docs-tree--picker .docs-tree__section[b-so56cdqsed] {
    margin-top: 2px;
}

.docs-tree__label[b-so56cdqsed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 8px 6px;
    color: var(--color-gray-500);
}

html.dark .docs-tree__label[b-so56cdqsed] {
    color: var(--color-dark-300);
}

.docs-tree__label[b-so56cdqsed]  .mud-typography {
    color: inherit;
}

.docs-tree__label[b-so56cdqsed]  .docs-tree__label-count {
    font-variant-numeric: tabular-nums;
}

.docs-tree__empty[b-so56cdqsed] {
    padding: 4px 10px 0 36px;
}

/* ---- MudTreeView internals ----------------------------------------------------- */

/* The item content is the visible row: radius, hover and selected wash live here so they
   also cover the expand chevron. */
.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content {
    padding: 0 0 0 4px;
    border-radius: 8px;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
}

.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content:hover {
    background-color: var(--surface-2);
}

.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content.mud-treeview-item-selected,
.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content:has(.docs-tree__body--on) {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

html.dark .docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content.mud-treeview-item-selected,
html.dark .docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-content:has(.docs-tree__body--on) {
    background-color: rgb(from var(--color-primary-500) r g b / 0.16);
    color: var(--color-primary-300);
}

/* Chevron column: 18px, muted; blank on leaves (Mud renders the column empty). */
.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-arrow {
    width: 18px;
    margin: 0 6px 0 0;
    align-items: center;
}

.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-arrow .mud-icon-button {
    padding: 0;
    color: var(--color-gray-500);
}

html.dark .docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-arrow .mud-icon-button {
    color: var(--color-dark-300);
}

.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item-arrow .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* Indent per nesting level. */
.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-group {
    margin-left: 18px;
    margin-inline-start: 18px;
}

.docs-tree .docs-tree__section[b-so56cdqsed]  .mud-treeview-item {
    margin-bottom: 2px;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/FileContactsTab/Dialogs/AddFileContactParticipantDialog.razor.rz.scp.css */
/* =============================================================================
   Add File Contact Participant Dialog — skin lives GLOBALLY.

   This scoped file is intentionally empty: the dialog is portaled into
   MudDialogProvider and its body is built entirely from Mud components, so
   Blazor never stamps this file's scope attribute onto any element the rules
   could anchor to — every ::deep rule here was dead. All of the wizard skin
   (header mark, step indicator, Step 1 group tray + role cards, and the later
   steps) lives in wwwroot/css/avalme-v1.css under "File Contacts wizard".
   ============================================================================= */
/* /Pages/1003/NewLoanOfficerApplication/Components/FileContactsTab/FileContactsTab.razor.rz.scp.css */
/*
 * FileContactsTab — read-only "Contacts v2" tab inside an open Form1003.
 *
 * Layout: three-column flex (sidebar / main / health). Visual tokens follow the project guide
 * (no font-family / font-size / font-weight / line-height / letter-spacing / text-transform
 * here — tipografía is owned by MudText Typo=*). MudBlazor palette tokens (var(--mud-palette-*))
 * are used for colors and surfaces so the page inherits theme switches automatically.
 */

.file-contacts-tab[b-inudpa4xvr] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 16px;
    padding: 16px 0px;
    align-items: start;
}

/* On narrower viewports collapse to a single column. Sidebar + health panel stack below the
   main content; the user still gets the same reading order. */
@media (max-width: 1280px) {
    .file-contacts-tab[b-inudpa4xvr] {
        grid-template-columns: 1fr;
    }
}

/* ===== Sidebar — mirrors the wizard Step 1 group tray (fc-wizard-group-tray) =====
   Anchored on .fc-sidebar (the raw <aside>, which carries the isolation scope) + ::deep,
   because .fc-sidebar-list lands on a Mud component that never gets the scope attribute. */
.fc-sidebar[b-inudpa4xvr] {
    position: sticky;
    top: 16px;
}

/* Container: white tray with a hairline border. */
.fc-sidebar[b-inudpa4xvr]  .mud-paper {
    background: var(--color-white);
    border-color: var(--color-gray-150);
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-paper {
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

.fc-sidebar-header[b-inudpa4xvr] {
    border-bottom: 1px solid var(--color-gray-150);
}
html.dark .fc-sidebar-header[b-inudpa4xvr] {
    border-bottom-color: var(--color-dark-600);
}

.fc-sidebar[b-inudpa4xvr]  .fc-sidebar-subtitle {
    color: var(--color-gray-500);
}
html.dark .fc-sidebar[b-inudpa4xvr]  .fc-sidebar-subtitle {
    color: var(--color-dark-300);
}

.fc-sidebar[b-inudpa4xvr]  .mud-list {
    padding: 0;
}

/* Each row transparent; hover/selected lift to a surface card. */
.fc-sidebar[b-inudpa4xvr]  .mud-list-item {
    border: 1px solid transparent;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fc-sidebar[b-inudpa4xvr]  .mud-list-item:last-child {
    margin-bottom: 0;
}
.fc-sidebar[b-inudpa4xvr]  .mud-list-item:hover {
    background-color: var(--surface-1);
    border-color: var(--color-gray-150);
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-list-item:hover {
    background-color: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

/* Selected row = lifted card (Mud marks it .mud-selected-item; the app also adds --active). */
.fc-sidebar[b-inudpa4xvr]  .mud-selected-item,
.fc-sidebar[b-inudpa4xvr]  .mud-selected-item:hover,
.fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active {
    background-color: var(--surface-1) !important;
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-selected-item,
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-selected-item:hover,
html.dark .fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active {
    background-color: var(--color-dark-700) !important;
    border-color: var(--color-dark-500);
}

/* Icon — muted, our primary when selected, 18px glyph. */
.fc-sidebar[b-inudpa4xvr]  .mud-list-item-icon {
    color: var(--color-gray-500);
    min-width: 0;
    margin-right: 12px;
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-list-item-icon {
    color: var(--color-dark-300);
}
.fc-sidebar[b-inudpa4xvr]  .mud-selected-item .mud-list-item-icon,
.fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .mud-list-item-icon {
    color: var(--color-primary-600) !important;
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-selected-item .mud-list-item-icon,
html.dark .fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .mud-list-item-icon {
    color: var(--color-primary-400) !important;
}
.fc-sidebar[b-inudpa4xvr]  .mud-list-item-icon .mud-icon-root {
    width: 18px;
    height: 18px;
}

.fc-sidebar-item-row[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* Label ink — muted, darker when the row is selected. */
.fc-sidebar-item-label[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
    /* Show the full group name: wrap to a new line when it doesn't fit instead of truncating. */
    white-space: normal;
    overflow-wrap: break-word;
    color: var(--color-gray-700);
}
html.dark .fc-sidebar-item-label[b-inudpa4xvr] {
    color: var(--color-dark-200);
}
.fc-sidebar[b-inudpa4xvr]  .mud-selected-item .fc-sidebar-item-label,
.fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .fc-sidebar-item-label {
    color: var(--color-gray-900) !important;
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-selected-item .fc-sidebar-item-label,
html.dark .fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .fc-sidebar-item-label {
    color: var(--color-dark-50) !important;
}

/* Count pill — gray, soft primary when selected. Circular 22px badge. */
.fc-sidebar[b-inudpa4xvr]  .mud-chip {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-600) !important;
    border-radius: var(--radius-full) !important;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-chip {
    background-color: var(--color-dark-600) !important;
    color: var(--color-dark-200) !important;
}
.fc-sidebar[b-inudpa4xvr]  .mud-selected-item .mud-chip,
.fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .mud-chip {
    background-color: rgb(from var(--color-primary-500) r g b / 0.14) !important;
    color: var(--color-primary-700) !important;
}
html.dark .fc-sidebar[b-inudpa4xvr]  .mud-selected-item .mud-chip,
html.dark .fc-sidebar[b-inudpa4xvr]  .fc-sidebar-item--active .mud-chip {
    color: var(--color-primary-300) !important;
}

.fc-sidebar-count--warn[b-inudpa4xvr] {
    color: var(--color-error);
}

/* ===== Main column ===== */
.fc-main[b-inudpa4xvr] {
    min-width: 0;
}

/* Header floats directly on the page — no card surface, border or elevation.
   Anchored on .fc-main (a real <section> that carries the scope id) via ::deep,
   because the MudPaper itself does not receive the scoped attribute. */
.fc-main[b-inudpa4xvr]  .fc-header-card {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 16px;
}

.fc-header-row[b-inudpa4xvr] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.fc-header-icon[b-inudpa4xvr] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fc-header-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}

.fc-header-meta[b-inudpa4xvr] {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    flex-wrap: wrap;
}

.fc-header-meta-warning[b-inudpa4xvr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fc-header-dot[b-inudpa4xvr] {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
}

.fc-header-actions[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Search field — anchored on .fc-header-actions (raw div w/ scope) via ::deep,
   since the MudAutocomplete component does not receive the scoped attribute.
   Rounded white field, same height as the primary button (36px). */
.fc-header-actions[b-inudpa4xvr]  .fc-header-search {
    width: 260px;
    max-width: 100%;
}
.fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-root,
.fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-outlined-border {
    border-radius: var(--radius-lg);
}
.fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-root {
    background: var(--color-white);
    height: 36px;
    min-height: 36px;
    align-items: center;
}
.fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-slot,
.fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-slot input {
    padding-top: 0;
    padding-bottom: 0;
}
html.dark .fc-header-actions[b-inudpa4xvr]  .fc-header-search .mud-input-root {
    background: var(--color-dark-800);
}

/* When the header row wraps under tight viewports the actions block falls beneath the text;
   give them their own row and let the search stretch so the layout doesn't squeeze. */
@media (max-width: 960px) {
    .fc-header-actions[b-inudpa4xvr] {
        width: 100%;
        justify-content: flex-start;
    }
    .fc-header-actions[b-inudpa4xvr]  .fc-header-search {
        flex: 1;
        min-width: 200px;
    }
}

.fc-view-toggle-row[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Segmented pill toggle (Grouped / Table). Neutral gray track; the active item is lifted onto a
   white chip with a subtle border + shadow, matching the mockup. Both items are Text variant so
   they render at the same height. */
.fc-view-toggle[b-inudpa4xvr] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--color-gray-150);
    border-radius: 10px;
}
html.dark .fc-view-toggle[b-inudpa4xvr] {
    background: var(--color-dark-700);
}

.fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item {
    margin: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--color-gray-600);
    text-transform: capitalize;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
html.dark .fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item {
    color: var(--color-dark-200);
}

.fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item:hover {
    color: var(--color-gray-900);
}
html.dark .fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item:hover {
    color: var(--color-dark-50);
}

.fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item--active {
    background: var(--color-white);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.06);
}
html.dark .fc-view-toggle[b-inudpa4xvr]  .fc-view-toggle-item--active {
    background: var(--color-dark-500);
    color: var(--color-dark-50);
    border-color: var(--color-dark-400);
}

/* Progress cluster — right-aligned, fixed width (does not stretch to the toggle). */
.fc-progress-row[b-inudpa4xvr] {
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Progress bar + label — anchored on .fc-progress-row (raw div w/ scope) via
   ::deep, since MudProgressLinear / MudText do not receive the scoped attribute. */
.fc-progress-row[b-inudpa4xvr]  .fc-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
}
.fc-progress-row[b-inudpa4xvr]  .fc-progress-bar .mud-progress-linear-bar {
    background: var(--color-primary-600);
    border-radius: var(--radius-full);
}
html.dark .fc-progress-row[b-inudpa4xvr]  .fc-progress-bar {
    background: var(--color-dark-500);
}
html.dark .fc-progress-row[b-inudpa4xvr]  .fc-progress-bar .mud-progress-linear-bar {
    background: var(--color-primary-400);
}

.fc-progress-row[b-inudpa4xvr]  .fc-progress-label {
    color: var(--color-gray-600);
    white-space: nowrap;
    flex-shrink: 0;
}
html.dark .fc-progress-row[b-inudpa4xvr]  .fc-progress-label {
    color: var(--color-dark-200);
}

/* ===== Missing banner ===== */
.fc-missing-banner[b-inudpa4xvr] {
    background: var(--mud-palette-warning-hover);
    border-color: var(--mud-palette-warning) !important;
    border-radius: 12px;
}

.fc-missing-banner-row[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fc-missing-banner-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}

/* Quick-add links (one per missing role) — subtle, link-like shortcuts that open the Add
   Participant dialog preselected to the role. Kept inline (wrap only when several roles don't
   fit) so the banner reads as a notice with an inline "go add it" affordance, not a button bar. */
.fc-missing-banner-actions[b-inudpa4xvr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 16px;
    flex-shrink: 0;
}

.fc-missing-banner-link[b-inudpa4xvr] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.fc-missing-banner-actions[b-inudpa4xvr]  .fc-missing-banner-link-arrow {
    width: 16px;
    height: 16px;
}

/* ===== Group panels ===== */
.fc-groups[b-inudpa4xvr] {
    border-radius: 14px;
    overflow: hidden;
}

.fc-group-panel[b-inudpa4xvr]  .mud-expand-panel-header {
    padding: 12px 16px;
}

/* CSS-only highlight pulse fired after a search selection. The animation lasts ~1.8s and the
   class is auto-cleared from C# ~2s later so the pulse runs once and resets. */
.fc-group-panel--highlighted[b-inudpa4xvr] {
    animation: fc-pulse-b-inudpa4xvr 1.8s ease-out 1;
}

@keyframes fc-pulse-b-inudpa4xvr {
    0%   { box-shadow: 0 0 0 0 var(--mud-palette-primary-hover); }
    35%  { box-shadow: 0 0 0 6px var(--mud-palette-primary-hover); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.fc-group-title[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.fc-group-icon[b-inudpa4xvr] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fc-group-title-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}

/* Per-group "Add Participant" button — sits at the right edge of the collapse header
   without triggering the collapse expand/collapse on click (handled via stopPropagation
   in the markup). */
.fc-group-add[b-inudpa4xvr] {
    flex-shrink: 0;
    margin-right: 8px;
}

.fc-group-count[b-inudpa4xvr] {
    height: 22px;
    padding: 0 8px;
}

.fc-group-missing[b-inudpa4xvr] {
    height: 22px;
}

/* ===== Missing-role cards inside an expanded group ===== */
.fc-missing-card[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed var(--mud-palette-error);
    background: var(--mud-palette-error-hover);
}

.fc-missing-card-icon[b-inudpa4xvr] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fc-missing-card-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}

.fc-missing-card-title-row[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fc-missing-required-chip[b-inudpa4xvr] {
    height: 20px;
    padding: 0 6px;
}

/* ===== Footer info ===== */
/* Footer — anchored on .fc-main (raw <section> w/ scope) via ::deep, since the
   MudPaper / MudText / MudIcon do not receive the scoped attribute. */
.fc-main[b-inudpa4xvr]  .fc-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
}
.fc-main[b-inudpa4xvr]  .fc-footer-info .mud-typography {
    margin: 0;
}
.fc-main[b-inudpa4xvr]  .fc-footer-icon {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}
.fc-main[b-inudpa4xvr]  .fc-footer-info .fc-footer-icon .mud-icon-root {
    width: 18px;
    height: 18px;
}

/* ===== Right health panel — one sectioned card ===== */
.fc-health[b-inudpa4xvr] {
    position: sticky;
    top: 16px;
    min-width: 0;
}

.fc-health-card[b-inudpa4xvr] {
    border-radius: 14px;
    border-color: var(--color-gray-150);
    background: var(--color-white);
    padding: 0;
    overflow: hidden;
}
html.dark .fc-health-card[b-inudpa4xvr] {
    border-color: var(--color-dark-600);
    background: var(--color-dark-800);
}

/* ---- Header ---- */
.fc-health-head[b-inudpa4xvr] {
    padding: 16px 16px 14px;
}
.fc-health-eyebrow[b-inudpa4xvr] {
    display: block;
}
.fc-health-title[b-inudpa4xvr] {
    display: block;
    margin-top: 2px;
}
.fc-health-context[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.fc-health-context-sep[b-inudpa4xvr] {
    width: 1px;
    height: 12px;
    background: var(--color-gray-300);
    flex-shrink: 0;
}
html.dark .fc-health-context-sep[b-inudpa4xvr] { background: var(--color-dark-500); }
.fc-health-context-dot[b-inudpa4xvr] {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--color-primary-500);
    flex-shrink: 0;
}

/* ---- Blocks + hairline dividers ---- */
.fc-health-block[b-inudpa4xvr] {
    padding: 16px;
}
.fc-health[b-inudpa4xvr]  .fc-health-divider {
    margin: 0;
    border-color: var(--color-gray-150);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-divider {
    border-color: var(--color-dark-600);
}
.fc-health-block-head[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.fc-health-block-title[b-inudpa4xvr] {
    display: block;
    margin-bottom: 12px;
}

/* Eyebrows muted; the counter reads darker. */
.fc-health[b-inudpa4xvr]  .fc-health-eyebrow,
.fc-health[b-inudpa4xvr]  .fc-health-block-head .mud-typography,
.fc-health[b-inudpa4xvr]  .fc-health-block-title {
    color: var(--color-gray-500);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-eyebrow,
html.dark .fc-health[b-inudpa4xvr]  .fc-health-block-head .mud-typography,
html.dark .fc-health[b-inudpa4xvr]  .fc-health-block-title {
    color: var(--color-dark-300);
}
.fc-health[b-inudpa4xvr]  .fc-health-block-head .fc-health-count {
    color: var(--color-gray-700);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-block-head .fc-health-count {
    color: var(--color-dark-100);
}

/* Loan context row (purpose · milestone). */
.fc-health[b-inudpa4xvr]  .fc-health-context .mud-typography {
    color: var(--color-gray-500);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-context .mud-typography {
    color: var(--color-dark-300);
}

/* ---- Segmented progress ---- */
.fc-health-segbar[b-inudpa4xvr] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.fc-health-seg[b-inudpa4xvr] {
    flex: 1;
    height: 8px;
    border-radius: 3px;
    background: var(--color-gray-200);
}
html.dark .fc-health-seg[b-inudpa4xvr] { background: var(--color-dark-600); }
.fc-health-seg--on[b-inudpa4xvr] { background: var(--color-primary-700); }
html.dark .fc-health-seg--on[b-inudpa4xvr] { background: var(--color-primary-500); }

/* ---- All required filled ---- */
.fc-health-allset[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-health[b-inudpa4xvr]  .fc-health-allset .mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-success);
}
.fc-health[b-inudpa4xvr]  .fc-health-allset .mud-typography {
    color: var(--color-gray-700);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-allset .mud-typography {
    color: var(--color-dark-100);
}

/* ---- Missing required rows ---- */
.fc-health-missing-list[b-inudpa4xvr] { margin-top: 2px; }
.fc-health-missing-row[b-inudpa4xvr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--color-error-light);
    background: rgb(from var(--color-error) r g b / 0.06);
}
.fc-health[b-inudpa4xvr]  .fc-health-missing-row .mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-error);
}
.fc-health-missing-row-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}
.fc-health[b-inudpa4xvr]  .fc-health-missing-row-text .mud-typography {
    color: var(--color-gray-800);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-missing-row-text .mud-typography {
    color: var(--color-dark-100);
}

/* ---- Recent activity: View all + dashed empty state ---- */
.fc-health[b-inudpa4xvr]  .fc-health-viewall {
    color: var(--color-primary-600);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-viewall {
    color: var(--color-primary-400);
}
.fc-health-activity-empty[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1px dashed var(--color-gray-300);
    border-radius: 12px;
    background: var(--surface-2);
}
html.dark .fc-health-activity-empty[b-inudpa4xvr] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-900);
}
.fc-health[b-inudpa4xvr]  .fc-health-activity-empty__icon {
    width: 22px;
    height: 22px;
    color: var(--color-gray-400);
    margin-bottom: 2px;
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-activity-empty__icon {
    color: var(--color-dark-300);
}
.fc-health[b-inudpa4xvr]  .fc-health-activity-empty__title {
    color: var(--color-gray-700);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-activity-empty__title {
    color: var(--color-dark-100);
}
.fc-health[b-inudpa4xvr]  .fc-health-activity-empty__hint {
    color: var(--color-gray-500);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-health-activity-empty__hint {
    color: var(--color-dark-300);
}

/* Activity rows (non-empty list). */
.fc-activity-row[b-inudpa4xvr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fc-activity-row-text[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}
.fc-activity-dot[b-inudpa4xvr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 8px;
    background: var(--color-gray-400);
    flex-shrink: 0;
}
.fc-activity-dot--emerald[b-inudpa4xvr] { background: var(--color-success); }
.fc-activity-dot--amber[b-inudpa4xvr]   { background: var(--color-warning); }
.fc-activity-dot--blue[b-inudpa4xvr]    { background: var(--color-info); }
.fc-activity-dot--red[b-inudpa4xvr]     { background: var(--color-error); }
.fc-activity-dot--slate[b-inudpa4xvr]   { background: var(--color-gray-400); }

/* ---- Quick action rows ---- */
.fc-health-actions[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* MudTooltip wraps each row in an inline span; force it full-width so .fc-qa fills the column. */
.fc-health-actions[b-inudpa4xvr]  .mud-tooltip-root {
    display: block;
    width: 100%;
}
.fc-qa[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-150);
    border-radius: 12px;
    background: var(--color-white);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
html.dark .fc-qa[b-inudpa4xvr] {
    border-color: var(--color-dark-600);
    background: var(--color-dark-800);
}
.fc-qa:hover:not(:disabled)[b-inudpa4xvr] {
    border-color: var(--color-primary-300);
    background: rgb(from var(--color-primary-500) r g b / 0.04);
    box-shadow: var(--shadow-sm);
}
.fc-qa:disabled[b-inudpa4xvr] {
    opacity: 0.55;
    cursor: not-allowed;
}
.fc-qa__icon[b-inudpa4xvr] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--color-gray-150);
}
html.dark .fc-qa__icon[b-inudpa4xvr] {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}
.fc-qa__icon[b-inudpa4xvr]  .mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-primary-600);
}
html.dark .fc-qa__icon[b-inudpa4xvr]  .mud-icon-root {
    color: var(--color-primary-400);
}
.fc-qa__text[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.fc-health[b-inudpa4xvr]  .fc-qa__title {
    color: var(--color-gray-900);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-qa__title {
    color: var(--color-dark-50);
}
.fc-health[b-inudpa4xvr]  .fc-qa__sub {
    color: var(--color-gray-500);
}
html.dark .fc-health[b-inudpa4xvr]  .fc-qa__sub {
    color: var(--color-dark-300);
}
.fc-qa__chevron[b-inudpa4xvr]  .mud-icon-root,
.fc-health[b-inudpa4xvr]  .fc-qa__chevron {
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* ===== Per-group: participant cards + spinner + roles eyebrow ===== */
.fc-participants[b-inudpa4xvr] {
    margin-bottom: 4px;
}

/* Cards in a responsive 2–3 column grid. auto-fill + minmax keeps 2–3 columns on the normal
   main-column width and collapses to 1 on narrow viewports, without dedicated media queries. */
.fc-participants-grid[b-inudpa4xvr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.fc-participant-card[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.fc-participant-card-head[b-inudpa4xvr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fc-participant-card-identity[b-inudpa4xvr] {
    flex: 1;
    min-width: 0;
}

.fc-participant-card-name-row[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fc-participant-card-name[b-inudpa4xvr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-participant-card-status[b-inudpa4xvr] {
    height: 20px;
    padding: 0 6px;
}

.fc-participant-card-role[b-inudpa4xvr] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-participant-card-menu[b-inudpa4xvr] {
    flex-shrink: 0;
    margin: -4px -4px 0 0;
}

.fc-participant-card-contact[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-participant-card-contact-item[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fc-participant-card-contact-icon[b-inudpa4xvr] {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.fc-participant-card-contact-value[b-inudpa4xvr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fc-participant-card-contact-empty[b-inudpa4xvr] {
    color: var(--mud-palette-text-disabled);
}

/* Footer divider keeps the "View more" trigger anchored at the bottom regardless of card height,
   so cards in the same grid row align their footers. */
.fc-participant-card-footer[b-inudpa4xvr] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.fc-group-spinner[b-inudpa4xvr] {
    color: var(--mud-palette-primary);
}

/* ===== Table view ===== */
.fc-table-wrap[b-inudpa4xvr] {
    border-radius: 14px;
    overflow: hidden;
}

.fc-table[b-inudpa4xvr]  .mud-table-head {
    background: var(--mud-palette-surface);
}

.fc-table[b-inudpa4xvr]  .mud-table-row:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Role + status chips in the table — full-radius pills (match the grouped view).
   Anchored on .fc-main (raw <section> w/ scope); .fc-table is a component and does
   not receive the scoped attribute. */
.fc-main[b-inudpa4xvr]  .mud-chip.fc-table-chip,
.fc-main[b-inudpa4xvr]  .mud-chip.fc-table-chip .mud-chip-content {
    border-radius: var(--radius-full) !important;
}

/* =============================================================================
   Grouped view — listing mockup skin (collapsible card of group rows).
   Presentation only; the markup keeps every feature. Colors via Avalme tokens.
   Plain elements this component renders are styled directly; Mud children need
   ::deep. Typography stays on Typo.* (no font-* here).
   ============================================================================= */

/* Accordion container (MudExpansionPanels) as a flat listing card. The panel is a
   child component, so its Class (fc-grp/--filled/--highlighted) and the header
   content are reached via `.fc-groups-wrap ::deep`. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-expansion-panels {
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    border-radius: 16px;
    overflow: hidden;
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .mud-expansion-panels {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

/* Each panel = a group: flat, hairline divider between rows. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel::before {
    content: none;
}
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel:not(:first-child) {
    border-top: 1px solid var(--color-gray-150);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel:not(:first-child) {
    border-top-color: var(--color-dark-600);
}

/* Header row. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-header {
    padding: 8px 16px;
    min-height: 60px;
}
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-header:hover {
    background: rgb(from var(--color-gray-500) r g b / 0.05);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-header:hover {
    background: rgb(from var(--color-dark-300) r g b / 0.10);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp--highlighted .mud-expand-panel-header {
    background: rgb(from var(--color-primary-500) r g b / 0.10);
}

/* Hide Mud's built-in expand icon; we render our own chevron so the "+" can sit to its right. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-icon {
    display: none;
}
/* Chevron — bordered box, same size as the "+"; sits inside the right cluster. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    color: var(--color-gray-400);
    transition: transform .15s ease;
}
.fc-groups-wrap[b-inudpa4xvr]  .mud-panel-expanded .fc-grp-chevron {
    transform: rotate(180deg);
    color: var(--color-gray-600);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-chevron {
    border-color: var(--color-dark-500);
    color: var(--color-dark-300);
}

/* Panel body. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-content {
    padding: 10px 16px;
    background: var(--color-white);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .mud-expand-panel-content {
    background: var(--color-dark-800);
}

/* ----- Header content (TitleContent) ----- */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--color-gray-500);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-tile {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp--filled .fc-grp-tile {
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    color: var(--color-gray-700);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp--filled .fc-grp-tile {
    color: var(--color-dark-100);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-tile .mud-icon-root {
    width: 20px;
    height: 20px;
}

/* Heading — eyebrow ("ROLE GROUP") stacked over the group name. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 0 1 auto;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-heading .mud-typography {
    margin: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-eyebrow {
    color: var(--color-gray-400);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-eyebrow {
    color: var(--color-dark-300);
}

/* Group name — muted until the group has participants. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-name {
    min-width: 0;
    color: var(--color-gray-600);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-name {
    color: var(--color-dark-200);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp--filled .fc-grp-name {
    color: var(--color-gray-900);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp--filled .fc-grp-name {
    color: var(--color-dark-50);
}

/* Count pill (Variant.Text chip) — round, neutral gray for every group (no blue).
   The filled error "missing" chip keeps its own look. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-title .mud-chip.mud-chip-text {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    margin: 0;
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    border-radius: var(--radius-full) !important;
    min-width: 24px;
    justify-content: center;
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-title .mud-chip.mud-chip-text {
    background-color: var(--color-dark-600);
    color: var(--color-dark-200);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-title .mud-chip.mud-chip-text .mud-chip-content {
    border-radius: var(--radius-full);
}

/* Status pill — soft info when all required roles are filled, soft red when missing. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status .mud-typography {
    color: inherit;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status .mud-icon-root {
    width: 16px;
    height: 16px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status--ok {
    background: rgb(from var(--color-info) r g b / 0.12);
    color: var(--color-info-darker);
    border-color: rgb(from var(--color-info) r g b / 0.28);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status--ok {
    color: var(--color-info-lighter);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status--missing {
    background: rgb(from var(--color-error) r g b / 0.12);
    color: var(--color-error-darker);
    border-color: rgb(from var(--color-error) r g b / 0.28);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-status--missing {
    color: var(--color-error-lighter);
}
/* Status pill shows only while collapsed; hidden once the group is expanded. */
.fc-groups-wrap[b-inudpa4xvr]  .mud-panel-expanded .fc-grp-status {
    display: none;
}

/* Right cluster — assigned pill + chevron + add, pushed to the far edge. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Per-group add — muted, bordered box; sits to the right of the chevron (no blue). */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-add-wrap {
    display: inline-flex;
    flex-shrink: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-add {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    color: var(--color-gray-400);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-add:hover {
    background: var(--surface-2);
    color: var(--color-gray-600);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-add {
    border-color: var(--color-dark-500);
    color: var(--color-dark-300);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-add:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

/* ===== Expanded body: success banner ===== */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner__icon {
    flex-shrink: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner__icon .mud-icon-root {
    width: 20px;
    height: 20px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner__text .mud-typography {
    margin: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info {
    background: rgb(from var(--color-info) r g b / 0.10);
    border-color: rgb(from var(--color-info) r g b / 0.22);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__icon,
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__title {
    color: var(--color-info-darker);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__hint {
    color: var(--color-info-darker);
    opacity: 0.8;
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__icon,
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__title {
    color: var(--color-info-lighter);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-banner--info .fc-grp-banner__hint {
    color: var(--color-info-lighter);
    opacity: 0.75;
}

/* ===== Expanded body: available roles header (eyebrow · hairline · count) ===== */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail {
    margin-top: 16px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__head .mud-typography {
    margin: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__eyebrow {
    color: var(--color-gray-500);
    flex-shrink: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__count {
    color: var(--color-gray-400);
    flex-shrink: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-gray-200);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__eyebrow {
    color: var(--color-dark-300);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__count {
    color: var(--color-dark-400);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__rule {
    background: var(--color-dark-500);
}

/* ===== Expanded body: role cards grid ===== */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-avail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card:hover {
    border-color: rgb(from var(--color-primary-500) r g b / 0.5);
    background: rgb(from var(--color-primary-500) r g b / 0.04);
}
/* Non-addable role (no "+") — shown for context only, not interactive. */
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card--static {
    cursor: default;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card--static:hover {
    border-color: var(--color-gray-200);
    background: var(--surface-1);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card--static:hover {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.4);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card:hover {
    border-color: rgb(from var(--color-primary-400) r g b / 0.6);
    background: rgb(from var(--color-primary-400) r g b / 0.10);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__tile {
    background: var(--color-dark-800);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__tile .mud-icon-root {
    width: 20px;
    height: 20px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__text .mud-typography {
    margin: 0;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__name {
    color: var(--color-gray-900);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__sub {
    color: var(--color-gray-400);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__name {
    color: var(--color-dark-50);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__sub {
    color: var(--color-dark-300);
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card__add {
    flex-shrink: 0;
    color: var(--color-gray-400);
    width: 20px;
    height: 20px;
}
.fc-groups-wrap[b-inudpa4xvr]  .fc-role-card:hover .fc-role-card__add {
    color: var(--color-primary-600);
}
html.dark .fc-groups-wrap[b-inudpa4xvr]  .fc-role-card:hover .fc-role-card__add {
    color: var(--color-primary-400);
}

.fc-persons[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-person[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
}
html.dark .fc-person[b-inudpa4xvr] {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.fc-person-id[b-inudpa4xvr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 220px;
    min-width: 0;
}
.fc-person[b-inudpa4xvr]  .fc-person-name {
    color: var(--color-gray-900);
}
html.dark .fc-person[b-inudpa4xvr]  .fc-person-name {
    color: var(--color-dark-50);
}

/* Secondary line: organization · email, muted single line. */
.fc-person[b-inudpa4xvr]  .fc-person-sub {
    margin: 0;
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .fc-person[b-inudpa4xvr]  .fc-person-sub {
    color: var(--color-dark-300);
}
.fc-person[b-inudpa4xvr]  .fc-person-email {
    color: var(--color-gray-500) !important;
}
.fc-person[b-inudpa4xvr]  .fc-person-email:hover {
    color: var(--color-primary-600) !important;
    text-decoration: underline;
}
html.dark .fc-person[b-inudpa4xvr]  .fc-person-email {
    color: var(--color-dark-300) !important;
}

.fc-person-actions[b-inudpa4xvr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Role chip — outlined pill on the right of each row. */
.fc-person[b-inudpa4xvr]  .fc-person-role {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 3px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.fc-person[b-inudpa4xvr]  .fc-person-role .mud-typography {
    margin: 0;
    color: var(--color-gray-700);
    white-space: nowrap;
}
html.dark .fc-person[b-inudpa4xvr]  .fc-person-role {
    border-color: var(--color-dark-500);
}
html.dark .fc-person[b-inudpa4xvr]  .fc-person-role .mud-typography {
    color: var(--color-dark-100);
}

/* Status chip (MudChip, shown only when a status exists) — round-full. */
.fc-person[b-inudpa4xvr]  .fc-person-status.mud-chip {
    border-radius: var(--radius-full) !important;
}

/* Standalone assigned-section header spacing (banner sits above it). */
.fc-groups-wrap[b-inudpa4xvr]  .fc-grp-assigned__head {
    margin-top: 16px;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Shared/ChecklistPanel.razor.rz.scp.css */
/*
 * ChecklistPanel — scoped skin. Sole consumer is the 1003 "General Summary" view, so it follows the
 * same color contract as NewLoanOfficerApp1003Summary.razor.css: ONE accent
 * (--mud-palette-primary) over neutral surfaces, and the tenant phase color (--lo-chk-phase, set by
 * the parent as a custom property) only ever painting a 3px rule.
 *
 * No font-family / font-size / font-weight / line-height / letter-spacing / text-transform here —
 * typography is owned by MudText Typo=* (project guide §Typography scale).
 *
 * Rules go through `::deep` because most targets are MudBlazor component roots, which do not
 * receive the CSS-isolation scope attribute.
 */

.lo-chk[b-so99vw6q39] {
    --lo-chk-phase: var(--mud-palette-primary);
}

.lo-chk[b-so99vw6q39]  .lo-chk__card {
    border-radius: 8px;
    overflow: hidden;
    border-top: 3px solid var(--lo-chk-phase);
}

.lo-chk[b-so99vw6q39]  .lo-chk__head {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lo-chk[b-so99vw6q39]  .lo-chk__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(from var(--mud-palette-primary) r g b / 0.10);
    color: var(--mud-palette-primary);
}

/* Neutral tag — replaces the phase chip and the Required warning chip. */
.lo-chk[b-so99vw6q39]  .lo-chk__tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}

/* ===== Task rows ===== */
.lo-chk[b-so99vw6q39]  .lo-chk__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.lo-chk[b-so99vw6q39]  .lo-chk__item:hover {
    background: var(--mud-palette-action-default-hover);
}

.lo-chk[b-so99vw6q39]  .lo-chk__item--done {
    opacity: 0.8;
}

.lo-chk[b-so99vw6q39]  .lo-chk__item-body {
    flex: 1;
    min-width: 0;
}

.lo-chk[b-so99vw6q39]  .lo-chk__item-text--done {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

/* ===== Footer ===== */
.lo-chk[b-so99vw6q39]  .lo-chk__foot {
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Shared/LoRequiredFieldsRail.razor.rz.scp.css */
/* WI #1875 — these rows are read-only: no pointer, no hover tint (BorrowerSummaryRail's rows are buttons). */
.lo-summary-row.lo-required-rail__row[b-fiony3l5c9] {
    cursor: default;
}

.lo-summary-row.lo-required-rail__row:hover[b-fiony3l5c9] {
    background: transparent;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Shared/LoSectionLayout.razor.rz.scp.css */
/* WI #1875 — same grid as .pd-layout / .ld-layout (PR 910). */
.lo-section-layout[b-6fjld9wbh7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 1200px) {
    .lo-section-layout[b-6fjld9wbh7] {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 24px;
    }

    .lo-section-layout--wide-rail[b-6fjld9wbh7] {
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    }

    .lo-section-layout--no-rail[b-6fjld9wbh7] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* WI #1591 — clears the pinned SectionToolbar; the fallback matches its height. */
    .lo-section-layout__rail[b-6fjld9wbh7] {
        position: sticky;
        top: calc(var(--section-toolbar-h, 66px) + 16px);
    }
}

.lo-section-layout__form[b-6fjld9wbh7],
.lo-section-layout__rail[b-6fjld9wbh7] {
    min-width: 0;
}
/* /Pages/1003/NewLoanOfficerApplication/Components/Shared/YesNoChips.razor.rz.scp.css */
.lo-yesno[b-m5jo5htjxs] {
    min-width: 140px;
}

.lo-yesno.lo-yesno--error[b-m5jo5htjxs] {
    border: 1px solid var(--mud-palette-error);
    border-radius: 8px;
    padding: 4px 8px;
}

.lo-yesno__error[b-m5jo5htjxs] {
    margin-top: 4px;
    text-align: right;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/AccessRequestsListDialog.razor.rz.scp.css */
/* WI #1885 — Pending access requests dialog: layout and color only (typography comes from Typo). */

/* Title + pending count, truncating the title before the close button. */
.arl-title[b-l04cs42d4q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.arl-fields[b-l04cs42d4q] {
    margin-top: 0;
    gap: 10px;
}

.arl-loading[b-l04cs42d4q] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

[b-l04cs42d4q] .arl-muted {
    color: var(--mud-palette-text-secondary);
}

/* One card per request. */
.arl-item[b-l04cs42d4q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

html.dark .arl-item[b-l04cs42d4q] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

.arl-item__file[b-l04cs42d4q],
.arl-item__row[b-l04cs42d4q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.arl-item__file-icon[b-l04cs42d4q] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgb(from var(--color-warning) r g b / 0.12);
    color: var(--color-warning-darker, var(--color-warning));
}

html.dark .arl-item__file-icon[b-l04cs42d4q] {
    background: rgb(from var(--color-warning) r g b / 0.18);
    color: var(--color-warning);
}

.arl-item__file-icon[b-l04cs42d4q]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.arl-item__file[b-l04cs42d4q]  .arl-item__file-name {
    margin: 0;
    min-width: 0;
    word-break: break-all;
}

.arl-avatar[b-l04cs42d4q] {
    width: 32px;
    height: 32px;
}

.arl-item__body[b-l04cs42d4q] {
    flex: 1;
    min-width: 0;
}

.arl-item__body[b-l04cs42d4q]  .mud-typography {
    margin: 0;
    overflow-wrap: anywhere;
}

.arl-item__row[b-l04cs42d4q]  .arl-item__resolve {
    flex-shrink: 0;
}

/* The requester's reason, quoted under the row. */
.arl-item__reason[b-l04cs42d4q] {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-gray-50);
    overflow-wrap: anywhere;
}

html.dark .arl-item__reason[b-l04cs42d4q] {
    background: var(--color-dark-600);
}

.arl-item__reason[b-l04cs42d4q]  .mud-typography {
    margin: 0;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/AddCaseFolderFromCatalogDialog.razor.rz.scp.css */
/* AddCaseFolderFromCatalogDialog (WI #1885) — catalog list inside the av-form-dialog frame.
   Typography comes from MudText Typo; this file sets colour, spacing and layout only.
   Mud-rendered children carry no scope attribute, hence ::deep anchored on our own elements. */

.catalog-loading[b-mhum4hakyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.catalog-list[b-mhum4hakyu] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .catalog-list[b-mhum4hakyu] {
    border-color: var(--color-dark-500);
}

.catalog-list__empty[b-mhum4hakyu] {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.catalog-list__group[b-mhum4hakyu] {
    padding: 6px 12px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
}

html.dark .catalog-list__group[b-mhum4hakyu] {
    background: var(--color-dark-750);
    border-color: var(--color-dark-500);
    color: var(--color-dark-300);
}

.catalog-list__row[b-mhum4hakyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--color-gray-100);
    background: transparent;
    color: var(--color-gray-800);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.catalog-list__row:last-child[b-mhum4hakyu] {
    border-bottom: 0;
}

.catalog-list__row:hover[b-mhum4hakyu] {
    background: var(--surface-2);
}

.catalog-list__row--on[b-mhum4hakyu],
.catalog-list__row--on:hover[b-mhum4hakyu] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

html.dark .catalog-list__row[b-mhum4hakyu] {
    border-color: var(--color-dark-600);
    color: var(--color-dark-100);
}

html.dark .catalog-list__row--on[b-mhum4hakyu],
html.dark .catalog-list__row--on:hover[b-mhum4hakyu] {
    background: rgb(from var(--color-primary-500) r g b / 0.16);
    color: var(--color-primary-300);
}

.catalog-list__row[b-mhum4hakyu]  .catalog-list__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-gray-400);
}

.catalog-list__row--on[b-mhum4hakyu]  .catalog-list__icon {
    color: var(--color-primary-600);
}

.catalog-list__row[b-mhum4hakyu]  .catalog-list__name.mud-typography {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.catalog-selected[b-mhum4hakyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.catalog-preview[b-mhum4hakyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}

html.dark .catalog-preview[b-mhum4hakyu] {
    background: var(--color-dark-750);
    border-color: var(--color-dark-500);
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/BlockedDocumentInfoDialog.razor.rz.scp.css */
/* WI #1885 — Blocked document dialog: layout and color only (typography comes from Typo). */

[b-x0m3rnjwpz] .bdi-muted {
    color: var(--mud-palette-text-secondary);
}

/* The document the user cannot open. */
.bdi-file[b-x0m3rnjwpz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

html.dark .bdi-file[b-x0m3rnjwpz] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-800);
}

.bdi-file__row[b-x0m3rnjwpz],
.bdi-file__meta[b-x0m3rnjwpz] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bdi-file__icon[b-x0m3rnjwpz] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgb(from var(--color-warning) r g b / 0.12);
    color: var(--color-warning-darker, var(--color-warning));
}

html.dark .bdi-file__icon[b-x0m3rnjwpz] {
    background: rgb(from var(--color-warning) r g b / 0.18);
    color: var(--color-warning);
}

.bdi-file__icon[b-x0m3rnjwpz]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.bdi-file[b-x0m3rnjwpz]  .mud-typography {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bdi-file__meta[b-x0m3rnjwpz] {
    padding-left: 6px;
    gap: 16px;
}

.bdi-file__meta[b-x0m3rnjwpz]  .bdi-file__meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

html.dark .bdi-file__meta[b-x0m3rnjwpz]  .bdi-file__meta-icon {
    color: var(--color-dark-300);
}

/* Badges line up with the file name, past the icon tile. */
.bdi-file__tags[b-x0m3rnjwpz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 38px;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/DocRequestReviewLODialog.razor.rz.scp.css */
/* WI #1885 — Review dialog: layout only. Frame, tags, tabs, alerts and groups come from
   avalme-v1.css (§2 av-form-dialog, §10.11 av-tag, §15.1 av-tabs-with-icon, §139 av-form-group).
   Typography comes from the Typo on each MudText. Most nodes are rendered by MudElement, so
   every rule goes through ::deep from the native .doc-review root. */

/* Status · assignee · due date, under the title. */
.doc-review[b-1t5eu4rqz7]  .doc-review__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

.doc-review[b-1t5eu4rqz7]  .doc-review__meta-item .mud-icon-root {
    width: 16px;
    height: 16px;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__details {
    margin-top: 12px;
}

/* Front / back sub-tab bar above the side's content. */
.doc-review[b-1t5eu4rqz7]  .doc-review__sides > .av-tabs-boxed {
    margin-bottom: 16px;
}

/* Upload drop zone. */
.doc-review[b-1t5eu4rqz7]  .doc-review__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: var(--radius-lg);
    text-align: center;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__dropzone-label {
    cursor: pointer;
    color: var(--mud-palette-primary);
}

/* File list. */
.doc-review[b-1t5eu4rqz7]  .doc-review__files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__file {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--doc-review-accent, var(--mud-palette-warning));
    border-radius: var(--radius-lg);
}

.doc-review[b-1t5eu4rqz7]  .doc-review__file-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.doc-review[b-1t5eu4rqz7]  .doc-review__file-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__file-name {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Room for the three actions, so the status tags line up when a row shows fewer. */
.doc-review[b-1t5eu4rqz7]  .doc-review__file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 102px;
}

/* Inline reason panels (reject a file / reject the request). */
.doc-review[b-1t5eu4rqz7]  .doc-review__inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Request status options. */
.doc-review[b-1t5eu4rqz7]  .doc-review__status-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.doc-review[b-1t5eu4rqz7]  .doc-review__status-option {
    height: 28px;
    padding: 0 14px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .doc-review[b-1t5eu4rqz7]  .doc-review__file-row {
        flex-wrap: wrap;
    }
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/EditDocumentSectionTagsDialog.razor.rz.scp.css */
/* EditDocumentSectionTagsDialog (WI #1885) — layout only; typography comes from Typo. */

.tags-loading[b-2ujwwodrx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
}

.tags-list[b-2ujwwodrx3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/ExecuteRulesDialog.razor.rz.scp.css */
/* Layout and colour only: typography comes from Typo.* (CLAUDE.md). */

.rules-dialog__loading[b-5xn7g0gwvv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 0;
}

.rules-dialog__list[b-5xn7g0gwvv] {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
}

html.dark .rules-dialog__list[b-5xn7g0gwvv] {
    border-color: var(--color-dark-500);
}

.rules-dialog__item[b-5xn7g0gwvv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background-color 150ms ease;
}

.rules-dialog__item:last-child[b-5xn7g0gwvv] {
    border-bottom: none;
}

.rules-dialog__item:hover[b-5xn7g0gwvv] {
    background-color: var(--color-gray-50);
}

html.dark .rules-dialog__item[b-5xn7g0gwvv] {
    border-bottom-color: var(--color-dark-600);
}

html.dark .rules-dialog__item:hover[b-5xn7g0gwvv] {
    background-color: var(--color-dark-600);
}

.rules-dialog__text[b-5xn7g0gwvv] {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 8px;
}

.rules-dialog__item .av-tag[b-5xn7g0gwvv] {
    margin-top: 10px;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/ManageDocumentPermissionsDialog.razor.rz.scp.css */
/* WI #1885 — Manage permissions dialog: layout and color only (typography comes from Typo). */

/* No description above, so the fields start flush with the body padding. */
.mdp-fields[b-m62s44aa7u] {
    margin-top: 0;
    gap: 1rem;
}

.mdp-loading[b-m62s44aa7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
}

[b-m62s44aa7u] .mdp-muted {
    color: var(--mud-palette-text-secondary);
}

/* File the permissions apply to. */
.mdp-file[b-m62s44aa7u] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mdp-file__icon[b-m62s44aa7u] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgb(from var(--color-primary-600) r g b / 0.1);
    color: var(--color-primary-600);
}

html.dark .mdp-file__icon[b-m62s44aa7u] {
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    color: var(--color-primary-400);
}

.mdp-file__icon[b-m62s44aa7u]  .mud-icon-root {
    width: 18px;
    height: 18px;
}

.mdp-file[b-m62s44aa7u]  .mdp-file__name {
    margin: 0;
    min-width: 0;
    word-break: break-all;
}

/* Candidate list: one bordered block, a divider per row. */
.mdp-list[b-m62s44aa7u] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .mdp-list[b-m62s44aa7u] {
    border-color: var(--color-dark-500);
}

.mdp-row[b-m62s44aa7u] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background-color 0.15s ease;
}

.mdp-row:last-child[b-m62s44aa7u] {
    border-bottom: none;
}

.mdp-row:hover[b-m62s44aa7u] {
    background: var(--color-gray-50);
}

html.dark .mdp-row[b-m62s44aa7u] {
    border-bottom-color: var(--color-dark-600);
}

html.dark .mdp-row:hover[b-m62s44aa7u] {
    background: var(--color-dark-600);
}

.mdp-avatar[b-m62s44aa7u] {
    width: 32px;
    height: 32px;
}

.mdp-row__body[b-m62s44aa7u] {
    flex: 1;
    min-width: 0;
}

.mdp-row__body[b-m62s44aa7u]  .mud-typography {
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/MoveDocumentDialog.razor.rz.scp.css */
/* MoveDocumentDialog (WI #1885) — layout only; typography comes from Typo.
   Mud-rendered children carry no scope attribute, hence ::deep anchored on our own elements. */

.move-file[b-8ol2yaj4ux] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.move-file__name[b-8ol2yaj4ux] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

html.dark .move-file__name[b-8ol2yaj4ux] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-750);
}

.move-file__name[b-8ol2yaj4ux]  .move-file__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

.move-file__name[b-8ol2yaj4ux]  .move-file__text.mud-typography {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-route[b-8ol2yaj4ux] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.move-route[b-8ol2yaj4ux]  .move-route__arrow {
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
}

.move-route[b-8ol2yaj4ux]  .move-route__target.mud-typography {
    color: var(--color-primary-700);
}

html.dark .move-route[b-8ol2yaj4ux]  .move-route__target.mud-typography {
    color: var(--color-primary-300);
}

.move-picker[b-8ol2yaj4ux] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .move-picker[b-8ol2yaj4ux] {
    border-color: var(--color-dark-500);
}

.move-destination[b-8ol2yaj4ux] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.move-add-folder[b-8ol2yaj4ux] {
    display: flex;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/ResolveAccessRequestDialog.razor.rz.scp.css */
/* WI #1885 — Resolve access request dialog: layout and color only (typography comes from Typo). */

.rar-fields[b-dum6ovt35j] {
    margin-top: 0;
}

[b-dum6ovt35j] .rar-muted {
    color: var(--mud-palette-text-secondary);
}

/* Read-only summary of the request being resolved. */
.rar-request[b-dum6ovt35j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

html.dark .rar-request[b-dum6ovt35j] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-800);
}

.rar-request__file[b-dum6ovt35j],
.rar-request__meta[b-dum6ovt35j] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rar-request__file[b-dum6ovt35j] {
    margin-bottom: 2px;
}

.rar-request__file-icon[b-dum6ovt35j] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgb(from var(--color-warning) r g b / 0.12);
    color: var(--color-warning-darker, var(--color-warning));
}

html.dark .rar-request__file-icon[b-dum6ovt35j] {
    background: rgb(from var(--color-warning) r g b / 0.18);
    color: var(--color-warning);
}

.rar-request__file-icon[b-dum6ovt35j]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.rar-request[b-dum6ovt35j]  .mud-typography {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Meta rows line up under the file name, past the icon tile. */
.rar-request__meta[b-dum6ovt35j] {
    padding-left: 6px;
    gap: 16px;
}

.rar-request__meta[b-dum6ovt35j]  .rar-request__meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

html.dark .rar-request__meta[b-dum6ovt35j]  .rar-request__meta-icon {
    color: var(--color-dark-300);
}

.rar-request__reason[b-dum6ovt35j] {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-150, var(--color-gray-200));
}

html.dark .rar-request__reason[b-dum6ovt35j] {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
}

/* Checkbox + the role select it reveals. */
.rar-role[b-dum6ovt35j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/UploadCaseDocumentDialog.razor.rz.scp.css */
/* UploadCaseDocumentDialog (WI #1885) — layout only; typography comes from Typo.
   Mud-rendered children (and InputFile's <input>) carry no scope attribute, hence ::deep
   anchored on our own elements. */

.upload-section[b-gvpnc32brk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-selected[b-gvpnc32brk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.upload-selected[b-gvpnc32brk]  .upload-selected__path.mud-typography {
    color: var(--color-primary-700);
}

html.dark .upload-selected[b-gvpnc32brk]  .upload-selected__path.mud-typography {
    color: var(--color-primary-300);
}

.upload-picker[b-gvpnc32brk] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .upload-picker[b-gvpnc32brk] {
    border-color: var(--color-dark-500);
}

.upload-add-folder[b-gvpnc32brk] {
    display: flex;
}

/* Native file input: a dashed drop-style box with a pill selector button. */
.upload-file[b-gvpnc32brk] {
    padding: 12px;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
    color: var(--color-gray-600);
}

html.dark .upload-file[b-gvpnc32brk] {
    border-color: var(--color-dark-450);
    background: var(--color-dark-750);
    color: var(--color-dark-200);
}

.upload-file[b-gvpnc32brk]  input[type=file] {
    width: 100%;
    color: inherit;
    cursor: pointer;
}

.upload-file[b-gvpnc32brk]  input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--color-gray-300);
    border-radius: 9999px;
    background: var(--color-white);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.upload-file[b-gvpnc32brk]  input[type=file]::file-selector-button:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

html.dark .upload-file[b-gvpnc32brk]  input[type=file]::file-selector-button {
    border-color: var(--color-dark-400);
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

.upload-chosen[b-gvpnc32brk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.upload-chosen[b-gvpnc32brk]  .upload-chosen__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-primary-600);
}

.upload-chosen[b-gvpnc32brk]  .upload-chosen__name.mud-typography {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/1003/NewLoanOfficerApplication/Dialogs/ViewCaseDocumentOcrDialog.razor.rz.scp.css */
/* ViewCaseDocumentOcrDialog (WI #1885) — layout only; typography comes from Typo. */

.ocr-meta[b-98ggw820t2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* /Pages/1003/NewLoanOfficerApplication/Layout/DocumentsSidebar.razor.rz.scp.css */
/* DocumentsSidebar — Tailux "My Cloud" sidebar shell (WI #1880).
   Source of truth: mockups/avalme-documents-tab.html (.side / .side-head). The folder rows
   themselves are styled by DocumentFolderTree.razor.css. */

.docs-sidebar[b-vs6u9a8vox] {
    padding: 16px 12px;
}

.docs-sidebar__head[b-vs6u9a8vox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px 12px;
}

.docs-sidebar--collapsed .docs-sidebar__head[b-vs6u9a8vox] {
    justify-content: center;
    padding: 0 0 12px;
}

.docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-gray-900);
}

html.dark .docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__title {
    color: var(--color-dark-50);
}

.docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__toggle {
    color: var(--color-gray-500);
}

.docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__toggle:hover {
    background-color: var(--surface-2);
    color: var(--color-gray-800);
}

html.dark .docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__toggle {
    color: var(--color-dark-300);
}

html.dark .docs-sidebar__head[b-vs6u9a8vox]  .docs-sidebar__toggle:hover {
    color: var(--color-dark-100);
}
/* /Pages/1003/NewLoanOfficerApplication/NewLoanOfficerApp1003Documents.razor.rz.scp.css */
/* Case documents panel — Tailux file-manager layout (WI #1880).
   Global skins doing the heavy lifting: av-tabs-with-icon, av-kpi, av-search-input,
   av-filter-pill, styled-table, av-tag, av-datagrid-empty/-loading/-selected-actions,
   av-alert-soft (AvFormAlert). This file only lays them out. */

.docs-tx[b-i77ppnf92n] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.docs-tx__panel[b-i77ppnf92n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
    min-width: 0;
}

.docs-tx__panel[hidden][b-i77ppnf92n] {
    display: none;
}

/* ---- KPIs ------------------------------------------------------------------------- */
.docs-tx__kpis[b-i77ppnf92n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.docs-tx__kpi[b-i77ppnf92n] {
    border-radius: var(--av-table-radius, 8px);
    outline: 1.5px solid transparent;
    outline-offset: -1.5px;
    cursor: pointer;
    transition: outline-color 0.15s ease;
}

.docs-tx__kpi:hover[b-i77ppnf92n] {
    outline-color: var(--color-gray-300);
}

.docs-tx__kpi:focus-visible[b-i77ppnf92n] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.docs-tx__kpi--active[b-i77ppnf92n],
.docs-tx__kpi--active:hover[b-i77ppnf92n] {
    outline-color: var(--color-primary-500);
}

.docs-tx__kpi[b-i77ppnf92n]  .av-kpi {
    height: 100%;
}

html.dark .docs-tx__kpi:hover[b-i77ppnf92n] {
    outline-color: var(--color-dark-400);
}

/* ---- Toolbar ---------------------------------------------------------------------- */
.docs-tx__toolbar[b-i77ppnf92n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.docs-tx__search[b-i77ppnf92n] {
    flex: 0 1 340px;
    min-width: 200px;
}

.docs-tx__spacer[b-i77ppnf92n] {
    flex: 1 1 auto;
}

.docs-tx__view[b-i77ppnf92n] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    background: var(--color-white);
}

html.dark .docs-tx__view[b-i77ppnf92n] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

.docs-tx__view[b-i77ppnf92n]  .docs-tx__view-btn {
    border-radius: 6px;
    color: var(--color-gray-500);
}

.docs-tx__view[b-i77ppnf92n]  .docs-tx__view-btn--on,
.docs-tx__view[b-i77ppnf92n]  .docs-tx__view-btn--on:hover {
    background: var(--color-primary-600);
    color: var(--color-white);
}

/* ---- Inbox alert ------------------------------------------------------------------ */
.docs-tx__inbox-detail[b-i77ppnf92n] {
    display: block;
    color: var(--mud-palette-text-secondary);
}

.docs-tx[b-i77ppnf92n]  .docs-tx__inbox-alert .mud-alert-message {
    flex: 1 1 auto;
}

.docs-tx[b-i77ppnf92n]  .docs-tx__inbox-alert .av-form-alert__text {
    flex: 1 1 320px;
}

.docs-tx[b-i77ppnf92n]  .docs-tx__inbox-action {
    margin-left: auto;
    white-space: nowrap;
}

/* ---- Card (header + table / grid) ------------------------------------------------- */
.docs-tx__card[b-i77ppnf92n] {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--av-table-radius, 8px);
    background: var(--color-white);
    overflow: hidden;
}

html.dark .docs-tx__card[b-i77ppnf92n] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

.docs-tx__card-head[b-i77ppnf92n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 18px;
}

.docs-tx__card-title[b-i77ppnf92n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-primary);
}

.docs-tx[b-i77ppnf92n]  .docs-tx__crumb-link {
    cursor: pointer;
}

.docs-tx__muted[b-i77ppnf92n],
.docs-tx[b-i77ppnf92n]  .docs-tx__crumb-sep,
.docs-tx[b-i77ppnf92n]  .docs-tx__card-meta {
    color: var(--mud-palette-text-secondary);
}

/* The card owns the frame; the table drops its own border/radius. */
.docs-tx__card[b-i77ppnf92n]  .docs-tx__table.mud-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.docs-tx__card[b-i77ppnf92n]  .av-datagrid-empty,
.docs-tx__card[b-i77ppnf92n]  .av-datagrid-loading {
    border: 0;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
}

html.dark .docs-tx__card[b-i77ppnf92n]  .av-datagrid-empty,
html.dark .docs-tx__card[b-i77ppnf92n]  .av-datagrid-loading {
    border-top-color: var(--color-dark-500);
}

.docs-tx[b-i77ppnf92n]  .docs-tx__col-check {
    width: 44px;
}

.docs-tx[b-i77ppnf92n]  .docs-tx__col-actions {
    width: 130px;
    text-align: right;
}

/* ---- Document cell ---------------------------------------------------------------- */
.docs-tx__doc[b-i77ppnf92n] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.docs-tx__doc--blocked[b-i77ppnf92n] {
    cursor: pointer;
    opacity: 0.75;
}

.docs-tx__doc-text[b-i77ppnf92n] {
    min-width: 0;
}

.docs-tx__doc-name[b-i77ppnf92n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-primary);
}

.docs-tx[b-i77ppnf92n]  .docs-tx__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

.docs-tx[b-i77ppnf92n]  .docs-tx__meta .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* File-type tile (squircle tinted by type). */
.docs-tx__ftype[b-i77ppnf92n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.docs-tx__ftype--error[b-i77ppnf92n] { background: color-mix(in srgb, var(--color-error) 12%, transparent); }
.docs-tx__ftype--primary[b-i77ppnf92n] { background: color-mix(in srgb, var(--color-primary-500) 12%, transparent); }
.docs-tx__ftype--success[b-i77ppnf92n] { background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.docs-tx__ftype--lock[b-i77ppnf92n] { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning-darker); }

html.dark .docs-tx__ftype--neutral[b-i77ppnf92n] {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

.docs-tx__ftype[b-i77ppnf92n]  .mud-icon-root {
    width: 20px;
    height: 20px;
}

/* Clickable pending-access badge keeps the tag look. */
.docs-tx__tag-btn[b-i77ppnf92n] {
    cursor: pointer;
}

.docs-tx__user[b-i77ppnf92n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.docs-tx[b-i77ppnf92n]  .docs-tx__avatar.mud-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.docs-tx__row-actions[b-i77ppnf92n] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

/* ---- Grid view -------------------------------------------------------------------- */
.docs-tx__grid[b-i77ppnf92n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 4px 18px 18px;
}

.docs-tx__grid[b-i77ppnf92n]  .docs-tx__grid-cell {
    display: block;
}

.docs-tx__fcard[b-i77ppnf92n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--av-table-radius, 8px);
    background: var(--color-white);
}

.docs-tx__fcard:hover[b-i77ppnf92n] {
    border-color: var(--color-gray-300);
}

.docs-tx__fcard--selected[b-i77ppnf92n],
.docs-tx__fcard--selected:hover[b-i77ppnf92n] {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

.docs-tx__fcard--blocked[b-i77ppnf92n] {
    cursor: pointer;
    opacity: 0.75;
}

html.dark .docs-tx__fcard[b-i77ppnf92n] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

html.dark .docs-tx__fcard--selected[b-i77ppnf92n] {
    border-color: var(--color-primary-500);
    background: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
}

.docs-tx__fcard-top[b-i77ppnf92n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.docs-tx__fcard .docs-tx__ftype[b-i77ppnf92n] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.docs-tx__fcard-tools[b-i77ppnf92n] {
    display: inline-flex;
    align-items: center;
}

.docs-tx__fcard-name[b-i77ppnf92n] {
    min-width: 0;
    overflow: hidden;
}

.docs-tx__fcard-name[b-i77ppnf92n]  .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-tx__fcard-foot[b-i77ppnf92n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}

.docs-tx__fcard-badges[b-i77ppnf92n] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.docs-tx__fcard-actions[b-i77ppnf92n] {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: 0 -6px -6px;
}

/* The search keeps its cell width (the skin caps it for toolbars without a basis). */
.docs-tx__search[b-i77ppnf92n]  .av-search-input {
    width: 100%;
    max-width: none;
}

/* DocumentBadge wraps request/consent names in a tooltip root; let it shrink so the
   card name ellipsizes instead of overflowing. */
.docs-tx__fcard-name[b-i77ppnf92n]  .mud-tooltip-root {
    display: block;
    min-width: 0;
    max-width: 100%;
}
/* /Pages/1003/NewLoanOfficerApplication/NewLoanOfficerApp1003Summary.razor.rz.scp.css */
/*
 * General Summary (1003 → Summary tab → "General Summary") — scoped skin.
 *
 * Color contract for this view: ONE accent (--mud-palette-primary) over neutral surfaces.
 * Semantic colors (success / warning / error) are reserved for values that carry a real signal —
 * consent state, LTV / DTI thresholds, borrower validation — and are never used decoratively.
 *
 * The tenant-configured phase color reaches this file at runtime through the --lo-sum-phase
 * custom property set on the root element, and is only ever used as a 3px accent rule or a 10px
 * live dot — never as a surface fill. That keeps an arbitrary tenant palette from washing the
 * whole panel while still identifying the phase.
 *
 * No font-family / font-size / font-weight / line-height / letter-spacing / text-transform here —
 * typography is owned by MudText Typo=* (project guide §Typography scale). Colors come from
 * MudBlazor palette tokens so the light / dark flip is automatic.
 *
 * Every rule goes through `::deep` because most targets are MudBlazor component roots, which do
 * not receive the CSS-isolation scope attribute. The root `.lo-sum` is a plain <div> in the .razor
 * for exactly that reason — it is the element that carries the scope.
 */

.lo-sum[b-c48ixwc5id] {
    --lo-sum-phase: var(--mud-palette-primary);
}

/* ===== Card shell — one frame for the four cards of the view ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__card {
    border-radius: 8px;
    overflow: hidden;
}

/* Phase accent: the only place the tenant phase color paints anything structural. */
.lo-sum[b-c48ixwc5id]  .lo-sum__card--phase {
    border-top: 3px solid var(--lo-sum-phase);
}

/* ===== Card header ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__head--divided {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Icon badge that replaces the per-card gradient avatars. Same tint on every card. */
.lo-sum[b-c48ixwc5id]  .lo-sum__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(from var(--mud-palette-primary) r g b / 0.10);
    color: var(--mud-palette-primary);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__spinner {
    width: 16px;
    height: 16px;
}

/* ===== Neutral tag — replaces the Filled/colored chips of the previous revision ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__tag .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* ===== Metric band + tiles ===== */
/* Neutral strip: the previous revision tinted it with a primary gradient. */
.lo-sum[b-c48ixwc5id]  .lo-sum__band {
    background: var(--mud-palette-background-gray);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__metric {
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__metric-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

/* Only the headline metric (loan amount) takes the accent; the rest stay on body text color. */
.lo-sum[b-c48ixwc5id]  .lo-sum__metric-value--accent {
    color: var(--mud-palette-primary);
}

/* ===== Label / value rows ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__row {
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__row:last-child {
    border-bottom: none;
}

/* ===== Status card header ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__status-head {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Live indicator for the current phase. */
.lo-sum[b-c48ixwc5id]  .lo-sum__dot {
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lo-sum-phase);
    animation: lo-sum-pulse-b-c48ixwc5id 2s infinite;
}

@keyframes lo-sum-pulse-b-c48ixwc5id {
    0% {
        box-shadow: 0 0 0 0 rgb(from var(--lo-sum-phase) r g b / 0.55);
    }

    70% {
        box-shadow: 0 0 0 8px rgb(from var(--lo-sum-phase) r g b / 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgb(from var(--lo-sum-phase) r g b / 0);
    }
}

/* ===== Phase timeline ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__stage {
    display: flex;
    gap: 12px;
    position: relative;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage:hover {
    background: var(--mud-palette-action-default-hover);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage--current {
    background: rgb(from var(--mud-palette-primary) r g b / 0.06);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__connector {
    position: absolute;
    left: 23px;
    top: -8px;
    width: 2px;
    height: 16px;
    background: var(--mud-palette-lines-default);
    transition: background 0.3s ease;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__connector--active {
    background: var(--mud-palette-primary);
}

/* Node: a single accent replaces the previous green / phase-gradient pair. */
.lo-sum[b-c48ixwc5id]  .lo-sum__node {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__node--done {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__node--current {
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgb(from var(--mud-palette-primary) r g b / 0.18);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__node--todo {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage-body {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage--current .lo-sum__stage-name {
    color: var(--mud-palette-primary);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage--todo .lo-sum__stage-name,
.lo-sum[b-c48ixwc5id]  .lo-sum__stage--todo .lo-sum__stage-desc {
    color: var(--mud-palette-text-disabled);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__stage-desc {
    color: var(--mud-palette-text-secondary);
}

/* ===== Recent activity ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__act {
    display: flex;
    gap: 12px;
    position: relative;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__act:hover {
    background: var(--mud-palette-action-default-hover);
}

/* The icon square starts at the row's 8px padding and is 32px tall, so 44px clears it by 4px. */
.lo-sum[b-c48ixwc5id]  .lo-sum__act-line {
    position: absolute;
    left: 23px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

/* Neutral square: the shared Form1003ActivityVisuals gradients (13 different hues) stay in use
   by the Activity Log tab, but this strip only needs to say "an event happened". */
.lo-sum[b-c48ixwc5id]  .lo-sum__act-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__act-body {
    flex: 1;
    min-width: 0;
}

.lo-sum[b-c48ixwc5id]  .lo-sum__bullet {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__bullet--muted {
    background: var(--mud-palette-lines-default);
}

/* ===== Footers ===== */
.lo-sum[b-c48ixwc5id]  .lo-sum__foot {
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lo-sum[b-c48ixwc5id]  .lo-sum__error {
    color: var(--mud-palette-error);
}
/* /Pages/Booking/BookingEmbedTest.razor.rz.scp.css */
.booking-embed-test-frame[b-p6woj17yi5] {
    width: 100%;
    height: 85vh;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
}
/* /Pages/PreApproval/PreApprovalReport/PreApprovalPDFCustomReport.razor.rz.scp.css */
/* ============================================================================
   Pre-Approval PDF custom report — preview + info-panel layout.

   The document preview has a fixed width (1100px). The info panel (title /
   description / alert / print action) sits to its RIGHT only when there is
   enough room for it to be usable (>= ~400px); otherwise it stacks ON TOP of
   the preview so it never renders as a squeezed, deformed column.

   A container query (not a viewport media query) drives this, so the decision
   is based on the ACTUAL width available to the layout — i.e. it already
   accounts for the nav rail and page padding, which a viewport query can't.

   The panel is first in the DOM, so:
     - stacked  → it renders on top of the preview (natural order);
     - side by side → `row-reverse` puts the preview on the left, panel on right.

   Only layout / spacing here — typography and colors come from Mud + tokens.
   ============================================================================ */
.par-preview[b-aore3wjh3b] {
    container-type: inline-size;
    width: 100%;
}

.par-preview-layout[b-aore3wjh3b] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.par-preview-layout__panel[b-aore3wjh3b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.par-preview-layout__actions[b-aore3wjh3b] {
    display: flex;
    margin-top: 4px;
}

.par-preview-layout__doc[b-aore3wjh3b] {
    max-width: 100%;
    overflow-x: auto;
}

/* Side-by-side only when the panel can claim at least ~450px next to the
   fixed 1100px preview (1100 + 24 gap + 450 ≈ 1574). Below that it stays
   stacked, with the panel on top. */
@container (min-width: 1580px) {
    .par-preview-layout[b-aore3wjh3b] {
        flex-direction: row-reverse;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .par-preview-layout__panel[b-aore3wjh3b] {
        flex: 1 1 400px;
        position: sticky;
        top: 16px;
    }

    .par-preview-layout__doc[b-aore3wjh3b] {
        flex: 0 0 auto;
    }
}

/* ── Loading state — a document-shaped skeleton so it reads as the preview
   being prepared, instead of a bare spinner. ─────────────────────────────── */
.par-preview-loading[b-aore3wjh3b] {
    width: 100%;
}

.par-preview-loading__lines[b-aore3wjh3b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
/* /Pages/TaskManager/V8/Components/TaskDetailDrawer.razor.rz.scp.css */
/* =========================================================
   TaskDetailDrawer — scoped CSS.
   Duplicado de las reglas tm8-* del detail drawer de
   TaskManagerV8.razor.css + la capa de aliases .tm8 (solo las
   variables; el padding/min-height de página NO aplica a un
   drawer). Reusa los MISMOS nombres de clase para mantener el
   look idéntico. Cuando Task Manager adopte este componente en
   otra rama, esta duplicación se colapsa.
   ========================================================= */

.tm8[b-51zaj1eoii] {
    /* Brand */
    --primary:         var(--color-primary-600);
    --primary-600:     var(--color-primary-700);
    --primary-700:     var(--color-primary-800);
    --primary-50:      var(--color-primary-50);
    --primary-100:     var(--color-primary-100);
    --accent:          var(--color-sky-500);
    --accent-50:       var(--color-sky-50);

    /* Surfaces */
    --surface:         var(--color-white);
    --surface-2:       var(--color-gray-50);
    --surface-3:       var(--color-gray-100);

    /* Borders */
    --border:          var(--color-gray-150);
    --border-2:        var(--color-gray-200);
    --border-strong:   var(--color-gray-300);

    /* Text */
    --text:            var(--color-gray-950);
    --text-secondary:  var(--color-gray-600);
    --text-tertiary:   var(--color-gray-400);
    --text-on-primary: var(--color-white);

    /* Status */
    --success:         var(--color-success);
    --success-50:      var(--color-emerald-50);
    --warning:         var(--color-amber-600);
    --warning-50:      var(--color-amber-50);
    --danger:          var(--color-red-600);
    --danger-50:       var(--color-red-50);
    --info:            var(--color-sky-500);
    --info-50:         var(--color-sky-50);
    --neutral-50:      var(--color-gray-100);

    /* Priority */
    --urgent:          var(--color-red-600);
    --high:            var(--color-orange-600);
    --medium:          var(--color-amber-600);
    --low:             var(--color-gray-500);

    /* Radii */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 20px;
    --r-full: 999px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(15,17,21,0.04);
    --sh-sm: 0 1px 3px rgba(15,17,21,0.06), 0 1px 2px rgba(15,17,21,0.04);
    --sh-md: 0 4px 12px rgba(15,17,21,0.06), 0 2px 4px rgba(15,17,21,0.04);
    --sh-lg: 0 12px 32px rgba(15,17,21,0.10), 0 4px 8px rgba(15,17,21,0.05);
    --sh-xl: 0 24px 48px rgba(15,17,21,0.12);
    --sh-focus: 0 0 0 3px rgba(92,78,229,0.18);

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px;

    /* Type */
    --font-serif: var(--font-display);

    color: var(--text);
    box-sizing: border-box;
}

html.dark .tm8[b-51zaj1eoii] {
    --surface:         var(--color-dark-700);
    --surface-2:       var(--color-dark-800);
    --surface-3:       var(--color-dark-600);

    --border:          var(--color-dark-500);
    --border-2:        var(--color-dark-450);
    --border-strong:   var(--color-dark-400);

    --text:            var(--color-dark-50);
    --text-secondary:  var(--color-dark-200);
    --text-tertiary:   var(--color-dark-300);
}

@keyframes tm8-backdrop-in-b-51zaj1eoii {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tm8-drawer-in-b-51zaj1eoii {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes tm8-menu-in-b-51zaj1eoii {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===================== DRAWER ===================== */
.tm8-drawer-backdrop[b-51zaj1eoii] {
    position: fixed;
    inset: 0;
    background: rgba(15,17,21,0.36);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    animation: tm8-backdrop-in-b-51zaj1eoii .18s ease-out both;
}

.tm8-drawer[b-51zaj1eoii] {
    width: 560px;
    max-width: 95vw;
    background: var(--surface);
    box-shadow: var(--sh-xl);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    animation: tm8-drawer-in-b-51zaj1eoii .32s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

.tm8-drawer-head[b-51zaj1eoii] {
    padding: var(--s-4) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    background: var(--surface);
}

.tm8-drawer-head-icon[b-51zaj1eoii] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--primary-50);
    color: var(--primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.tm8-drawer-head-text[b-51zaj1eoii] { flex: 1; min-width: 0; }

/* Was var(--font-mono) at 10.5px/0.12em, which read as a code token beside the title — and the
   code chip right next to it IS mono, so the two were indistinguishable. The metrics now come from
   Typo.overline in the markup (STYLE_GUIDE §3.3 row 10, the role every status/type chip uses); per
   the typography doctrine this class owns only color / box, never font-* or text-transform. */
.tm8-drawer-tag[b-51zaj1eoii] {
    display: inline-flex;
    align-items: center;
    color: var(--primary-700);
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    border-radius: var(--r-xs);
    padding: 2px 8px;
}

.tm8-drawer-title[b-51zaj1eoii] {
    margin: 8px 0 4px;
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.005em;
}
.tm8-drawer-code[b-51zaj1eoii] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.tm8-icon-close[b-51zaj1eoii] {
    background: transparent;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tm8-icon-close:hover[b-51zaj1eoii] { background: var(--surface-2); color: var(--text); }

.tm8-drawer-body[b-51zaj1eoii] {
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.tm8-drawer-section[b-51zaj1eoii] { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.tm8-drawer-section:last-of-type[b-51zaj1eoii] { border-bottom: 0; }
.tm8-drawer-section-title[b-51zaj1eoii] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--s-3);
}

.tm8-drawer-desc[b-51zaj1eoii] {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}
.tm8-muted[b-51zaj1eoii] { color: var(--text-tertiary); }

.tm8-drawer-grid[b-51zaj1eoii] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.tm8-drawer-row[b-51zaj1eoii] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--s-3);
    align-items: center;
}
.tm8-drawer-row dt[b-51zaj1eoii] {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
}
.tm8-drawer-row dd[b-51zaj1eoii] {
    margin: 0;
    font-size: 13.5px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* A grid item defaults to min-width:auto, so an unbreakable 500-char value
       (a location, a long meeting URL) widens the track and overflows the drawer. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.tm8-drawer-watchers[b-51zaj1eoii] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* WI #936 — creator surfaced as a watcher: avatar + "Creator" badge inline. */
.tm8-watcher-creator[b-51zaj1eoii] { display: inline-flex; align-items: center; gap: 4px; }

.tm8-assignee-list[b-51zaj1eoii] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.tm8-assignee-row[b-51zaj1eoii] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tm8-assignee-name[b-51zaj1eoii] {
    font-weight: 500;
    color: var(--text);
}
.tm8-assignee-reason[b-51zaj1eoii] {
    font-size: 12px;
    color: var(--text-muted, var(--text));
    opacity: 0.75;
    font-style: italic;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm8-assignee-marker[b-51zaj1eoii] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.tm8-assignee-marker[b-51zaj1eoii]  .mud-icon-root {
    width: 14px;
    height: 14px;
}
.tm8-assignee-marker--success[b-51zaj1eoii] { background: rgba(34, 197, 94, 0.12); color: rgb(21, 128, 61); }
.tm8-assignee-marker--success-cross[b-51zaj1eoii] { background: rgba(34, 197, 94, 0.18); color: rgb(21, 128, 61); }
.tm8-assignee-marker--danger[b-51zaj1eoii] { background: rgba(239, 68, 68, 0.12); color: rgb(185, 28, 28); }
.tm8-assignee-marker--danger-cross[b-51zaj1eoii] { background: rgba(239, 68, 68, 0.18); color: rgb(185, 28, 28); }
.tm8-assignee-marker--warn[b-51zaj1eoii] { background: rgba(245, 158, 11, 0.14); color: rgb(180, 83, 9); }

html.dark .tm8-assignee-marker--success[b-51zaj1eoii] { background: rgba(74, 222, 128, 0.22); color: rgb(187, 247, 208); }
html.dark .tm8-assignee-marker--success-cross[b-51zaj1eoii] { background: rgba(74, 222, 128, 0.28); color: rgb(187, 247, 208); }
html.dark .tm8-assignee-marker--danger[b-51zaj1eoii] { background: rgba(248, 113, 113, 0.22); color: rgb(254, 202, 202); }
html.dark .tm8-assignee-marker--danger-cross[b-51zaj1eoii] { background: rgba(248, 113, 113, 0.28); color: rgb(254, 202, 202); }
html.dark .tm8-assignee-marker--warn[b-51zaj1eoii] { background: rgba(251, 191, 36, 0.22); color: rgb(254, 240, 138); }

.tm8-drawer-activity[b-51zaj1eoii] {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.tm8-act-item[b-51zaj1eoii] {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--s-3);
}
.tm8-act-body[b-51zaj1eoii] { font-size: 13px; color: var(--text); line-height: 1.45; }
.tm8-act-body strong[b-51zaj1eoii] { font-weight: 600; }
.tm8-act-when[b-51zaj1eoii] {
    margin-top: 2px;
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* WI #948 — Attachments en el detalle read-only (Ver). Cada row mezcla
   icon + meta (filename + tamaño + uploader) + botón download. Reutiliza
   tokens del drawer; sin upload/delete. */
.tm8-drawer-attachments[b-51zaj1eoii] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tm8-drawer-attach-row[b-51zaj1eoii] {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.tm8-drawer-attach-icon[b-51zaj1eoii] { color: var(--text-secondary); }
.tm8-drawer-attach-meta[b-51zaj1eoii] { display: flex; flex-direction: column; min-width: 0; }
.tm8-drawer-attach-name[b-51zaj1eoii] {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm8-drawer-attach-size[b-51zaj1eoii] { font-size: 11px; }

.tm8-comment-input[b-51zaj1eoii] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    outline: 0;
    transition: border-color .12s, box-shadow .12s;
}
.tm8-comment-input:focus[b-51zaj1eoii] {
    border-color: var(--primary);
    box-shadow: var(--sh-focus);
}
.tm8-comment-input[b-51zaj1eoii]::placeholder { color: var(--text-tertiary); }

/* WI #1208 — inline @mention chip in a rendered comment. Color + tint only
   (no font metrics — the typography scale owns those). */
.tm8-mention[b-51zaj1eoii] {
    color: var(--primary);
    background: rgb(from var(--primary) r g b / 0.10);
    border-radius: 4px;
    padding: 0 3px;
}

.tm8-inline-link[b-51zaj1eoii] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--primary);
    font-weight: 500;
    padding: 4px 0;
    background: transparent;
    text-decoration: none;
}
.tm8-inline-link:hover[b-51zaj1eoii] { color: var(--primary-700); }

.tm8-drawer-foot[b-51zaj1eoii] {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    /* Labels are white-space:nowrap, so a footer that cannot wrap pushes its
       overflow OUT of the drawer (justify-content is flex-end). WI #1900. */
    flex-wrap: wrap;
    row-gap: 6px;
}
.tm8-drawer-foot .tm8-foot-spacer[b-51zaj1eoii] { margin-right: auto; }

/* The actions group wraps within itself, so Close keeps its own anchor on the
   left instead of being the item pushed out when a translation grows.
   flex-basis MUST stay 0: with `auto` the group's max-content width decides the
   footer's own line break, which drops Close onto a line of its own. */
.tm8-foot-actions[b-51zaj1eoii] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

/* ===================== SPLIT MENU ===================== */
.tm8-split-menu[b-51zaj1eoii] {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--sh-lg);
    padding: 4px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: tm8-menu-in-b-51zaj1eoii .14s ease-out both;
}
.tm8-split-menu-item[b-51zaj1eoii] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
}
.tm8-split-menu-item:hover[b-51zaj1eoii] { background: var(--surface-2); }
.tm8-split-menu-title[b-51zaj1eoii] { font-size: 13px; font-weight: 500; color: var(--text); }
.tm8-split-menu-help[b-51zaj1eoii]  { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; }

/* ===================== BUTTONS ===================== */
.tm8-btn[b-51zaj1eoii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.tm8-btn:focus-visible[b-51zaj1eoii] { outline: 0; box-shadow: var(--sh-focus); }
.tm8-btn:disabled[b-51zaj1eoii] { opacity: 0.5; cursor: not-allowed; }

.tm8-btn-primary[b-51zaj1eoii] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(15,17,21,0.05);
}
.tm8-btn-primary:hover:not(:disabled)[b-51zaj1eoii] {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.tm8-btn-secondary[b-51zaj1eoii] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-2);
    box-shadow: var(--sh-xs);
}
.tm8-btn-secondary:hover:not(:disabled)[b-51zaj1eoii] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.tm8-btn-ghost[b-51zaj1eoii] {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.tm8-btn-ghost:hover:not(:disabled)[b-51zaj1eoii] {
    background: var(--surface-2);
    color: var(--text);
}

.tm8-btn-danger[b-51zaj1eoii] {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(15,17,21,0.05);
}
.tm8-btn-danger:hover:not(:disabled)[b-51zaj1eoii] {
    background: var(--color-red-800);
    border-color: var(--color-red-800);
}

.tm8-btn-danger-ghost[b-51zaj1eoii] {
    background: transparent;
    color: var(--danger);
    border-color: transparent;
}
.tm8-btn-danger-ghost:hover:not(:disabled)[b-51zaj1eoii] {
    background: var(--danger-50);
    border-color: rgba(220,38,38,0.25);
}

.tm8-btn-sm[b-51zaj1eoii] {
    height: 28px;
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 6px;
}

.tm8-split[b-51zaj1eoii] { position: relative; display: inline-flex; }
.tm8-split-main[b-51zaj1eoii] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.tm8-split-caret[b-51zaj1eoii] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    width: auto;
}
/* /Pages/TaskManager/V8/TaskManagerV8.razor.rz.scp.css */
/* =========================================================
   Task Manager V8 — scoped CSS
   .tm8 is the page-root scope envelope. It hosts a local alias
   layer (--primary, --surface, --text, --s-N, --r-N, --sh-N, …)
   consumed by the 191 .tm8-* descendants below.

   MIGRATION ROADMAP (see project-tm8-alias-mapping memory):
     - Each migration step replaces a group of .tm8-* rules with
       canonical primitives in avalme-v1.css that consume doctrine
       tokens directly (--color-*, --radius-*, literal px). When
       the last consumer of an alias is gone, the alias gets
       deleted from this block.
     - When all aliases are dead, the block reduces to layout shell
       (padding + min-height) which may either move to MainLayout
       or become .av-task-manager (domain-specific).
     - When all .tm8-* rules are gone, this file is deleted.

   The :where(.tm8 *) reset shields native HTML inside the page
   from avalme.css legacy bleed. It stays until every <input>,
   <button>, <select>, raw <span>, etc. is replaced by a Mud
   component (which carries its own reset).
   ========================================================= */

.tm8[b-v8c284k0zo] {
    /* Brand */
    --primary:         var(--color-primary-600);
    --primary-600:     var(--color-primary-700);
    --primary-700:     var(--color-primary-800);
    --primary-50:      var(--color-primary-50);
    --primary-100:     var(--color-primary-100);
    --accent:          var(--color-sky-500);
    --accent-50:       var(--color-sky-50);

    /* Surfaces — --bg deleted (only consumer was .tm8 root; Mud's
       --mud-palette-background already paints the page). */
    --surface:         var(--color-white);
    --surface-2:       var(--color-gray-50);
    --surface-3:       var(--color-gray-100);

    /* Borders */
    --border:          var(--color-gray-150);
    --border-2:        var(--color-gray-200);
    --border-strong:   var(--color-gray-300);

    /* Text */
    --text:            var(--color-gray-950);
    --text-secondary:  var(--color-gray-600);
    --text-tertiary:   var(--color-gray-400);
    --text-on-primary: var(--color-white);

    /* Status */
    --success:         var(--color-success);
    --success-50:      var(--color-emerald-50);
    --warning:         var(--color-amber-600);
    --warning-50:      var(--color-amber-50);
    --danger:          var(--color-red-600);
    --danger-50:       var(--color-red-50);
    --info:            var(--color-sky-500);
    --info-50:         var(--color-sky-50);
    --neutral-50:      var(--color-gray-100);

    /* Priority */
    --urgent:          var(--color-red-600);
    --high:            var(--color-orange-600);
    --medium:          var(--color-amber-600);
    --low:             var(--color-gray-500);

    /* Radii */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 20px;
    --r-full: 999px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(15,17,21,0.04);
    --sh-sm: 0 1px 3px rgba(15,17,21,0.06), 0 1px 2px rgba(15,17,21,0.04);
    --sh-md: 0 4px 12px rgba(15,17,21,0.06), 0 2px 4px rgba(15,17,21,0.04);
    --sh-lg: 0 12px 32px rgba(15,17,21,0.10), 0 4px 8px rgba(15,17,21,0.05);
    --sh-xl: 0 24px 48px rgba(15,17,21,0.12);
    --sh-focus: 0 0 0 3px rgba(92,78,229,0.18);

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px;

    /* Type */
    --font-serif: var(--font-display);

    color: var(--text);
    min-height: 100%;
    padding: var(--s-7) var(--s-7) var(--s-9);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dark mode — remap the V8 local vars to the dark scale. Primary / status
   colors stay (they're brand-driven); surfaces / borders / text swap.
   --bg removed (no consumer); MainLayout + Mud handle the page bg. */
html.dark .tm8[b-v8c284k0zo] {
    --surface:         var(--color-dark-700);
    --surface-2:       var(--color-dark-800);
    --surface-3:       var(--color-dark-600);

    --border:          var(--color-dark-500);
    --border-2:        var(--color-dark-450);
    --border-strong:   var(--color-dark-400);

    --text:            var(--color-dark-50);
    --text-secondary:  var(--color-dark-200);
    --text-tertiary:   var(--color-dark-300);
}

/* ---------- Hard reset: shield the v8 scope from any global styles
   (avalme.css, MudBlazor reboot, etc.) without leaking outside.
   :where(...) wraps the selectors so they contribute 0 to specificity —
   any v8 component class (.tm8-btn, .tm8-pill, .tm8-filter-chip, …) wins
   automatically without needing !important. ---------- */
:where(.tm8)[b-v8c284k0zo],
:where(.tm8 *)[b-v8c284k0zo],
:where(.tm8 *::before)[b-v8c284k0zo],
:where(.tm8 *::after)[b-v8c284k0zo] { box-sizing: border-box; }

:where(.tm8 input, .tm8 select, .tm8 textarea, .tm8 button, .tm8 kbd)[b-v8c284k0zo] {
    margin: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.4;
    letter-spacing: inherit;
    text-transform: none;
    text-align: left;
    min-height: 0;
    height: auto;
    padding: 0;
    outline: none;
}

:where(.tm8 select)[b-v8c284k0zo] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    cursor: pointer;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

:where(.tm8 select::-ms-expand)[b-v8c284k0zo] { display: none; }

:where(.tm8 button)[b-v8c284k0zo] {
    cursor: pointer;
    user-select: none;
    font-family: var(--font-sans);
}

:where(.tm8 input, .tm8 textarea)[b-v8c284k0zo] {
    font-family: var(--font-sans);
}

:where(.tm8 label)[b-v8c284k0zo] { margin: 0; line-height: 1.4; }

:where(.tm8 table)[b-v8c284k0zo] {
    border-collapse: collapse;
    border-spacing: 0;
}

:where(.tm8 h1, .tm8 h2, .tm8 h3, .tm8 h4, .tm8 h5, .tm8 h6)[b-v8c284k0zo] {
    margin: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

:where(.tm8 p)[b-v8c284k0zo] { margin: 0; }
:where(.tm8 dl, .tm8 dd)[b-v8c284k0zo] { margin: 0; }
:where(.tm8 ul, .tm8 ol)[b-v8c284k0zo] { margin: 0; padding: 0; list-style: none; }

:where(.tm8 svg)[b-v8c284k0zo] { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* =========================================================
   HEADER — migrated to canonical <AvPageHeader>
   (Shared/Layout/AvPageHeader.razor + avalme-v1.css §20).
   ========================================================= */

/* =========================================================
   KPI CARDS
   ========================================================= */
.tm8-kpis[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

@media (max-width: 1280px) {
    .tm8-kpis[b-v8c284k0zo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .tm8-kpis[b-v8c284k0zo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm8[b-v8c284k0zo] { padding: var(--s-4); }
}

/* KPI tile shell + interactive hover migrated to canonical
   .av-card + .av-stat-tile (avalme-v1.css §17.1 + §17.3). */

/* KPI internal layout migrated to canonical .av-kpi family
   (avalme-v1.css §18). `.tm8-kpis` above is kept as the V8-specific
   grid layout container. */

/* Tab bar migrated to canonical .av-tabs-with-icon (avalme-v1.css §15.1).
   Count badge uses the same family's __tab-count modifier. */

/* =========================================================
   FILTER BAR (wrapped as a card, like the reference)
   ========================================================= */
.tm8-filterbar[b-v8c284k0zo] {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px;
}

/* Search field migrated to canonical .av-search-input (avalme-v1.css §16). */

/* Filter chips migrated to canonical .av-filter-pill (avalme-v1.css §13)
   with MudMenu + MudButton activator pattern, via the AvFilterPill component.
   Filter-bar utility blocks (divider, Filters btn, Refresh btn) migrated to
   .av-filter-pill-divider + .av-filter-pill / .av-filter-pill--icon-only
   (§13.7 / §13.8). The tm8-fb-divider / tm8-filter-btn / tm8-icon-btn rules
   used to live here — removed in the cleanup pass after every view became
   a doctrinal component. */

/* =========================================================
   CONTENT WRAPPER
   ========================================================= */
.tm8-content[b-v8c284k0zo] { display: flex; flex-direction: column; gap: var(--s-4); }

.tm8-empty[b-v8c284k0zo] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-7);
    color: var(--text-tertiary);
    text-align: center;
    font-size: 14px;
    box-shadow: var(--sh-xs);
}

/* =========================================================
   LIST VIEW — migrated to .av-task-group (§19) + .av-task-row (§21).
   Avatar primitive promoted to .av-bucket-avatar (§22). All tm8-row* /
   tm8-avatar* rules were removed in the cleanup pass after the List
   view became <ListView> + <TaskGroup> + <TaskRow>.
   ========================================================= */

/* Related-entity pill migrated to canonical .av-tag-with-mark family
   (avalme-v1.css §14). Color modifier comes from RelatedColor() helper
   in the code-behind; values mapped to `--info / --success / --warning /
   --error / --primary / --amber / --rose`. */

/* Status pills migrated to canonical `.av-tag av-tag--soft av-tag--<color> av-tag--pill`
   from avalme-v1.css §10.11. The 6×6 leading dot is `.av-tag__dot` (same section).
   Color mapping lives in AvTagClass() in the code-behind. */

/* =========================================================
   BOARD VIEW — migrated to .av-task-board (§23). Components: BoardView,
   BoardColumn, BoardCard. All tm8-board* rules removed in cleanup pass.

   CALENDAR (WEEK) — migrated to .av-task-calendar (§24). Component:
   CalendarView + CalendarEvent. All tm8-cal* / tm8-pill-btn / tm8-seg
   rules removed in cleanup pass.
   ========================================================= */

/* =========================================================
   AUTOMATION — migrated to .av-task-automation (§25). Components:
   AutomationView, AutomationCard. All tm8-auto* rules removed in
   cleanup pass.

   COMPLETED TABLE — migrated to .av-task-completed (§26). Component:
   CompletedView. All tm8-table* / tm8-th-* / tm8-td-* / tm8-attempts
   rules removed in cleanup pass.
   ========================================================= */

/* =========================================================
   DRAWER / MODAL SHARED
   ========================================================= */
@keyframes tm8-backdrop-in-b-v8c284k0zo {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tm8-drawer-in-b-v8c284k0zo {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes tm8-modal-in-b-v8c284k0zo {
    from { transform: translateY(-10px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)      scale(1);   opacity: 1; }
}

.tm8-drawer-backdrop[b-v8c284k0zo],
.tm8-modal-backdrop[b-v8c284k0zo] {
    position: fixed;
    inset: 0;
    background: rgba(15,17,21,0.36);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    animation: tm8-backdrop-in-b-v8c284k0zo .18s ease-out both;
}

.tm8-modal-backdrop[b-v8c284k0zo] {
    justify-content: center;
    align-items: flex-start;
    padding: var(--s-9) var(--s-4);
}

.tm8-drawer[b-v8c284k0zo] {
    width: 560px;
    max-width: 95vw;
    background: var(--surface);
    box-shadow: var(--sh-xl);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    animation: tm8-drawer-in-b-v8c284k0zo .32s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

.tm8-modal[b-v8c284k0zo] {
    animation: tm8-modal-in-b-v8c284k0zo .22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tm8-drawer-head[b-v8c284k0zo],
.tm8-modal-head[b-v8c284k0zo] {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    background: var(--surface);
}

.tm8-drawer-head[b-v8c284k0zo] {
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-4);
}

.tm8-drawer-head-icon[b-v8c284k0zo] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--primary-50);
    color: var(--primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.tm8-drawer-head-text[b-v8c284k0zo] { flex: 1; min-width: 0; }

.tm8-drawer-tag[b-v8c284k0zo] {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--primary-700);
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    border-radius: var(--r-xs);
    padding: 2px 8px;
    text-transform: uppercase;
}

.tm8-drawer-title[b-v8c284k0zo] {
    margin: 8px 0 4px;
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.005em;
}
.tm8-drawer-code[b-v8c284k0zo] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.tm8-modal-title[b-v8c284k0zo] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
}
.tm8-drawer-sub[b-v8c284k0zo],
.tm8-modal-sub[b-v8c284k0zo] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.tm8-icon-close[b-v8c284k0zo] {
    background: transparent;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tm8-icon-close:hover[b-v8c284k0zo] { background: var(--surface-2); color: var(--text); }

.tm8-drawer-body[b-v8c284k0zo] {
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.tm8-drawer-section[b-v8c284k0zo] { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.tm8-drawer-section:last-of-type[b-v8c284k0zo] { border-bottom: 0; }
.tm8-drawer-section-title[b-v8c284k0zo] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--s-3);
}

.tm8-drawer-desc[b-v8c284k0zo] {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}
.tm8-muted[b-v8c284k0zo] { color: var(--text-tertiary); }

.tm8-drawer-grid[b-v8c284k0zo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.tm8-drawer-row[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--s-3);
    align-items: center;
}
.tm8-drawer-row dt[b-v8c284k0zo] {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
}
.tm8-drawer-row dd[b-v8c284k0zo] {
    margin: 0;
    font-size: 13.5px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tm8-drawer-watchers[b-v8c284k0zo] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: -4px; }
.tm8-drawer-watchers .tm8-avatar[b-v8c284k0zo] { border: 2px solid var(--surface); margin-right: -6px; }
.tm8-drawer-watchers .tm8-avatar:last-child[b-v8c284k0zo] { margin-right: 0; }

/* WI #936 — creator surfaced as a watcher: avatar + "Creator" badge inline. */
.tm8-watcher-creator[b-v8c284k0zo] { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }

/* Per-assignee detail list inside the Assignees row of the detail drawer.
   One row per TaskAssignee with: avatar + name + status marker + (creator-only)
   reassign button. The marker drives the at-a-glance "did this person accept
   yet?" answer without needing a dedicated "Acceptance" row. */
.tm8-assignee-list[b-v8c284k0zo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tm8-assignee-row[b-v8c284k0zo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tm8-assignee-name[b-v8c284k0zo] {
    font-weight: 500;
    color: var(--text);
}

.tm8-assignee-reason[b-v8c284k0zo] {
    font-size: 12px;
    color: var(--text-muted, var(--text));
    opacity: 0.75;
    font-style: italic;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marker chip — color-coded pill with icon + label per acceptance state.
   The "-cross" variants override the assignee marker when the task itself
   is Completed or Cancelled, so every row inherits the task-level outcome. */
.tm8-assignee-marker[b-v8c284k0zo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.tm8-assignee-marker .mud-icon-root[b-v8c284k0zo] {
    width: 14px;
    height: 14px;
}

.tm8-assignee-marker--success[b-v8c284k0zo] {
    background: rgba(34, 197, 94, 0.12);
    color: rgb(21, 128, 61);
}

.tm8-assignee-marker--success-cross[b-v8c284k0zo] {
    background: rgba(34, 197, 94, 0.18);
    color: rgb(21, 128, 61);
}

.tm8-assignee-marker--danger[b-v8c284k0zo] {
    background: rgba(239, 68, 68, 0.12);
    color: rgb(185, 28, 28);
}

.tm8-assignee-marker--danger-cross[b-v8c284k0zo] {
    background: rgba(239, 68, 68, 0.18);
    color: rgb(185, 28, 28);
}

.tm8-assignee-marker--warn[b-v8c284k0zo] {
    background: rgba(245, 158, 11, 0.14);
    color: rgb(180, 83, 9);
}

/* Dark-mode tone shift — the soft tints work in light but read too washed-out
   over the dark drawer surface. Bump alpha + lighten text. */
html.dark .tm8-assignee-marker--success[b-v8c284k0zo] { background: rgba(74, 222, 128, 0.22); color: rgb(187, 247, 208); }
html.dark .tm8-assignee-marker--success-cross[b-v8c284k0zo] { background: rgba(74, 222, 128, 0.28); color: rgb(187, 247, 208); }
html.dark .tm8-assignee-marker--danger[b-v8c284k0zo] { background: rgba(248, 113, 113, 0.22); color: rgb(254, 202, 202); }
html.dark .tm8-assignee-marker--danger-cross[b-v8c284k0zo] { background: rgba(248, 113, 113, 0.28); color: rgb(254, 202, 202); }
html.dark .tm8-assignee-marker--warn[b-v8c284k0zo] { background: rgba(251, 191, 36, 0.22); color: rgb(254, 240, 138); }

/* WI #948 — Attachments en el detalle read-only (Ver). Cada row mezcla
   icon + meta (filename + tamaño + uploader) + botón download. Reutiliza
   tokens del drawer; sin upload/delete. */
.tm8-drawer-attachments[b-v8c284k0zo] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tm8-drawer-attach-row[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.tm8-drawer-attach-icon[b-v8c284k0zo] { color: var(--text-secondary); }
.tm8-drawer-attach-meta[b-v8c284k0zo] { display: flex; flex-direction: column; min-width: 0; }
.tm8-drawer-attach-name[b-v8c284k0zo] {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm8-drawer-attach-size[b-v8c284k0zo] { font-size: 11px; }

.tm8-drawer-activity[b-v8c284k0zo] {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.tm8-act-item[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--s-3);
}
.tm8-act-body[b-v8c284k0zo] { font-size: 13px; color: var(--text); line-height: 1.45; }
.tm8-act-body strong[b-v8c284k0zo] { font-weight: 600; }
.tm8-act-when[b-v8c284k0zo] {
    margin-top: 2px;
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

.tm8-comment-input[b-v8c284k0zo] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    outline: 0;
    transition: border-color .12s, box-shadow .12s;
}
.tm8-comment-input:focus[b-v8c284k0zo] {
    border-color: var(--primary);
    box-shadow: var(--sh-focus);
}
.tm8-comment-input[b-v8c284k0zo]::placeholder { color: var(--text-tertiary); }

/* Priority chips migrated to .av-tag av-tag--<variant> av-tag--<color> av-tag--pill
   from avalme-v1.css §10.11. Mapping lives in TaskPresenters.AvTagPriorityClass()
   (Urgent → filled-error, High → soft-error, Medium → soft-warning,
   Low → soft-info, null → soft-neutral). */

/* WI #1900 — the .tm8-drawer-foot rules that used to live here are GONE. This file is
   scoped to TaskManagerV8.razor, which renders no drawer footer, so they only ever
   reached the drawer's own stylesheet by coincidence of naming — and the one they
   carried was `flex-wrap: nowrap`, which is the bug. Dedup these two copies, or add a
   drawer footer to this component, and the overflow comes back. The footer's rules live
   in TaskDetailDrawer.razor.css and nowhere else. */
.tm8-modal-foot[b-v8c284k0zo] {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    /* Modals can wrap if cramped. */
    flex-wrap: wrap;
}
/* Split-button rules live in the BUTTONS section (.tm8-split-*) */

/* =========================================================
   MODAL (centered)
   ========================================================= */
.tm8-modal[b-v8c284k0zo] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 560px;
    box-shadow: var(--sh-xl);
    display: flex;
    flex-direction: column;
}
.tm8-modal-narrow[b-v8c284k0zo] { max-width: 420px; }

.tm8-modal-body[b-v8c284k0zo] { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.tm8-modal-text[b-v8c284k0zo] { margin: 0; font-size: 13.5px; color: var(--text); }

.tm8-field[b-v8c284k0zo] { display: flex; flex-direction: column; gap: 6px; }
.tm8-field-label[b-v8c284k0zo] {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
}
.tm8-field-input[b-v8c284k0zo],
.tm8-field-textarea[b-v8c284k0zo] {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 10px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--text);
    outline: 0;
    transition: border-color .12s, box-shadow .12s;
    width: 100%;
}
.tm8-field-input:focus[b-v8c284k0zo],
.tm8-field-textarea:focus[b-v8c284k0zo] {
    border-color: var(--primary);
    box-shadow: var(--sh-focus);
}
.tm8-field-textarea[b-v8c284k0zo] { resize: vertical; min-height: 80px; font-family: var(--font-sans); }

.tm8-field-row[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.tm8-field-row.tm8-field-row-2[b-v8c284k0zo] { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
    .tm8-field-row[b-v8c284k0zo],
    .tm8-field-row.tm8-field-row-2[b-v8c284k0zo] { grid-template-columns: 1fr; }
}

/* =========================================================
   ADD-TASK DRAWER — sections, labels, inputs, toggle, viz grid,
   accordion, chips. Adapted from the reference HTML.
   ========================================================= */
.tm8-section[b-v8c284k0zo] {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.tm8-section:last-child[b-v8c284k0zo] { border-bottom: 0; }

.tm8-section-title[b-v8c284k0zo] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.tm8-form-field[b-v8c284k0zo] { margin-bottom: 14px; }
.tm8-form-field:last-child[b-v8c284k0zo] { margin-bottom: 0; }

.tm8-lbl[b-v8c284k0zo] {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 5px;
}
.tm8-req[b-v8c284k0zo] { color: var(--danger); margin-left: 2px; }
.tm8-opt[b-v8c284k0zo] { color: var(--text-tertiary); font-weight: 400; margin-left: 6px; font-size: 11px; }
.tm8-field-help[b-v8c284k0zo] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-top: 5px;
    line-height: 1.45;
}

/* Cleaner input/select/textarea — overrides the older .tm8-field-input */
.tm8-input[b-v8c284k0zo],
.tm8-textarea[b-v8c284k0zo],
.tm8-select[b-v8c284k0zo] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.tm8-input[b-v8c284k0zo]::placeholder,
.tm8-textarea[b-v8c284k0zo]::placeholder { color: var(--text-tertiary); }
.tm8-input:focus[b-v8c284k0zo],
.tm8-textarea:focus[b-v8c284k0zo],
.tm8-select:focus[b-v8c284k0zo] {
    outline: 0;
    border-color: var(--primary);
    box-shadow: var(--sh-focus);
}
.tm8-textarea[b-v8c284k0zo] {
    height: auto;
    padding: 9px 10px;
    line-height: 1.5;
    resize: vertical;
    min-height: 64px;
    font-family: var(--font-sans);
}

/* Native select chevron killed; replaced by inline-SVG background-image
   so it stays consistent across every browser. */
.tm8-select[b-v8c284k0zo] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F9C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

/* Pill toggle (Assign to myself etc.) */
.tm8-toggle[b-v8c284k0zo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.tm8-toggle input[b-v8c284k0zo] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.tm8-toggle-track[b-v8c284k0zo] {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--r-full);
    background: var(--border-strong);
    transition: background .15s;
    flex-shrink: 0;
}
.tm8-toggle-track[b-v8c284k0zo]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--sh-xs);
    transition: left .15s;
}
.tm8-toggle input:checked + .tm8-toggle-track[b-v8c284k0zo] { background: var(--primary); }
.tm8-toggle input:checked + .tm8-toggle-track[b-v8c284k0zo]::after { left: 16px; }
.tm8-toggle-label[b-v8c284k0zo] {
    font-size: 13px;
    margin-left: 9px;
    color: var(--text);
}

/* Visibility 2×2 grid (Private / Team / Workspace / Shared) */
.tm8-viz-grid[b-v8c284k0zo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.tm8-viz-opt[b-v8c284k0zo] {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font-family: var(--font-sans);
}
.tm8-viz-opt:hover[b-v8c284k0zo] { border-color: var(--border-strong); }
.tm8-viz-opt.is-selected[b-v8c284k0zo] {
    border-color: var(--primary);
    background: var(--primary-50);
}
.tm8-viz-opt-name[b-v8c284k0zo] { font-size: 12.5px; font-weight: 550; color: var(--text); }
.tm8-viz-opt-desc[b-v8c284k0zo] { font-size: 11px; color: var(--text-tertiary); }

/* Quick-template chips */
.tm8-chips[b-v8c284k0zo] { display: flex; flex-wrap: wrap; gap: 6px; }
.tm8-chip[b-v8c284k0zo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.tm8-chip:hover[b-v8c284k0zo] {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--primary);
}
.tm8-chip.is-selected[b-v8c284k0zo] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
}

/* Accordion (Advanced Options) */
.tm8-acc[b-v8c284k0zo] {
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--surface);
}
.tm8-acc-head[b-v8c284k0zo] {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: var(--surface);
    transition: background .12s;
    font-family: var(--font-sans);
    width: 100%;
    border: 0;
    color: var(--text);
}
.tm8-acc-head:hover[b-v8c284k0zo] { background: var(--surface-2); }
.tm8-acc-name[b-v8c284k0zo] { font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; gap: 8px; }
.tm8-acc-caret[b-v8c284k0zo] { transition: transform .15s; color: var(--text-tertiary); }
.tm8-acc.is-open .tm8-acc-caret[b-v8c284k0zo] { transform: rotate(90deg); }
.tm8-acc-body[b-v8c284k0zo] {
    padding: 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease, padding .2s ease;
}
.tm8-acc.is-open .tm8-acc-body[b-v8c284k0zo] {
    padding: 14px;
    max-height: 600px;
    border-top: 1px solid var(--border);
}

/* "Add another …" inline link button (RELATED TO section) */
.tm8-inline-link[b-v8c284k0zo] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--primary);
    font-weight: 500;
    padding: 4px 0;
    background: transparent;
}
.tm8-inline-link:hover[b-v8c284k0zo] { color: var(--primary-700); }

/* Inline error message under a field */
.tm8-field-error[b-v8c284k0zo] {
    font-size: 11.5px;
    color: var(--danger);
    margin-top: 4px;
}

/* =========================================================
   SPLIT-BUTTON DROPDOWN MENU (Mark Complete caret)
   ========================================================= */
.tm8-split-menu[b-v8c284k0zo] {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--sh-lg);
    padding: 4px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: tm8-menu-in-b-v8c284k0zo .14s ease-out both;
}
@keyframes tm8-menu-in-b-v8c284k0zo {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tm8-split-menu-item[b-v8c284k0zo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
}
.tm8-split-menu-item:hover[b-v8c284k0zo] { background: var(--surface-2); }
.tm8-split-menu-title[b-v8c284k0zo] { font-size: 13px; font-weight: 500; color: var(--text); }
.tm8-split-menu-help[b-v8c284k0zo]  { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; }

/* =========================================================
   BUTTONS  — aligned with the reference design system.
   Specificity is now safe to declare with single-class selectors
   because the global reset above is wrapped in :where() (specificity 0).
   ========================================================= */
.tm8-btn[b-v8c284k0zo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.tm8-btn:focus-visible[b-v8c284k0zo] { outline: 0; box-shadow: var(--sh-focus); }
.tm8-btn:disabled[b-v8c284k0zo] { opacity: 0.5; cursor: not-allowed; }

.tm8-btn-primary[b-v8c284k0zo] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(15,17,21,0.05);
}
.tm8-btn-primary:hover:not(:disabled)[b-v8c284k0zo] {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.tm8-btn-secondary[b-v8c284k0zo] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-2);
    box-shadow: var(--sh-xs);
}
.tm8-btn-secondary:hover:not(:disabled)[b-v8c284k0zo] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.tm8-btn-ghost[b-v8c284k0zo] {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.tm8-btn-ghost:hover:not(:disabled)[b-v8c284k0zo] {
    background: var(--surface-2);
    color: var(--text);
}

.tm8-btn-danger[b-v8c284k0zo] {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(15,17,21,0.05);
}
.tm8-btn-danger:hover:not(:disabled)[b-v8c284k0zo] {
    background: var(--color-red-800);
    border-color: var(--color-red-800);
}

.tm8-btn-danger-ghost[b-v8c284k0zo] {
    background: transparent;
    color: var(--danger);
    border-color: transparent;
}
.tm8-btn-danger-ghost:hover:not(:disabled)[b-v8c284k0zo] {
    background: var(--danger-50);
    border-color: rgba(220,38,38,0.25);
}

/* Size variants */
.tm8-btn-sm[b-v8c284k0zo] {
    height: 28px;
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 6px;
}
.tm8-btn-lg[b-v8c284k0zo] {
    height: 40px;
    padding: 9px 16px;
    font-size: 14px;
}
.tm8-btn-icon[b-v8c284k0zo] {
    width: 34px;
    padding: 0;
    justify-content: center;
}
.tm8-btn-sm.tm8-btn-icon[b-v8c284k0zo] { width: 28px; }

/* Split button (used in drawer Mark Complete) */
.tm8-split[b-v8c284k0zo] { position: relative; display: inline-flex; }
.tm8-split-main[b-v8c284k0zo] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.tm8-split-caret[b-v8c284k0zo] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    width: auto;
}
/* /Pages/Tools/Components/ToolPaymentSummary.razor.rz.scp.css */
/* Layout and colour only: typography comes from Typo.* (CLAUDE.md). */

.tool-summary__total[b-tpiqi8b203] {
    margin-top: 16px;
}

.tool-summary__bar[b-tpiqi8b203] {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 12px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--color-gray-100);
}

html.dark .tool-summary__bar[b-tpiqi8b203] {
    background: var(--color-dark-600);
}

.tool-summary__seg--pi[b-tpiqi8b203] {
    fill: var(--color-primary-600);
}

.tool-summary__seg--ti[b-tpiqi8b203] {
    fill: var(--color-success);
}

.tool-summary__seg--other[b-tpiqi8b203] {
    fill: var(--color-warning);
}

.tool-summary__legend[b-tpiqi8b203] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
}

.tool-summary__legend-item[b-tpiqi8b203] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tool-summary__dot[b-tpiqi8b203] {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.tool-summary__dot--pi[b-tpiqi8b203] {
    background-color: var(--color-primary-600);
}

.tool-summary__dot--ti[b-tpiqi8b203] {
    background-color: var(--color-success);
}

.tool-summary__dot--other[b-tpiqi8b203] {
    background-color: var(--color-warning);
}

.tool-summary__lines[b-tpiqi8b203] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-200);
}

html.dark .tool-summary__lines[b-tpiqi8b203] {
    border-top-color: var(--color-dark-500);
}

.tool-summary__line[b-tpiqi8b203] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tool-summary__line--total[b-tpiqi8b203] {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-gray-200);
}

html.dark .tool-summary__line--total[b-tpiqi8b203] {
    border-top-color: var(--color-dark-500);
}

.tool-summary__kpis[b-tpiqi8b203] {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
/* /Pages/Tools/Components/ToolScheduleCard.razor.rz.scp.css */
/* Layout only: typography comes from Typo.* (CLAUDE.md). */

.tool-schedule__bar[b-hvmmvymxza] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 12px;
}

.tool-schedule__actions[b-hvmmvymxza] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tool-schedule__chart[b-hvmmvymxza] {
    min-height: 280px;
}
/* /Pages/Tools/Components/ToolYesNoQuestion.razor.rz.scp.css */
/* Layout and colour only: typography comes from Typo.* and av-btn (CLAUDE.md). */

.tool-yesno[b-0e046827dw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--color-gray-200);
}

html.dark .tool-yesno[b-0e046827dw] {
    border-top-color: var(--color-dark-500);
}

.tool-yesno--nested[b-0e046827dw] {
    margin-left: 10px;
    padding-left: 14px;
    border-top: 0;
    border-left: 2px solid var(--color-primary-200);
}

html.dark .tool-yesno--nested[b-0e046827dw] {
    border-left-color: var(--color-dark-450);
}

.tool-yesno__text[b-0e046827dw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.tool-yesno__options[b-0e046827dw] {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    background: var(--color-gray-50);
}

html.dark .tool-yesno__options[b-0e046827dw] {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

.tool-yesno__options[b-0e046827dw]  .tool-yesno__option.mud-button-root {
    min-width: 44px;
    height: 26px;
    border-radius: 6px;
}
/* /Pages/Tools/DocNeedItPanel.razor.rz.scp.css */
/* Layout and colour only: typography comes from Typo.* (CLAUDE.md). */

.docneedit__selector[b-hou8a5imri] {
    margin-top: 16px;
}

.docneedit__selects[b-hou8a5imri] {
    margin-bottom: 8px;
}

.docneedit__counts[b-hou8a5imri] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.docneedit__group[b-hou8a5imri] {
    margin-top: 16px;
}

.docneedit__items[b-hou8a5imri] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.docneedit__item[b-hou8a5imri] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}
/* /Pages/Tools/Landing.razor.rz.scp.css */
/* Realtor Landing Page Styles */

.realtor-landing-page[b-7q9emm61sh] {
    min-height: 100vh;
    background: var(--mud-palette-background);
}

/* AvalMe Header */
.avalme-header[b-7q9emm61sh] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Hero Section */
.hero-section-realtor[b-7q9emm61sh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.hero-section-realtor[b-7q9emm61sh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.realtor-avatar[b-7q9emm61sh] {
    width: 150px !important;
    height: 150px !important;
    border: 5px solid white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.realtor-avatar-default[b-7q9emm61sh] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.realtor-name[b-7q9emm61sh] {
    color: white;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.professional-summary[b-7q9emm61sh] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
}

/* Content Container */
.content-container[b-7q9emm61sh] {
    padding: 3rem 1rem;
}

/* Section Spacing */
.section-spacing[b-7q9emm61sh] {
    margin: 4rem 0;
}

.section-title[b-7q9emm61sh] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title[b-7q9emm61sh]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

/* About Card */
.about-card[b-7q9emm61sh] {
    padding: 3rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.profile-text[b-7q9emm61sh] {
    line-height: 1.8;
    color: var(--mud-palette-text-secondary);
    font-size: 1.1rem;
}

/* Professional Info Cards */
.professional-info-section[b-7q9emm61sh] {
    background: var(--mud-palette-surface);
    padding: 3rem 1rem;
    border-radius: 16px;
}

.info-card[b-7q9emm61sh] {
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 100%;
}

.info-card:hover[b-7q9emm61sh] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.info-icon-container[b-7q9emm61sh] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Contact Section */
.contact-section[b-7q9emm61sh] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 4rem 1rem;
    border-radius: 16px;
}

.contact-form-card[b-7q9emm61sh] {
    padding: 3rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.consent-checkbox[b-7q9emm61sh] {
    font-size: 0.95rem;
}

.submit-button[b-7q9emm61sh] {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
}

.submit-button:hover[b-7q9emm61sh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Footer */
.landing-footer[b-7q9emm61sh] {
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4rem;
}

/* Responsive Design */
@media (max-width: 960px) {
    .hero-section-realtor[b-7q9emm61sh] {
        padding: 3rem 0;
    }

    .realtor-avatar[b-7q9emm61sh] {
        width: 120px !important;
        height: 120px !important;
    }

    .realtor-name[b-7q9emm61sh] {
        font-size: 2rem;
    }

    .professional-summary[b-7q9emm61sh] {
        font-size: 1.1rem;
    }

    .about-card[b-7q9emm61sh],
    .contact-form-card[b-7q9emm61sh] {
        padding: 2rem;
    }

    .info-card[b-7q9emm61sh] {
        padding: 2rem 1.5rem;
    }

    .section-spacing[b-7q9emm61sh] {
        margin: 3rem 0;
    }
}

@media (max-width: 600px) {
    .content-container[b-7q9emm61sh] {
        padding: 2rem 1rem;
    }

    .realtor-avatar[b-7q9emm61sh] {
        width: 100px !important;
        height: 100px !important;
    }

    .realtor-name[b-7q9emm61sh] {
        font-size: 1.75rem;
    }

    .professional-summary[b-7q9emm61sh] {
        font-size: 1rem;
    }

    .about-card[b-7q9emm61sh],
    .contact-form-card[b-7q9emm61sh] {
        padding: 1.5rem;
    }

    .info-icon-container[b-7q9emm61sh] {
        width: 60px;
        height: 60px;
    }

    .section-spacing[b-7q9emm61sh] {
        margin: 2rem 0;
    }
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
    .about-card[b-7q9emm61sh],
    .contact-form-card[b-7q9emm61sh] {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .info-card:hover[b-7q9emm61sh] {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
}
/* /Pages/Tools/MortgageCalculatorPanel.razor.rz.scp.css */
/* Layout and colour only: typography comes from Typo.* (CLAUDE.md). */

/* Loan purpose: segmented like Fixed / ARM in Loan Details. */
.mc-purpose[b-f453t318k5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 420px;
}

.mc-purpose[b-f453t318k5]  .mc-segmented {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    background: transparent;
}

.mc-purpose[b-f453t318k5]  .mc-segmented .mud-toggle-item {
    flex: 1 1 0;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mud-palette-text-secondary) !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.mc-purpose[b-f453t318k5]  .mc-segmented .mud-toggle-item:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.06) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mc-purpose[b-f453t318k5]  .mc-segmented .mud-toggle-item-selected {
    background: rgb(from var(--mud-palette-primary) r g b / 0.10) !important;
    border-color: rgb(from var(--mud-palette-primary) r g b / 0.40) !important;
    color: var(--mud-palette-primary) !important;
}

.mc-seg-center[b-f453t318k5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.mc-switches[b-f453t318k5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}

.mc-switches[b-f453t318k5]  .mud-input-control {
    margin: 0;
}

/* Calculated (read-only) amounts: tinted surface. */
[b-f453t318k5] .mc-calculated .mud-input-outlined {
    background: var(--color-gray-50);
}

html.dark[b-f453t318k5]  .mc-calculated .mud-input-outlined {
    background: var(--color-dark-600);
}

/* ApexCharts paints its own background in dark mode; let the card show through. */
.mc-schedule[b-f453t318k5]  .apexcharts-canvas svg {
    background: none !important;
}
/* /Shared/LandingPage.razor.rz.scp.css */
.avalme-bottom-shadow[b-crt5l5uprg] {
    position: absolute;
    width: 1440px;
    height: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(245, 245, 245, 0) 100%);
    z-index: 60;
}

.shadow[b-crt5l5uprg] {
    position: absolute;
    left: 50%;
    width: 270px;
    height: 465px;
    background: linear-gradient(90deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%);
    z-index: 50;
}

.avalme-landing-global-container[b-crt5l5uprg] {
    max-width: 1440px;
    margin: 0 auto;
}

.landing-header-img[b-crt5l5uprg] {
    position: absolute;
    z-index: 0;
}

.landing-header-content[b-crt5l5uprg] {
    min-height: 800px;
    z-index: 5;
}

.landing-header-content-left[b-crt5l5uprg] {
    max-width: 450px;
    color: #FFF;
    z-index: 100;
}

.landing-header-background-img[b-crt5l5uprg] {
    background: url('../landing-header-background-image.png') no-repeat;
    opacity: 20%;
    position: absolute;
    width: 750px;
    height: 500px;
    clip-path: ellipse(45% 50% at 50% 50%);
    z-index: 10;
}

    .landing-header-background-img[b-crt5l5uprg]:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(0,0,0,0.2) 100%);
    }

.landing-header-over-img[b-crt5l5uprg] {
    position: absolute;
    bottom: 10%;
    right: 10%;
    z-index: 15;
}

.landing-regular-section[b-crt5l5uprg] {
    background-color: #F1F1F1;
}

.avalme-button[b-crt5l5uprg] {
    border-radius: 10px;
    padding: 4px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 18.75px;
    text-transform: none;
}

.avalme-primary-button[b-crt5l5uprg] {
    background: linear-gradient(275deg, #33EC00 0%, #CAFF3C 100%);
    width: max-content;
}

.avalme-secondary-button[b-crt5l5uprg] {
    border: 0;
    background-image: linear-gradient(150deg, #33EC00 0%, #CAFF3C 100%);
    color: #33EC00;
    padding: 1px;
    display: flex;
    cursor: pointer;
    transition: .3s;
}

    .avalme-secondary-button span[b-crt5l5uprg] {
        background-color: #5F008C;
        padding: 1px 8px 2px;
        border-radius: 10px;
    }

        .avalme-secondary-button span span[b-crt5l5uprg] {
            padding-right: 0px;
        }

.avalme-subtitle[b-crt5l5uprg] {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: #260038;
}

.avalme-divider[b-crt5l5uprg] {
    height: 2px;
    background: radial-gradient(50% 86% at 50% 50%, #33EC00 0%, rgba(241, 241, 241, 0) 100%);
}

.avalme-footer-divider[b-crt5l5uprg] {
    height: 2px;
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 30%, rgba(171,171,171,0.05) 100%);
}

.avalme-featured-app-card[b-crt5l5uprg] {
    border-radius: 10px;
    box-shadow: none;
}

    .avalme-featured-app-card:hover[b-crt5l5uprg] {
        box-shadow: 0px 0px 30px 5px rgba(143,143,143,1);
    }

.avalme-featured-app-logo[b-crt5l5uprg] {
    text-align: center;
}

.avalme-featured-app-title-1[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 46px;
    color: #580181;
}

.avalme-featured-app-title-2[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    color: #580181;
}

.avalme-featured-app-subtitle[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.5em;
    color: #580181;
}

.avalme-featured-app-service-title-1[b-crt5l5uprg],
.avalme-featured-app-service-title-2[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
}

.avalme-featured-app-content[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
}

.avalme-featured-app-service-title-1[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
}

.avalme-featured-app-service-title-2[b-crt5l5uprg] {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
}

.avalme-featured-app-services[b-crt5l5uprg] {
    color: #C1C1C1;
}

    .avalme-featured-app-services:hover[b-crt5l5uprg] {
        color: #580181;
    }

.avalme-about-us-section[b-crt5l5uprg] {
    min-width: 1440px;
    padding: 40px 0;
    background: url('../businessmen-bg.svg') top right no-repeat;
}

.avalme-about-us-title[b-crt5l5uprg] {
    color: #580181;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
}

.avalme-about-us-text[b-crt5l5uprg] {
    color: #580181;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}

.avalme-contact-section[b-crt5l5uprg] {
    min-width: 1440px;
    background: linear-gradient(275deg, #33EC00 0%, #CAFF3C 100%);
}

.avalme-footer-section[b-crt5l5uprg] {
    min-width: 1440px;
    background: linear-gradient(105deg, #260038 0%, #5F008C 100%);
    color: white;
}

.avalme-footer-section-title[b-crt5l5uprg] {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 10px;
}

.avalme-footer-section-text[b-crt5l5uprg] {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}