/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout scoped styles - MudBlazor handles most layout */

#blazor-error-ui[b-ra5zugdur5] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ra5zugdur5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Accounts.razor.rz.scp.css */
/* ── Context bar ─────────────────────────────────────────────────── */
.context-bar[b-yxkmn1emum] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
/* /Components/Pages/AiChat.razor.rz.scp.css */
/* ============================================================
   AiChat.razor.css  — scoped styles for the AI chat page
   ============================================================ */

/* Shell: fill the whole viewport */
.aichat-shell[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #0F1117;
    color: #F1F5F9;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.aichat-header[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    background: #0F1117;
    border-bottom: 1px solid #1E293B;
    flex-shrink: 0;
    z-index: 10;
}

.aichat-header-left[b-27pcocdkh4],
.aichat-header-right[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aichat-logo[b-27pcocdkh4] {
    height: 28px;
}

.aichat-brand[b-27pcocdkh4] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #FFF;
}
.text-black[b-27pcocdkh4]{
    color: #000!important;
}

.aichat-brand-ai[b-27pcocdkh4] {
    color: #F97316;
}

.aichat-live-badge[b-27pcocdkh4] {
    background: #F97316;
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.aichat-header-tag[b-27pcocdkh4] {
    font-size: .8rem;
    color: #94A3B8;
}

.aichat-username[b-27pcocdkh4] {
    font-size: .85rem;
    color: #CBD5E1;
    font-weight: 500;
}

/* ── Body: three columns ─────────────────────────────────── */
.aichat-body[b-27pcocdkh4] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── LEFT sidebar ────────────────────────────────────────── */
.aichat-left[b-27pcocdkh4] {
    background: #FFF;
    border-right: 1px solid #1E293B;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width .2s ease;
    overflow: hidden;
}

.aichat-left--open[b-27pcocdkh4]   { width: 240px; }
.aichat-left--closed[b-27pcocdkh4] { width: 44px;  }

.aichat-left-inner[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 8px;
    gap: 8px;
}

.aichat-left-toolbar[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 4px;
}

.aichat-section-title[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.aichat-new-chat-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: 1.5px solid #F97316;
    color: #F97316;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
}

.aichat-new-chat-btn:hover[b-27pcocdkh4] {
    background: rgba(249,115,22,.1);
}

.aichat-session-list[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
}

.aichat-session-item[b-27pcocdkh4] {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aichat-session-item:hover[b-27pcocdkh4]   { background: #252836; }
.aichat-session-item.active[b-27pcocdkh4]  { background: rgba(249,115,22,.15); border-left: 3px solid #F97316; }

.aichat-session-body[b-27pcocdkh4] {
    flex: 1;
    min-width: 0;
}

.aichat-session-delete[b-27pcocdkh4] {
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
    color: #64748B !important;
}

.aichat-session-item:hover .aichat-session-delete[b-27pcocdkh4] {
    opacity: 1;
}

.aichat-session-delete:hover[b-27pcocdkh4] {
    color: #EF4444 !important;
}

.aichat-session-title[b-27pcocdkh4] {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: #F97316;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.aichat-session-meta[b-27pcocdkh4] {
    display: block;
    font-size: .72rem;
    color: #64748B;
    margin-top: 1px;
}

.aichat-left-footer[b-27pcocdkh4] {
    padding: 6px 4px 0;
    border-top: 1px solid #1E293B;
}

.aichat-left-collapsed[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 6px;
}

/* ── CENTER ──────────────────────────────────────────────── */
.aichat-center[b-27pcocdkh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aichat-messages[b-27pcocdkh4] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    gap: 20px;
    scroll-behavior: smooth;
}

/* Empty state */
.aichat-empty[b-27pcocdkh4] {
    margin: auto;
    text-align: center;
    max-width: 640px;
    padding: 20px;
}

.aichat-empty-logo[b-27pcocdkh4] { margin-bottom: 12px; }

.aichat-empty-title[b-27pcocdkh4] {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.aichat-empty-sub[b-27pcocdkh4] {
    font-size: .9rem;
    color: #94A3B8;
    margin-bottom: 28px;
    line-height: 1.6;
}

.aichat-suggestions[b-27pcocdkh4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.aichat-suggestion-card[b-27pcocdkh4] {
    background: #FFF;
    border: 1px solid #a1a1a3;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.aichat-suggestion-card:hover[b-27pcocdkh4] {
    border-color: #F97316;
    background: rgba(249,115,22,.06);
}

.aichat-suggestion-title[b-27pcocdkh4] {
    display: block;
    color: #F97316;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.aichat-suggestion-desc[b-27pcocdkh4] {
    display: block;
    color: #64748B;
    font-size: .78rem;
    line-height: 1.4;
}

/* Messages */
.aichat-msg[b-27pcocdkh4] {
    display: flex;
    gap: 10px;
}

.aichat-msg--user[b-27pcocdkh4] {
    justify-content: flex-end;
}

.aichat-msg--assistant[b-27pcocdkh4] {
    justify-content: flex-start;
    align-items: flex-start;
}

.aichat-msg-avatar[b-27pcocdkh4] {
    width: 30px;
    height: 30px;
    background: rgba(249,115,22,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.aichat-msg-bubble[b-27pcocdkh4] {
    padding: 10px 15px;
    border-radius: 14px;
    font-size: .87rem;
    line-height: 1.55;
    max-width: 72%;
}

.aichat-msg-bubble--user[b-27pcocdkh4] {
    color: #000;
    border-bottom-right-radius: 4px;
    border-color: rgb(255, 128, 0);
    border:1px solid rgb(255, 128, 0);
}

.aichat-msg-bubble--assistant[b-27pcocdkh4] {
    background: #FFF;
    color: #000;
    border-bottom-left-radius: 4px;
    border: 1PX solid #d8d8d8;
}

.aichat-msg-content[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 88%;
}

/* Generated SQL box */
.aichat-sql-box[b-27pcocdkh4] {
    background: #1E2436;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2D3748;
}

.aichat-sql-header[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #252D3D;
    font-size: .78rem;
    color: #fff;
}

.aichat-sql-code[b-27pcocdkh4] {
    margin: 0;
    padding: 10px 14px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: .78rem;
    line-height: 1.5;
    color: #93C5FD;
    background: #1E2436;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.aichat-confirm-row[b-27pcocdkh4] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.aichat-confirm-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    background: #F97316;
    border: none;
    border-radius: 8px;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s;
}

.aichat-confirm-btn:hover[b-27pcocdkh4] { background: #FB923C; }

.aichat-cancel-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #94A3B8;
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.aichat-cancel-btn:hover[b-27pcocdkh4] { border-color: #EF4444; color: #EF4444; }

/* Empty result message */
.aichat-result-empty[b-27pcocdkh4] {
    padding: 14px;
    font-size: .82rem;
    color: #94A3B8;
    background: #1E2436;
    font-style: italic;
}

/* Result table box */
.aichat-result-box[b-27pcocdkh4] {
    background: #1E2436;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2D3748;
}

.aichat-result-header[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #252D3D;
    font-size: .78rem;
    color: #fff;
}

.aichat-result-count[b-27pcocdkh4] {
    margin-left: auto;
    color: #64748B;
    font-size: .75rem;
}

.aichat-export-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #F97316;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background .15s;
}

.aichat-export-btn:hover[b-27pcocdkh4] { background: rgba(249,115,22,.12); }

.aichat-print-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}

.aichat-print-btn:hover[b-27pcocdkh4] { background: rgba(148,163,184,.12); color: #F1F5F9; }

.aichat-result-table-wrap[b-27pcocdkh4] {
    overflow-x: auto;
    max-height: 220px;
    overflow-y: auto;
}

.aichat-result-table[b-27pcocdkh4] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.aichat-result-table thead tr[b-27pcocdkh4] {
    background: #fff;
}

.aichat-result-table th[b-27pcocdkh4] {
    padding: 8px 12px;
    text-align: left;
    color: #94A3B8;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid #2D3748;
}

.aichat-result-table td[b-27pcocdkh4] {
    padding: 7px 12px;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #fff;
    white-space: nowrap;
}

.aichat-result-table tbody tr:hover[b-27pcocdkh4] { background: rgba(255,255,255,.03); }

/* Status message (replaces typing dots) */
.aichat-status-msg[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #1E2436;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    font-size: .82rem;
    color: #94A3B8;
    font-style: italic;
}

.aichat-status-dot-pulse[b-27pcocdkh4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F97316;
    flex-shrink: 0;
    animation: pulse-b-27pcocdkh4 1.2s infinite ease-in-out;
}

@keyframes pulse-b-27pcocdkh4 {
    0%, 100% { opacity: .4; transform: scale(0.85); }
    50%       { opacity: 1;  transform: scale(1.15); }
}

/* ── Input bar ───────────────────────────────────────────── */
.aichat-input-wrap[b-27pcocdkh4] {
    padding: 12px 32px 16px;
    background: #fff;
    border-top: 1px solid #F97316;
    flex-shrink: 0;
}

.aichat-input-box[b-27pcocdkh4] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #FFF;
    border: 1.5px solid #F97316;
    border-radius: 14px;
    padding: 8px 10px 8px 14px;
    transition: border-color .2s;
}

.aichat-input-box.focused[b-27pcocdkh4] {
    border-color: #F97316;
}

.aichat-textarea[b-27pcocdkh4] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #000;
    font-size: .88rem;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
    min-height: 40px;
}

.aichat-textarea[b-27pcocdkh4]::placeholder { color: #475569; }

.aichat-send-btn[b-27pcocdkh4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3b17c;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.aichat-send-btn.active[b-27pcocdkh4] {
    background: #F97316;
    color: #fff;
}

.aichat-send-btn:disabled[b-27pcocdkh4] { opacity: .5; cursor: not-allowed; }

.aichat-input-hint[b-27pcocdkh4] {
    font-size: .72rem;
    color: #475569;
    margin-top: 6px;
    padding-left: 2px;
}

.aichat-input-hint kbd[b-27pcocdkh4] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .7rem;
    color: #94A3B8;
    font-family: inherit;
}

/* ── RIGHT sidebar ───────────────────────────────────────── */
.aichat-right[b-27pcocdkh4] {
    background: #FFF;
    border-left: 1px solid #1E293B;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width .2s ease;
    overflow: hidden;
}

.aichat-right--open[b-27pcocdkh4]   { width: 270px; }
.aichat-right--closed[b-27pcocdkh4] { width: 44px;  }

.aichat-right-inner[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    padding: 12px 12px;
    gap: 14px;
    height: 100%;
    overflow-y: auto;
}

.aichat-right-toolbar[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aichat-right-collapsed[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 6px;
}

.aichat-ctx-row[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aichat-ctx-icon[b-27pcocdkh4] { display: flex; align-items: center; }

.aichat-ctx-label[b-27pcocdkh4] {
    font-size: .82rem;
    color: #94A3B8;
    flex: 1;
}

.aichat-ctx-field[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aichat-ctx-field-label[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    font-size: .75rem;
    color: #94A3B8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.aichat-scope-row[b-27pcocdkh4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.aichat-scope-chip[b-27pcocdkh4] {
    background: transparent;
    border: 1px solid #334155;
    border-radius: 999px;
    color: #94A3B8;
    font-size: .78rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.aichat-scope-chip:hover[b-27pcocdkh4] {
    border-color: #F97316;
    color: #F97316;
}

.aichat-scope-chip.active[b-27pcocdkh4] {
    background: #F97316;
    border-color: #F97316;
    color: #0f172a;
    font-weight: 600;
}

.aichat-ctx-select[b-27pcocdkh4],
.aichat-ctx-date[b-27pcocdkh4] {
    background: #fff;
    border: 1.5px solid #F97316;
    border-radius: 8px;
    color: #000;
    font-size: .82rem;
    padding: 7px 10px;
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s;
}

.aichat-ctx-select:focus[b-27pcocdkh4],
.aichat-ctx-date:focus[b-27pcocdkh4] { border-color: #F97316; }

.aichat-ctx-always[b-27pcocdkh4] {
    background: #f7c7a461;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aichat-ctx-always-title[b-27pcocdkh4] {
    font-size: .68rem;
    color: #475569;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.aichat-ctx-always-row[b-27pcocdkh4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aichat-ctx-always-key[b-27pcocdkh4] {
    font-size: .68rem;
    color: #475569;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.aichat-ctx-always-val[b-27pcocdkh4] {
    font-size: .82rem;
    color: #000;
    font-weight: 500;
}

.aichat-clear-btn[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #94A3B8;
    font-size: .8rem;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    width: 100%;
    justify-content: center;
}

.aichat-clear-btn:hover[b-27pcocdkh4] {
    border-color: #F97316;
    color: #F97316;
}

.aichat-ctx-status[b-27pcocdkh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: #FFF;
    background: #0F1117;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: auto;
}

.aichat-ctx-dropdown-backdrop[b-27pcocdkh4] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.aichat-ctx-dropdown-panel[b-27pcocdkh4] {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 4px;
    width: 260px;
    max-width: 90vw;
    background: #fff;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    padding: 8px;
}

.aichat-ctx-search-input[b-27pcocdkh4] {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #F97316;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: .8rem;
    color: #000;
    outline: none;
    margin-bottom: 6px;
}

.aichat-ctx-dropdown-list[b-27pcocdkh4] {
    max-height: 200px;
    overflow-y: auto;
}

.aichat-ctx-dropdown-item[b-27pcocdkh4] {
    padding: 6px 8px;
    font-size: .8rem;
    color: #0F172A;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aichat-ctx-dropdown-item:hover[b-27pcocdkh4] {
    background: #FDE9DA;
    color: #F97316;
}

.aichat-ctx-dropdown-empty[b-27pcocdkh4] {
    padding: 8px;
    font-size: .78rem;
    color: #64748B;
}

.aichat-status-dot[b-27pcocdkh4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
    animation: pulse-dot-b-27pcocdkh4 2s infinite;
}

@keyframes pulse-dot-b-27pcocdkh4 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}
/* /Components/Pages/AttributionSettingsDrawer.razor.rz.scp.css */
/* ── Overlay ─────────────────────────────────────────────────────── */
.settings-overlay[b-6psp8rdvva] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.settings-overlay.open[b-6psp8rdvva] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Drawer panel ────────────────────────────────────────────────── */
.settings-drawer[b-6psp8rdvva] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    width: 420px;
    max-width: 92vw;
    background: var(--ds-settings-drawer-bg);
    border-left: 1px solid var(--ds-settings-drawer-border);
    box-shadow: var(--ds-settings-drawer-shadow);
    color: var(--ds-settings-drawer-text);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-drawer.open[b-6psp8rdvva] {
    transform: translateX(0);
}

/* ── Header (fixed top) ─────────────────────────────────────────── */
.drawer-header[b-6psp8rdvva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Body (scrollable middle) ────────────────────────────────────── */
.drawer-body[b-6psp8rdvva] {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 20px;
}

/* ── Footer (fixed bottom) ───────────────────────────────────────── */
.drawer-footer[b-6psp8rdvva] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Section overline color ──────────────────────────────────────── */
.settings-drawer .mud-typography-overline[b-6psp8rdvva] {
    color: var(--ds-settings-drawer-section-clr) !important;
}

/* ── Scrollbar tint ──────────────────────────────────────────────── */
.drawer-body[b-6psp8rdvva]::-webkit-scrollbar-thumb {
    background: var(--ds-border);
}

.drawer-body[b-6psp8rdvva]::-webkit-scrollbar-thumb:hover {
    background: #b0bec5;
}
/* /Components/Pages/CompositeGipsReports.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Top header for the GIPS Compliant Presentation page.
   Mirrors the Performance Analytics layout: a short orange-accented title
   (no background bar / no bottom border) sitting directly above a dark-teal
   gradient toolbar that hosts the Select Composite / Select Date Range controls.
   ────────────────────────────────────────────────────────────────────────── */

.cgips-toolbar[b-l8q25l4oa8] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #05484e 0%, #08636b 60%, #0a7880 100%);
    padding: 8px 14px;
    margin-bottom: 16px;
}

.cgips-toolbar-row[b-l8q25l4oa8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* White-on-teal hover affordance for the selector buttons in the toolbar. */
.cgips-toolbar[b-l8q25l4oa8]  .mud-button-root:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.cgips-toolbar[b-l8q25l4oa8]  .mud-button-root .mud-icon-root {
    color: #ffffff;
}

/* ───────────────────────────────────────────────────────────────────────────
   Tab polish — gives the GIPS workflow tabs a premium, branded feel:
   • subtle elevated tab bar with a hairline divider
   • bold, comfortably spaced labels with a smooth color/lift transition
   • an orange gradient active-tab indicator that matches the action buttons
   • a faint hover wash so tabs feel responsive without being noisy
   ─────────────────────────────────────────────────────────────────────────── */
.cgips-tabs[b-l8q25l4oa8]  .mud-tabs-toolbar {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
    border-bottom: 1px solid rgba(2, 33, 53, 0.08);
    box-shadow: 0 1px 6px rgba(2, 33, 53, 0.06);
}

.cgips-tabs[b-l8q25l4oa8]  .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #4a5b6b;
    border-radius: 8px 8px 0 0;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.cgips-tabs[b-l8q25l4oa8]  .mud-tab:hover {
    color: #022135;
    background: rgba(8, 99, 107, 0.06);
    transform: translateY(-1px);
}

.cgips-tabs[b-l8q25l4oa8]  .mud-tab.mud-tab-active {
    color: #022135;
    font-weight: 700;
}

/* Replace MudBlazor's default slider with the brand orange gradient bar. */
.cgips-tabs[b-l8q25l4oa8]  .mud-tab-slider {
    background: linear-gradient(90deg, #FF8000 0%, #FF9E3A 100%) !important;
    height: 3px;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 8px rgba(255, 128, 0, 0.45);
}

/* Lift the tab content surface so the active panel reads as a card. */
.cgips-tabs[b-l8q25l4oa8]  .mud-tabs-panels {
    background: #ffffff;
    border-radius: 0 0 10px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Section reveal — the active tab panel fades + slides in on every switch,
   giving the page a polished, responsive feel. MudBlazor renders only the
   active panel, so animating it directly re-runs the effect per tab change.
   Disabled under prefers-reduced-motion for accessibility.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes cgipsPanelReveal-b-l8q25l4oa8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cgips-tabs[b-l8q25l4oa8]  .mud-tabs-panels .mud-tab-panel {
    animation: cgipsPanelReveal-b-l8q25l4oa8 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .cgips-tabs[b-l8q25l4oa8]  .mud-tabs-panels .mud-tab-panel {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   CV-style Composite dropdown popup (pa-menu-* classes).
   Copied 1-to-1 from CompositeVerification.razor.css so the GIPS toolbar
   dropdown looks pixel-identical to the Verification page.
   ───────────────────────────────────────────────────────────────────────── */

.pa-menu-backdrop[b-l8q25l4oa8] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.pa-menu-panel[b-l8q25l4oa8] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-l8q25l4oa8] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-l8q25l4oa8] {
    padding-top: 0;
}

.pa-menu-label[b-l8q25l4oa8] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Data-History coverage popup ── */
.pa-cov-pop[b-l8q25l4oa8] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-l8q25l4oa8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-l8q25l4oa8] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-l8q25l4oa8] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* ── Close (×) buttons inside the white pa-menu-panel popup ── */
.cgips-toolbar[b-l8q25l4oa8]  .pa-menu-panel .cr-popup-close-btn .mud-icon-root,
.cgips-toolbar[b-l8q25l4oa8]  .pa-menu-panel .cr-popup-close-btn svg {
    color: var(--ds-primary, #08636b) !important;
    fill:  var(--ds-primary, #08636b) !important;
}
.cgips-toolbar[b-l8q25l4oa8]  .pa-menu-panel .cr-popup-close-btn:hover {
    background: rgba(8, 99, 107, 0.08) !important;
}

/* ── DateDropdownPanel: restore teal + icon colour overridden by global
   app.css ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }" ── */
.cgips-toolbar[b-l8q25l4oa8]  .ds-date-panel .mud-icon-root,
.cgips-toolbar[b-l8q25l4oa8]  .ds-date-panel svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}
/* /Components/Pages/CompositeMembership.razor.rz.scp.css */
/* ── Saved View / Export toolbar icons sit on the .cgips-toolbar bar.
   These scoped rules force the Bookmarks / Download icons dark and override
   the global app.css ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }"
   whitening rule — replicated exactly from CompositeReturns.razor.css. */
.cgips-toolbar[b-5dd085f5u9]  .cr-saved-views-btn .mud-icon-root,
.cgips-toolbar[b-5dd085f5u9]  .cr-saved-views-btn svg,
.cgips-toolbar[b-5dd085f5u9]  .cr-export-btn .mud-icon-root,
.cgips-toolbar[b-5dd085f5u9]  .cr-export-btn svg {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
}

/* ── Results Summary empty-state container — matches the drop-zone shell used
   in CompositeReturns so the gips-empty-state halo renders identically. */
[b-5dd085f5u9] .cr-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

/* ── pa-menu-* composite popup — copied exactly from CompositeReturns.razor.css ── */
.cgips-toolbar[b-5dd085f5u9]  .pa-menu-panel .cr-popup-close-btn .mud-icon-root,
.cgips-toolbar[b-5dd085f5u9]  .pa-menu-panel .cr-popup-close-btn svg {
    color: var(--ds-primary, #08636b) !important;
    fill:  var(--ds-primary, #08636b) !important;
}
.cgips-toolbar[b-5dd085f5u9]  .pa-menu-panel .cr-popup-close-btn:hover {
    background: rgba(8, 99, 107, 0.08) !important;
}

.pa-menu-backdrop[b-5dd085f5u9] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.pa-menu-panel[b-5dd085f5u9] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-5dd085f5u9] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-5dd085f5u9] {
    padding-top: 0;
}

.pa-menu-label[b-5dd085f5u9] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Data History coverage popup + table — copied from CompositeReturns.razor.css ── */
.pa-cov-pop[b-5dd085f5u9] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-5dd085f5u9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-5dd085f5u9] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-5dd085f5u9] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* ── Widget grid + Results Summary — copied exactly from CompositeReturns.razor.css ── */
.cr-content[b-5dd085f5u9] {
    --cr-panel-height: 400px;
    display: contents;
}

[b-5dd085f5u9] .cr-summary-dropzone.cr-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

.cr-summary-grid[b-5dd085f5u9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    min-height: 60px;
}

.cr-summary-panel-wrapper[b-5dd085f5u9] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.cr-summary-panel-wrapper.cr-width-full[b-5dd085f5u9]  { grid-column: span 4; }
.cr-summary-panel-wrapper.cr-width-half[b-5dd085f5u9]  { grid-column: span 2; }
.cr-summary-panel-wrapper.cr-width-quarter[b-5dd085f5u9] { grid-column: span 1; }

.cr-summary-panel-wrapper[b-5dd085f5u9]  .cr-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

.cr-summary-panel-header[b-5dd085f5u9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.cr-summary-panel-content[b-5dd085f5u9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-5dd085f5u9] .cr-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

[b-5dd085f5u9] .cr-widget-grid > .mud-drop-item {
    grid-column: span 1;
    min-width: 0;
    cursor: grab;
}

[b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:active { cursor: grabbing; }

[b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M) { grid-column: span 2; }
[b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 4; }

.cr-widget-item[b-5dd085f5u9] {
    height: var(--cr-panel-height);
}

.cr-widget-card[b-5dd085f5u9] {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.cr-widget-header[b-5dd085f5u9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
    flex: 0 0 auto;
}

.cr-widget-header .d-flex[b-5dd085f5u9] { cursor: default; }

.cr-widget-body[b-5dd085f5u9] {
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}

.cr-widget-scroll[b-5dd085f5u9] {
    height: calc(var(--cr-panel-height) - 60px);
    overflow: hidden;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Let MudDataGrid fill the flex scroll container so FixedHeader manages scroll */
.cr-widget-scroll[b-5dd085f5u9]  .mud-data-grid,
.cr-summary-panel-content[b-5dd085f5u9]  .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

@media (max-width: 1280px) {
    .cr-summary-grid[b-5dd085f5u9] { grid-template-columns: repeat(2, 1fr); }
    .cr-summary-panel-wrapper.cr-width-full[b-5dd085f5u9]  { grid-column: span 2; }
    .cr-summary-panel-wrapper.cr-width-half[b-5dd085f5u9],
    .cr-summary-panel-wrapper.cr-width-quarter[b-5dd085f5u9] { grid-column: span 1; }
    [b-5dd085f5u9] .cr-widget-grid { grid-template-columns: repeat(2, 1fr); }
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item { grid-column: span 1; }
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 2; }
}

@media (max-width: 760px) {
    .cr-summary-grid[b-5dd085f5u9] { grid-template-columns: 1fr; }
    .cr-summary-panel-wrapper.cr-width-full[b-5dd085f5u9],
    .cr-summary-panel-wrapper.cr-width-half[b-5dd085f5u9],
    .cr-summary-panel-wrapper.cr-width-quarter[b-5dd085f5u9] { grid-column: span 1; }
    [b-5dd085f5u9] .cr-widget-grid { grid-template-columns: 1fr; }
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item,
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-5dd085f5u9] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 1; }
}
/* /Components/Pages/CompositeReturns.razor.rz.scp.css */
/* ── Ghost Date Button ──────────────────────────────────────────── */
.ghost-date-wrapper[b-se7f38if0b] {
    flex: none;
    max-width: 190px;
    border-radius: 8px;
    padding: 2px 6px;
    transition: background 0.15s ease;
}

.ghost-date-wrapper:hover[b-se7f38if0b] {
    background: rgba(0, 0, 0, 0.04);
}

/* Remove MudDatePicker underline for ghost look */
[b-se7f38if0b] .ghost-date-wrapper .mud-input-underline::before,
[b-se7f38if0b] .ghost-date-wrapper .mud-input-underline::after {
    border: none !important;
}

[b-se7f38if0b] .ghost-date-wrapper .mud-input {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

[b-se7f38if0b] .ghost-date-wrapper .mud-input-label {
    display: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Saved View / Export toolbar icons sit on the .cgips-toolbar bar next to the
   date selector. Per the PerformanceAnalytics reference these glyphs render in a
   dark color (not white), so these scoped rules force the Bookmarks / Download
   icons dark and override the global app.css ".cgips-toolbar .mud-button-root
   .mud-icon-root { color:#fff }" whitening rule plus any inherited MudMenu color. */
.cgips-toolbar[b-se7f38if0b]  .cr-saved-views-btn .mud-icon-root,
.cgips-toolbar[b-se7f38if0b]  .cr-saved-views-btn svg,
.cgips-toolbar[b-se7f38if0b]  .cr-export-btn .mud-icon-root,
.cgips-toolbar[b-se7f38if0b]  .cr-export-btn svg {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
}

/* ── Date dropdown panel: restore the + icon colour overridden by the global
   app.css rule ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }"
   The DateDropdownPanel floats inside .cgips-toolbar but renders on a white
   card, so the AddCircleOutline button must be teal, not white. ── */
.cgips-toolbar[b-se7f38if0b]  .ds-date-panel .mud-icon-root,
.cgips-toolbar[b-se7f38if0b]  .ds-date-panel svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* ── Close (×) buttons inside the white pa-menu-panel popups: override the
   global ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }" so
   the × renders in primary teal with a light-teal hover circle — matching
   the PerformanceAnalytics Portfolio dropdown exactly. ── */
.cgips-toolbar[b-se7f38if0b]  .pa-menu-panel .cr-popup-close-btn .mud-icon-root,
.cgips-toolbar[b-se7f38if0b]  .pa-menu-panel .cr-popup-close-btn svg {
    color: var(--ds-primary, #08636b) !important;
    fill:  var(--ds-primary, #08636b) !important;
}
.cgips-toolbar[b-se7f38if0b]  .pa-menu-panel .cr-popup-close-btn:hover {
    background: rgba(8, 99, 107, 0.08) !important;
}

/* ── Benchmark dropdown panel (copied exactly from PerformanceAnalytics pa-menu-* rules) ─── */
.pa-menu-backdrop[b-se7f38if0b] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.pa-menu-panel[b-se7f38if0b] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-se7f38if0b] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-se7f38if0b] {
    padding-top: 0;
}

.pa-menu-label[b-se7f38if0b] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-seg[b-se7f38if0b] {
    display: flex;
    gap: 4px;
}

.pa-seg-item[b-se7f38if0b] {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ds-border, #e0e0e0);
    font-size: 11px;
    line-height: 1.2;
    user-select: none;
    background: #fff;
    color: #444;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.pa-seg-item:hover[b-se7f38if0b] {
    border-color: var(--ds-primary, #08636b);
}

.pa-seg-item--active[b-se7f38if0b] {
    background: var(--ds-primary, #08636b);
    color: #fff;
    border-color: var(--ds-primary, #08636b);
}

.pa-bm-option:hover[b-se7f38if0b] {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}

.pa-cov-pop[b-se7f38if0b] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-se7f38if0b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-se7f38if0b] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-se7f38if0b] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* ── Consolidated detail widget / results-summary layout ──────────────────────
   Mirrors CompositeVerification's cv-* shell (fixed-height widget & summary
   panels, 4-track responsive grid). Class names are namespaced cr-* so they do
   not collide with the verification page styles. */
.cr-content[b-se7f38if0b] {
    --cr-panel-height: 400px;
    display: contents;
}

/* The summary drop zone becomes a visible dashed target while dragging,
   mirroring PA's pa-summary-dropzone / pa-can-drop pattern exactly. */
[b-se7f38if0b] .cr-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

[b-se7f38if0b] .cr-summary-dropzone.cr-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

.cr-summary-grid[b-se7f38if0b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    min-height: 60px;
}

.cr-summary-panel-wrapper[b-se7f38if0b] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.cr-summary-panel-wrapper.cr-width-full[b-se7f38if0b] {
    grid-column: span 4;
}

.cr-summary-panel-wrapper.cr-width-half[b-se7f38if0b] {
    grid-column: span 2;
}

.cr-summary-panel-wrapper.cr-width-quarter[b-se7f38if0b] {
    grid-column: span 1;
}

/* Flat summary panel (mirrors PerformanceAnalytics .pa-summary-panel): the panel IS
   the chrome — no nested header bar. ds-table-container sets overflow:hidden in app.css,
   which clips/scrolls the MudPaper itself; override to visible so ONLY the inner
   .cr-summary-panel-content scrolls. */
.cr-summary-panel-wrapper[b-se7f38if0b]  .cr-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

/* Plain title/controls row — no background gradient or divider, so the panel does not
   look like a nested boxed widget. */
.cr-summary-panel-header[b-se7f38if0b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.cr-summary-panel-content[b-se7f38if0b] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1280px) {
    .cr-summary-grid[b-se7f38if0b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-summary-panel-wrapper.cr-width-full[b-se7f38if0b] {
        grid-column: span 2;
    }

    .cr-summary-panel-wrapper.cr-width-half[b-se7f38if0b],
    .cr-summary-panel-wrapper.cr-width-quarter[b-se7f38if0b] {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .cr-summary-grid[b-se7f38if0b] {
        grid-template-columns: 1fr;
    }

    .cr-summary-panel-wrapper.cr-width-full[b-se7f38if0b],
    .cr-summary-panel-wrapper.cr-width-half[b-se7f38if0b],
    .cr-summary-panel-wrapper.cr-width-quarter[b-se7f38if0b] {
        grid-column: span 1;
    }
}

/* Widget grid: 4 equal tracks (S=1, M=2, L=4 columns). */
/* cr-content is the scoped HTML wrapper that anchors ::deep and carries --cr-panel-height
   so the variable is in scope for every child widget item. */

[b-se7f38if0b] .cr-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

/* .mud-drop-item is the real grid cell — default S (span 1 = quarter width).
   Height must NOT be set here — constraining MudBlazor's drop wrapper breaks drag.
   Height lives on .cr-widget-item (a child of .mud-drop-item) instead. */
[b-se7f38if0b] .cr-widget-grid > .mud-drop-item {
    grid-column: span 1;
    min-width: 0;
    cursor: grab;
}

[b-se7f38if0b] .cr-widget-grid > .mud-drop-item:active {
    cursor: grabbing;
}

[b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M) {
    grid-column: span 2;
}

[b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) {
    grid-column: span 4;
}

.cr-widget-item[b-se7f38if0b] {
    height: var(--cr-panel-height);
}

/* Size marker classes — used only as :has() targets by the grid cell rules above.
   No height is set here; height lives on .cr-widget-item (a child of .mud-drop-item),
   never on the .mud-drop-item wrapper itself. */

.cr-widget-card[b-se7f38if0b] {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.cr-widget-header[b-se7f38if0b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
    flex: 0 0 auto;
}

.cr-widget-header .d-flex[b-se7f38if0b] {
    cursor: default;
}

.cr-widget-body[b-se7f38if0b] {
    padding: 10px;
    /* Fills the height the header leaves; cr-widget-scroll clamps content. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}

/* Scroll box: explicit pixel height so Plotly (height:100%) and table content
   all resolve against a real value. 60px = header ~37px + body padding 10px*2 + 3px border. */
.cr-widget-scroll[b-se7f38if0b] {
    height: calc(var(--cr-panel-height) - 60px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Inner scroll wrapper shared by all four CR data tables — fills the available
   space inside .cr-widget-scroll / .cr-summary-panel-content and becomes the
   single scroll ancestor so position:sticky on <th> works correctly. */
.cr-table-scroll[b-se7f38if0b] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-width: 100%;
}

/* Sticky header row for the four plain HTML data tables (Cumulative, Multi-Horizon,
   Monthly ×2).  app.css already sets top:0 and z-index:2 on .ds-table th;
   we only need to add position:sticky and a solid background so rows do not
   bleed through when scrolling. */
.cr-widget-scroll .cr-table-scroll .ds-table thead th[b-se7f38if0b],
.cr-summary-panel-content .cr-table-scroll .ds-table thead th[b-se7f38if0b] {
    position: sticky !important;
    top: 0 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    z-index: 3 !important;
}

/* Keep Plotly chart legend text (e.g. Multi-Horizon) in its natural mixed case so it
   matches the Cumulative Return chart legend and is never uppercased by an ancestor. */
[b-se7f38if0b] .cr-widget-body .legendtext,
[b-se7f38if0b] .cr-summary-panel-content .legendtext {
    text-transform: none !important;
}

@media (max-width: 1280px) {
    [b-se7f38if0b] .cr-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item {
        grid-column: span 1;
    }
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    [b-se7f38if0b] .cr-widget-grid {
        grid-template-columns: 1fr;
    }
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item,
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-se7f38if0b] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) {
        grid-column: span 1;
    }
}
/* /Components/Pages/CompositeRiskStatistics.razor.rz.scp.css */
.compact-grid[b-4wcze2fr6u]  .mud-chip {
    margin: 0;
}

/* ── Saved View / Export toolbar icon colour override ──────────────────────
   The global app.css rule forces all .cgips-toolbar icon buttons white;
   these buttons sit on the same bar but should render dark (#1A1A2E)
   to match the CompositeReturns reference. */
.cgips-toolbar[b-4wcze2fr6u]  .crs-saved-views-btn .mud-icon-root,
.cgips-toolbar[b-4wcze2fr6u]  .crs-saved-views-btn svg,
.cgips-toolbar[b-4wcze2fr6u]  .crs-export-btn .mud-icon-root,
.cgips-toolbar[b-4wcze2fr6u]  .crs-export-btn svg {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
}

/* ── DateDropdownPanel: restore teal icon colour ── */
.cgips-toolbar[b-4wcze2fr6u]  .ds-date-panel .mud-icon-root,
.cgips-toolbar[b-4wcze2fr6u]  .ds-date-panel svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* ── Close (×) buttons inside the white pa-menu-panel popups — copied exactly
   from CompositeReturns.razor.css so the composite/benchmark SELECTED row's ×
   renders in primary teal instead of the global white toolbar icon colour. ── */
.cgips-toolbar[b-4wcze2fr6u]  .pa-menu-panel .cr-popup-close-btn .mud-icon-root,
.cgips-toolbar[b-4wcze2fr6u]  .pa-menu-panel .cr-popup-close-btn svg {
    color: var(--ds-primary, #08636b) !important;
    fill:  var(--ds-primary, #08636b) !important;
}
.cgips-toolbar[b-4wcze2fr6u]  .pa-menu-panel .cr-popup-close-btn:hover {
    background: rgba(8, 99, 107, 0.08) !important;
}

/* ── Composite / Benchmark dropdown panels (copied exactly from
   CompositeReturns.razor.css pa-menu-* rules) ── */
.pa-menu-backdrop[b-4wcze2fr6u] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.pa-menu-panel[b-4wcze2fr6u] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-4wcze2fr6u] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-4wcze2fr6u] {
    padding-top: 0;
}

.pa-menu-label[b-4wcze2fr6u] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-seg[b-4wcze2fr6u] {
    display: flex;
    gap: 4px;
}

.pa-seg-item[b-4wcze2fr6u] {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ds-border, #e0e0e0);
    font-size: 11px;
    line-height: 1.2;
    user-select: none;
    background: #fff;
    color: #444;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.pa-seg-item:hover[b-4wcze2fr6u] {
    border-color: var(--ds-primary, #08636b);
}

.pa-seg-item--active[b-4wcze2fr6u] {
    background: var(--ds-primary, #08636b);
    color: #fff;
    border-color: var(--ds-primary, #08636b);
}

.pa-bm-option:hover[b-4wcze2fr6u] {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}

.pa-cov-pop[b-4wcze2fr6u] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-4wcze2fr6u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-4wcze2fr6u] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-4wcze2fr6u] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* ── Widget grid + Results Summary — mirrors CompositeReturns.razor.css /
   CompositeMembership.razor.css, namespaced crs-* to match the CRS markup. ── */
.crs-content[b-4wcze2fr6u] {
    --crs-panel-height: 400px;
    display: contents;
}

[b-4wcze2fr6u] .crs-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

[b-4wcze2fr6u] .crs-summary-dropzone.crs-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

.crs-summary-grid[b-4wcze2fr6u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    min-height: 60px;
}

.crs-summary-panel-wrapper[b-4wcze2fr6u] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.crs-summary-panel-wrapper.crs-width-full[b-4wcze2fr6u]    { grid-column: span 4; }
.crs-summary-panel-wrapper.crs-width-half[b-4wcze2fr6u]     { grid-column: span 2; }
.crs-summary-panel-wrapper.crs-width-quarter[b-4wcze2fr6u]  { grid-column: span 1; }

.crs-summary-panel-wrapper[b-4wcze2fr6u]  .crs-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

.crs-summary-panel-header[b-4wcze2fr6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.crs-summary-panel-content[b-4wcze2fr6u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-4wcze2fr6u] .crs-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

[b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item {
    grid-column: span 1;
    min-width: 0;
    cursor: grab;
}

[b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:active { cursor: grabbing; }

[b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-M) { grid-column: span 2; }
[b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-L) { grid-column: span 4; }

.crs-widget-item[b-4wcze2fr6u] {
    height: var(--crs-panel-height);
}

.crs-widget-card[b-4wcze2fr6u] {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.crs-widget-header[b-4wcze2fr6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
    flex: 0 0 auto;
}

.crs-widget-header .d-flex[b-4wcze2fr6u] { cursor: default; }

.crs-widget-body[b-4wcze2fr6u] {
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}

.crs-widget-scroll[b-4wcze2fr6u] {
    height: calc(var(--crs-panel-height) - 60px);
    overflow: hidden;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Inner wrapper that holds each report's MudDataGrid; fills the flex scroll box. */
.crs-widget-scroll-body[b-4wcze2fr6u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Let MudDataGrid fill the flex scroll container so its header stays put and body scrolls. */
.crs-widget-scroll[b-4wcze2fr6u]  .mud-data-grid,
.crs-summary-panel-content[b-4wcze2fr6u]  .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

@media (max-width: 1280px) {
    .crs-summary-grid[b-4wcze2fr6u] { grid-template-columns: repeat(2, 1fr); }
    .crs-summary-panel-wrapper.crs-width-full[b-4wcze2fr6u] { grid-column: span 2; }
    .crs-summary-panel-wrapper.crs-width-half[b-4wcze2fr6u],
    .crs-summary-panel-wrapper.crs-width-quarter[b-4wcze2fr6u] { grid-column: span 1; }
    [b-4wcze2fr6u] .crs-widget-grid { grid-template-columns: repeat(2, 1fr); }
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item { grid-column: span 1; }
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-M),
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-L) { grid-column: span 2; }
}

@media (max-width: 760px) {
    .crs-summary-grid[b-4wcze2fr6u] { grid-template-columns: 1fr; }
    .crs-summary-panel-wrapper.crs-width-full[b-4wcze2fr6u],
    .crs-summary-panel-wrapper.crs-width-half[b-4wcze2fr6u],
    .crs-summary-panel-wrapper.crs-width-quarter[b-4wcze2fr6u] { grid-column: span 1; }
    [b-4wcze2fr6u] .crs-widget-grid { grid-template-columns: 1fr; }
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item,
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-M),
    [b-4wcze2fr6u] .crs-widget-grid > .mud-drop-item:has(.crs-widget-size-L) { grid-column: span 1; }
}
/* /Components/Pages/CompositeRules.razor.rz.scp.css */
/* Constrain MudSwitch click area to the switch and its label only */
.switch-inline[b-p70wf6cw5h] {
    width: fit-content;
}
/* /Components/Pages/CompositeVerification.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   CompositeVerification widget / Results Summary layout.
   Mirrors PerformanceAnalytics.razor.css (pa-*) one-to-one as cv-* so the
   draggable widget grid and summary panels look pixel-identical.
   ───────────────────────────────────────────────────────────────────────── */

.cv-widget-drop[b-wzl9slrds9] {
    display: block;
}

.cv-content[b-wzl9slrds9] {
    display: block;
}

.cv-content-flex[b-wzl9slrds9] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cv-content-main[b-wzl9slrds9] {
    flex: 1;
    min-width: 0;
    /* Single source of truth: summary panels and widget cards both use this
       height so they line up exactly. */
    --cv-panel-height: 400px;
}

/* Compact ~16px header icon controls. */
[b-wzl9slrds9] .cv-mini-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
}

[b-wzl9slrds9] .cv-mini-btn .mud-icon-root {
    font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Save view / Export toolbar icon color.
   app.css has a GLOBAL rule ".cgips-toolbar .mud-button-root .mud-icon-root
   { color:#fff }" that forces every toolbar icon white. We override it for just
   these two buttons so the Bookmarks / Download icons render dark (matching the
   dark foreground used elsewhere in the toolbar). !important is required to beat
   the global selector's specificity. */
.cgips-toolbar[b-wzl9slrds9]  .cv-saved-views-btn .mud-icon-root,
.cgips-toolbar[b-wzl9slrds9]  .cv-saved-views-btn svg,
.cgips-toolbar[b-wzl9slrds9]  .cv-export-btn .mud-icon-root,
.cgips-toolbar[b-wzl9slrds9]  .cv-export-btn svg {
    color: #0f172a !important;
    fill: #0f172a !important;
}

/* The Results Summary acts as a drop target: dragging a widget onto it pins a
   summary panel for that report. */
[b-wzl9slrds9] .cv-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

[b-wzl9slrds9] .cv-summary-dropzone.cv-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

/* Each summary view renders as its own card so multiple views stack. The wrapper is
   a hard 400px box. The MudPaper carries ds-table-container; we make it a flex column
   that CLIPS to the wrapper (overflow:hidden) so the card can never grow past 400px,
   and only the inner .cv-summary-panel-content scrolls. (There is no drag on the
   summary side, so clipping here is safe — unlike the widget card.) */
.cv-summary-panel-wrapper[b-wzl9slrds9]  .cv-summary-panel {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: hidden !important; /* Clip to the 400px wrapper; override ds-table-container */
}

.cv-summary-panel-content[b-wzl9slrds9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cv-summary-empty[b-wzl9slrds9] {
    border: 2px dashed var(--ds-border);
    background: transparent;
}

/* First-run "Ready to run" card. */
.cv-summary-empty-wrap[b-wzl9slrds9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 32px;
}

.cv-summary-empty-card[b-wzl9slrds9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 52px;
    max-width: 420px;
    text-align: center;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md, 8px);
    background: var(--ds-bg-subtle);
    box-shadow: var(--shadow-card);
}

.cv-summary-empty-icon[b-wzl9slrds9] {
    font-size: 52px !important;
    color: #14b8a6;
    opacity: 0.5;
}

.cv-summary-empty-title[b-wzl9slrds9] {
    color: #475569;
    margin-top: 8px;
    font-weight: 600;
}

.cv-summary-empty-text[b-wzl9slrds9] {
    color: #94a3b8;
    line-height: 1.5;
    margin-top: 4px;
}

.cv-summary-empty-text strong[b-wzl9slrds9] {
    color: #08636b;
}

/* Summary panels grid layout: Full (100%), Half (50%), Quarter (25%) widths. */
.cv-summary-grid[b-wzl9slrds9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cv-summary-panel-wrapper[b-wzl9slrds9] {
    min-width: 0;
    height: var(--cv-panel-height);
    display: flex;
    flex-direction: column;
}

.cv-summary-panel-wrapper.cv-panel-width-Full[b-wzl9slrds9] {
    grid-column: span 4;
}

.cv-summary-panel-wrapper.cv-panel-width-Half[b-wzl9slrds9] {
    grid-column: span 2;
}

.cv-summary-panel-wrapper.cv-panel-width-Quarter[b-wzl9slrds9] {
    grid-column: span 1;
}

@media (max-width: 1280px) {
    .cv-summary-grid[b-wzl9slrds9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-summary-panel-wrapper.cv-panel-width-Full[b-wzl9slrds9] {
        grid-column: span 2;
    }

    .cv-summary-panel-wrapper.cv-panel-width-Half[b-wzl9slrds9] {
        grid-column: span 1;
    }

    .cv-summary-panel-wrapper.cv-panel-width-Quarter[b-wzl9slrds9] {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .cv-summary-grid[b-wzl9slrds9] {
        grid-template-columns: 1fr;
    }

    .cv-summary-panel-wrapper.cv-panel-width-Full[b-wzl9slrds9],
    .cv-summary-panel-wrapper.cv-panel-width-Half[b-wzl9slrds9],
    .cv-summary-panel-wrapper.cv-panel-width-Quarter[b-wzl9slrds9] {
        grid-column: span 1;
    }
}

/* Widget grid: 4 equal tracks so S=1 (4/row), M=2 (2/row), L=4 (1/row). */
[b-wzl9slrds9] .cv-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

/* MudDropZone wraps each rendered widget in a .mud-drop-item — that wrapper is the
   grid cell. Default span is M (2 of 4). */
[b-wzl9slrds9] .cv-widget-grid > .mud-drop-item {
    grid-column: span 2;
    min-width: 0;
    cursor: grab;
}

[b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:active {
    cursor: grabbing;
}

[b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-S) {
    grid-column: span 1;
}

[b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-M) {
    grid-column: span 2;
}

[b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-L) {
    grid-column: span 4;
}

/* Widget height == summary panel height. The summary wrapper is a fixed 400px box;
   we match it by giving the widget item the SAME fixed height. The height lives on
   .cv-widget-item (a child of .mud-drop-item), NOT on .mud-drop-item itself, so we
   never constrain MudBlazor's drop wrapper (doing that breaks drag). */
.cv-widget-item[b-wzl9slrds9] {
    height: var(--cv-panel-height);
}

/* Mirror the summary panel: a flex column that CLIPS to the 400px item so the card
   can never grow past it; the header is fixed and the body/scroll fills the rest.
   The 400px lives on .cv-widget-item (a child of .mud-drop-item), never on the
   .mud-drop-item wrapper itself, so MudBlazor drag is preserved. */
.cv-widget-card[b-wzl9slrds9] {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.cv-widget-header[b-wzl9slrds9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
    flex: 0 0 auto;
}

.cv-widget-header .d-flex[b-wzl9slrds9] {
    cursor: default;
}

.cv-widget-body[b-wzl9slrds9] {
    padding: 10px;
    /* Fills the height the header leaves; the inner .cv-widget-scroll clamps content. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}

/* The actual scroll box around the report grid. flex-column + overflow:hidden makes
   this the flex boundary; MudDataGrid (Height="100%") fills it and owns scrolling
   internally via FixedHeader so the header row freezes correctly. */
.cv-widget-scroll[b-wzl9slrds9] {
    height: calc(var(--cv-panel-height) - 52px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Inline "Click Run Report to load data" hint shown inside a widget/panel body
   before the first run. */
.cv-grid-hint[b-wzl9slrds9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 12px;
    text-align: center;
    opacity: 0.8;
}

.cv-grid-hint-icon[b-wzl9slrds9] {
    font-size: 34px !important;
    color: #14b8a6;
    opacity: 0.6;
}

.cv-grid-hint strong[b-wzl9slrds9] {
    color: #08636b;
}

/* Size classes ONLY drive the grid-column span via the :has() selectors above.
   They must not set height — the fixed height lives on .cv-widget-item so every
   widget (S/M/L) is the same height as the summary panels. */

@media (max-width: 1280px) {
    [b-wzl9slrds9] .cv-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-S) {
        grid-column: span 1;
    }
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-M) {
        grid-column: span 2;
    }
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-L) {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    [b-wzl9slrds9] .cv-widget-grid {
        grid-template-columns: 1fr;
    }
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item,
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-S),
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-M),
    [b-wzl9slrds9] .cv-widget-grid > .mud-drop-item:has(.cv-size-L) {
        grid-column: span 1;
    }
}

/* ─── Hover hint bubble: pure-CSS tooltip ───
   Bypasses MudBlazor's popover so placement is deterministic. Anchored BELOW the
   trigger and toward the LEFT so it never clips off the right edge of the card. */
.cv-hint[b-wzl9slrds9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.cv-hint--btn[b-wzl9slrds9] {
    cursor: default;
}

.cv-hint-bubble[b-wzl9slrds9] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 1300;
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--mud-palette-gray-darker, #424242);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    pointer-events: none;
}

.cv-hint-bubble[b-wzl9slrds9]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 6px;
    border: 5px solid transparent;
    border-bottom-color: var(--mud-palette-gray-darker, #424242);
}

.cv-hint:hover .cv-hint-bubble[b-wzl9slrds9],
.cv-hint:focus-within .cv-hint-bubble[b-wzl9slrds9] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
}

/* Frozen header row — let MudDataGrid fill the flex scroll container so
   FixedHeader="true" + Height="100%" manage sticky headers internally. */
.cv-widget-scroll[b-wzl9slrds9]  .mud-data-grid,
.cv-summary-panel-content[b-wzl9slrds9]  .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* ── Composite dropdown popup (mirrors CompositeReturns pa-menu-* rules) ─── */
.pa-menu-backdrop[b-wzl9slrds9] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.pa-menu-panel[b-wzl9slrds9] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-wzl9slrds9] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-wzl9slrds9] {
    padding-top: 0;
}

.pa-menu-label[b-wzl9slrds9] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Data-History coverage popup ─── */
.pa-cov-pop[b-wzl9slrds9] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-wzl9slrds9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-wzl9slrds9] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-wzl9slrds9] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* ── Close (×) buttons inside the white pa-menu-panel popup ── */
.cgips-toolbar[b-wzl9slrds9]  .pa-menu-panel .cr-popup-close-btn .mud-icon-root,
.cgips-toolbar[b-wzl9slrds9]  .pa-menu-panel .cr-popup-close-btn svg {
    color: var(--ds-primary, #08636b) !important;
    fill:  var(--ds-primary, #08636b) !important;
}
.cgips-toolbar[b-wzl9slrds9]  .pa-menu-panel .cr-popup-close-btn:hover {
    background: rgba(8, 99, 107, 0.08) !important;
}

/* ── DateDropdownPanel: restore teal + icon colour overridden by global
   app.css ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }" ── */
.cgips-toolbar[b-wzl9slrds9]  .ds-date-panel .mud-icon-root,
.cgips-toolbar[b-wzl9slrds9]  .ds-date-panel svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}
/* /Components/Pages/ContributionSettingsDrawer.razor.rz.scp.css */
/* ── Overlay ─────────────────────────────────────────────────────── */
.settings-overlay[b-cy23j36w7n] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.settings-overlay.open[b-cy23j36w7n] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Drawer panel ────────────────────────────────────────────────── */
.settings-drawer[b-cy23j36w7n] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    width: 420px;
    max-width: 92vw;
    background: var(--ds-settings-drawer-bg);
    border-left: 1px solid var(--ds-settings-drawer-border);
    box-shadow: var(--ds-settings-drawer-shadow);
    color: var(--ds-settings-drawer-text);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-drawer.open[b-cy23j36w7n] {
    transform: translateX(0);
}

/* ── Header (fixed top) ─────────────────────────────────────────── */
.drawer-header[b-cy23j36w7n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Body (scrollable middle) ────────────────────────────────────── */
.drawer-body[b-cy23j36w7n] {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 20px;
}

/* ── Footer (fixed bottom) ───────────────────────────────────────── */
.drawer-footer[b-cy23j36w7n] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Section overline color ──────────────────────────────────────── */
.settings-drawer .mud-typography-overline[b-cy23j36w7n] {
    color: var(--ds-settings-drawer-section-clr) !important;
}

/* ── Scrollbar tint ──────────────────────────────────────────────── */
.drawer-body[b-cy23j36w7n]::-webkit-scrollbar-thumb {
    background: var(--ds-border);
}

.drawer-body[b-cy23j36w7n]::-webkit-scrollbar-thumb:hover {
    background: #b0bec5;
}
/* /Components/Pages/Holdings.razor.rz.scp.css */
/* ── Fix: sticky header background override ───────────────────────
   MudBlazor's FixedHeader sets background-color via the mud-table-sticky-header
   class which can override the global ds-table-container rule. Force the shaded
   header background so Holdings Detail matches the other grids on this page.  */
[b-e7wp1z1kl8] .mud-table-sticky-header .mud-table-head th,
[b-e7wp1z1kl8] .mud-table-sticky-header .mud-table-head .mud-table-cell {
    background-color: var(--ds-bg-subtle, #f8fafc) !important;
}

/* ── Context bar ─────────────────────────────────────────────────── */
.context-bar[b-e7wp1z1kl8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Ghost Date Button ──────────────────────────────────────────── */
.ghost-date-wrapper[b-e7wp1z1kl8] {
    flex: none;
    max-width: 190px;
    border-radius: 8px;
    padding: 2px 6px;
    transition: background 0.15s ease;
}

.ghost-date-wrapper:hover[b-e7wp1z1kl8] {
    background: rgba(0, 0, 0, 0.04);
}

/* Remove MudDatePicker underline for ghost look */
[b-e7wp1z1kl8] .ghost-date-wrapper .mud-input-underline::before,
[b-e7wp1z1kl8] .ghost-date-wrapper .mud-input-underline::after {
    border: none !important;
}

[b-e7wp1z1kl8] .ghost-date-wrapper .mud-input {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

[b-e7wp1z1kl8] .ghost-date-wrapper .mud-input-label {
    display: none;
}

/* ── Segmented Control (allocation toggle) ──────────────────────── */
.segment-control[b-e7wp1z1kl8] {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    flex-shrink: 1;
}

.segment-item[b-e7wp1z1kl8] {
    border: none;
    background: transparent;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.segment-item:hover[b-e7wp1z1kl8] {
    color: var(--mud-palette-text-primary);
}

.segment-item.active[b-e7wp1z1kl8] {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Saved View / Export toolbar icons – force dark, matching CompositeReturns exactly ─── */
/* The global app.css ".cgips-toolbar .mud-button-root .mud-icon-root { color:#fff }" whitens
   all icons in the teal bar; these overrides pin the Bookmarks/Download icons dark. */
.cgips-toolbar[b-wqfmgbl1sf]  .cr-saved-views-btn .mud-icon-root,
.cgips-toolbar[b-wqfmgbl1sf]  .cr-saved-views-btn svg,
.cgips-toolbar[b-wqfmgbl1sf]  .cr-export-btn .mud-icon-root,
.cgips-toolbar[b-wqfmgbl1sf]  .cr-export-btn svg {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
}

/* ── Date dropdown panel: restore teal + icon colour overridden by global rule ─── */
.cgips-toolbar[b-wqfmgbl1sf]  .ds-date-panel .mud-icon-root,
.cgips-toolbar[b-wqfmgbl1sf]  .ds-date-panel svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* ── Benchmark dropdown popup ──────────────────────────────────────── */
.home-bm-backdrop[b-wqfmgbl1sf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
}

.home-bm-popup[b-wqfmgbl1sf] {
    z-index: 1000;
}

/* Popup panel shared with PA — replicated here so it is scoped to Home */
.pa-menu-panel[b-wqfmgbl1sf] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: homeBmSlideIn-b-wqfmgbl1sf 0.12s ease-out;
}

@keyframes homeBmSlideIn-b-wqfmgbl1sf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pa-menu-section[b-wqfmgbl1sf] {
    padding: 10px 14px 8px 14px;
}

.pa-menu-section + .pa-menu-section[b-wqfmgbl1sf] {
    padding-top: 0;
}

.pa-menu-label[b-wqfmgbl1sf] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Segmented return-type control */
.pa-seg[b-wqfmgbl1sf] {
    display: flex;
    gap: 4px;
}

.pa-seg-item[b-wqfmgbl1sf] {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ds-border, #e0e0e0);
    font-size: 11px;
    line-height: 1.2;
    user-select: none;
    background: #fff;
    color: #444;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.pa-seg-item:hover[b-wqfmgbl1sf] {
    border-color: var(--ds-primary, #08636b);
}

.pa-seg-item--active[b-wqfmgbl1sf] {
    background: var(--ds-primary, #08636b);
    color: #fff;
    border-color: var(--ds-primary, #08636b);
}

/* Benchmark list rows hover */
.pa-bm-option:hover[b-wqfmgbl1sf] {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}

/* Data-history coverage popup */
.pa-cov-pop[b-wqfmgbl1sf] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-wqfmgbl1sf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-wqfmgbl1sf] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-wqfmgbl1sf] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* Benchmark dropdown panel icon colour (inside teal toolbar) */
.cgips-toolbar[b-wqfmgbl1sf]  .home-bm-popup .mud-icon-root,
.cgips-toolbar[b-wqfmgbl1sf]  .home-bm-popup svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* ── Results Summary drop-zone (mirrors CompositeReturns cr-summary-dropzone) ─── */
.cr-content[b-wqfmgbl1sf] {
    display: contents;
}

.cr-summary-dropzone[b-wqfmgbl1sf] {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
    margin-bottom: 16px;
}

/* Visible dashed target while dragging */
[b-wqfmgbl1sf] .cr-summary-dropzone.cr-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

/* ── Summary grid (4-track responsive) ──────────────────────────── */
.cr-summary-grid[b-wqfmgbl1sf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    min-height: 60px;
}

.cr-summary-panel-wrapper[b-wqfmgbl1sf] {
    min-width: 0;
    height: 480px;
    display: flex;
    flex-direction: column;
}

/* KPI summary panel auto-fits to content — no large empty whitespace */
.cr-summary-panel-wrapper.cr-panel-kpi[b-wqfmgbl1sf] {
    height: auto;
    min-height: 80px;
}

.cr-summary-panel-wrapper.cr-panel-kpi[b-wqfmgbl1sf]  .cr-summary-panel {
    height: auto;
    overflow: visible !important;
}

.cr-summary-panel-wrapper.cr-panel-kpi .cr-summary-panel-content[b-wqfmgbl1sf] {
    flex: 0 0 auto;
    overflow: visible;
}

.cr-summary-panel-wrapper.cr-width-full[b-wqfmgbl1sf]    { grid-column: span 4; }
.cr-summary-panel-wrapper.cr-width-half[b-wqfmgbl1sf]    { grid-column: span 2; }
.cr-summary-panel-wrapper.cr-width-quarter[b-wqfmgbl1sf] { grid-column: span 1; }

.cr-summary-panel-wrapper[b-wqfmgbl1sf]  .cr-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

.cr-summary-panel-header[b-wqfmgbl1sf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.cr-summary-panel-content[b-wqfmgbl1sf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Widget grid (4-track, mirrors CompositeReturns) ──────────────── */
.cr-content[b-wqfmgbl1sf] {
    display: contents;
}

[b-wqfmgbl1sf] .cr-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

[b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item {
    grid-column: span 1;
    min-width: 0;
    cursor: grab;
}

[b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:active { cursor: grabbing; }

[b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M) { grid-column: span 2; }
[b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 4; }

.cr-widget-item[b-wqfmgbl1sf] {
    height: 400px;
}

.cr-widget-card[b-wqfmgbl1sf] {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.cr-widget-header[b-wqfmgbl1sf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
    flex: 0 0 auto;
}

.cr-widget-body[b-wqfmgbl1sf] {
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}

.cr-widget-scroll[b-wqfmgbl1sf] {
    height: calc(400px - 60px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.cr-table-scroll[b-wqfmgbl1sf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-width: 100%;
}

/* Sticky header for cr-table-scroll tables */
.cr-widget-scroll .cr-table-scroll .ds-table thead th[b-wqfmgbl1sf],
.cr-summary-panel-content .cr-table-scroll .ds-table thead th[b-wqfmgbl1sf] {
    position: sticky !important;
    top: 0 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    z-index: 3 !important;
}

/* Responsive breakpoints */
@media (max-width: 1280px) {
    .cr-summary-grid[b-wqfmgbl1sf] { grid-template-columns: repeat(2, 1fr); }
    .cr-summary-panel-wrapper.cr-width-full[b-wqfmgbl1sf]    { grid-column: span 2; }
    .cr-summary-panel-wrapper.cr-width-half[b-wqfmgbl1sf],
    .cr-summary-panel-wrapper.cr-width-quarter[b-wqfmgbl1sf] { grid-column: span 1; }

    [b-wqfmgbl1sf] .cr-widget-grid { grid-template-columns: repeat(2, 1fr); }
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item { grid-column: span 1; }
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 2; }
}

@media (max-width: 760px) {
    .cr-summary-grid[b-wqfmgbl1sf] { grid-template-columns: 1fr; }
    .cr-summary-panel-wrapper.cr-width-full[b-wqfmgbl1sf],
    .cr-summary-panel-wrapper.cr-width-half[b-wqfmgbl1sf],
    .cr-summary-panel-wrapper.cr-width-quarter[b-wqfmgbl1sf] { grid-column: span 1; }

    [b-wqfmgbl1sf] .cr-widget-grid { grid-template-columns: 1fr; }
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item,
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-M),
    [b-wqfmgbl1sf] .cr-widget-grid > .mud-drop-item:has(.cr-widget-size-L) { grid-column: span 1; }

    .home-kpi-row[b-wqfmgbl1sf] { flex-wrap: wrap; }
    .home-kpi-cell[b-wqfmgbl1sf] { min-width: 140px; flex: 1 1 140px; }
}

/* ── KPI one-row horizontal layout ──────────────────────────────── */
.home-kpi-row[b-wqfmgbl1sf] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.home-kpi-cell[b-wqfmgbl1sf] {
    flex: 1 1 0;
    min-width: 120px;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────
   Variables live here (NOT :root) — Blazor scoped CSS turns
   :root into :root[b-xxxx] which is an invalid selector.
   Keeping them on .ef-login-page makes all children inherit them.
   Critical layout backgrounds use hardcoded hex to prevent any
   MudBlazor theme override from bleeding through.
───────────────────────────────────────────────────────────────── */
.ef-login-page[b-m6txmxynvp] {
    --teal:        #08636b;
    --teal-light:  #0a7a85;
    --teal-pale:   #e0f0f1;
    --text-main:   #0f172a;
    --text-muted:  #64748b;
    --border:      #d8e0e7;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 9999;
}

/* ══════════════════════════════════════════════════════════════
   LEFT PANEL — hardcoded background so MudBlazor palette can't override
══════════════════════════════════════════════════════════════ */
.left-panel[b-m6txmxynvp] {
    flex: 0 0 52%;
    background: linear-gradient(160deg, #0a1628 0%, #040a12 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Decorative glow blobs */
.left-panel[b-m6txmxynvp]::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8,99,107,0.22) 0%, transparent 70%);
    pointer-events: none;
}

.left-panel[b-m6txmxynvp]::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8,99,107,0.14) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Left nav ──────────────────────────────────────────────── */
.left-nav[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    position: relative;
    z-index: 1;
}

.left-nav-brand[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.left-nav-brand img[b-m6txmxynvp] {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.left-nav-brand-text[b-m6txmxynvp] {
    display: flex;
    flex-direction: column;
}

.left-nav-brand-name[b-m6txmxynvp] {
    font-size: 31px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1.5px;
    line-height: 1.1;
    text-transform: uppercase;
}

.left-nav-brand-sub[b-m6txmxynvp] {
    font-size: 12px;
    font-weight: 600;
    color: #FF8000;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    margin-top: 2px;
}

.left-nav-links[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    gap: 28px;
}

.left-nav-link[b-m6txmxynvp] {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s;
}

.left-nav-link:hover[b-m6txmxynvp] {
    color: #ffffff;
}

.left-nav-cta[b-m6txmxynvp] {
    background: rgba(8,99,107,0.3);
    border: 1.5px solid rgba(10,122,133,0.8);
    color: #5ecfdb;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    transition: background 0.2s, border-color 0.2s;
}

.left-nav-cta:hover[b-m6txmxynvp] {
    background: rgba(8,99,107,0.5);
    border-color: #5ecfdb;
}

.left-nav-divider[b-m6txmxynvp] {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 0 40px;
    position: relative;
    z-index: 1;
}

/* ── Left content ──────────────────────────────────────────── */
.left-content[b-m6txmxynvp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    position: relative;
    z-index: 1;
}

/* eyebrow: orange dash + uppercase label */
.left-eyebrow[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #FF8000;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 22px 0;
}

.left-eyebrow[b-m6txmxynvp]::before {
    content: none;
}

.left-headline[b-m6txmxynvp] {
    font-size: clamp(26px, 2.8vw, 42px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 18px 0;
    border: none;
    outline: none;
}

.left-headline span[b-m6txmxynvp] {
    color: #FF8000;
}

.left-subheadline[b-m6txmxynvp] {
    font-size: 19px;
    color: #FF8000;
    line-height: 1.65;
    margin: 0 0 24px 0;
    max-width: 580px;
    white-space: nowrap;
}

.left-body-para[b-m6txmxynvp] {
    font-size: 18px;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    padding-left: 18px;
    border-left: 3px solid #FF8000;
    margin: 0 0 36px 0;
    max-width: 580px;
}

.left-body-para strong[b-m6txmxynvp] {
    color: #FF8000;
    font-weight: 700;
}

/* ── GIPS Disclosure ───────────────────────────────────────── */
.left-gips-disclosure[b-m6txmxynvp] {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    line-height: 1.55;
    margin: 0 0 14px 0;
    max-width: 580px;
}

/* ── Feature pills ─────────────────────────────────────────── */
.left-pills[b-m6txmxynvp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
}

.left-pill[b-m6txmxynvp] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}

.left-pill[b-m6txmxynvp]::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a7a85;
    flex-shrink: 0;
}

/* ── Left footer ───────────────────────────────────────────── */
.left-footer[b-m6txmxynvp] {
    padding: 20px 40px;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL — hardcoded #f8fafc so MudBlazor palette can't override
══════════════════════════════════════════════════════════════ */
.right-panel[b-m6txmxynvp] {
    flex: 1;
    background: #f8fafc;
    border-left: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 64px 96px;
    overflow-y: auto;
    position: relative;
}

/* Horse watermark — subtle teal decorative element, centered behind login box */
.right-panel[b-m6txmxynvp]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    background-image: url('/images/EFS_Logo_Strokes_Only.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
}

/* ── Login box ─────────────────────────────────────────────── */
.login-box[b-m6txmxynvp] {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

.login-box-header[b-m6txmxynvp] {
    margin-bottom: 36px;
}

.login-eyebrow[b-m6txmxynvp] {
    font-size: 11px;
    font-weight: 700;
    color: #08636b;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 10px 0;
}

.login-title[b-m6txmxynvp] {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.4px;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.login-title span[b-m6txmxynvp] {
    color: #08636b;
}

.login-subtitle[b-m6txmxynvp] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ── Form groups ───────────────────────────────────────────── */
.ef-form-group[b-m6txmxynvp] {
    margin-bottom: 20px;
    position: relative;
}

.ef-form-label[b-m6txmxynvp] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.ef-form-input[b-m6txmxynvp] {
    width: 100%;
    padding: 13px 16px 13px 42px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    border: 1px solid #d8e0e7;
    border-radius: 6px;
    background: #ffffff;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.ef-form-input[b-m6txmxynvp]::placeholder {
    color: #a0aec0;
}

.ef-form-input:focus[b-m6txmxynvp] {
    border-color: #08636b;
    box-shadow: 0 0 0 3px rgba(8,99,107,0.12);
    background: #ffffff;
}

.ef-input-icon[b-m6txmxynvp] {
    position: absolute;
    left: 14px;
    top: 38px;
    color: #94a3b8;
    pointer-events: none;
}

/* ── Utils row ─────────────────────────────────────────────── */
.ef-form-utils[b-m6txmxynvp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    margin-top: 4px;
}

.ef-checkbox-label[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #0f172a;
    font-weight: 500;
    cursor: pointer;
    gap: 8px;
    user-select: none;
}

.ef-checkbox-label input[type="checkbox"][b-m6txmxynvp] {
    accent-color: #08636b;
    cursor: pointer;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ef-forgot-link[b-m6txmxynvp] {
    font-size: 13px;
    color: #08636b;
    text-decoration: none;
    font-weight: 600;
}

.ef-forgot-link:hover[b-m6txmxynvp] {
    text-decoration: underline;
}

/* ── Error message ─────────────────────────────────────────── */
.ef-error-msg[b-m6txmxynvp] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ── Primary button ────────────────────────────────────────── */
.ef-btn-primary[b-m6txmxynvp] {
    width: 100%;
    background: #08636b;
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ef-btn-primary:hover:not(:disabled)[b-m6txmxynvp] {
    background: #05484e;
}

.ef-btn-primary:disabled[b-m6txmxynvp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Divider ───────────────────────────────────────────────── */
.ef-divider[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.ef-divider[b-m6txmxynvp]::before,
.ef-divider[b-m6txmxynvp]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #d8e0e7;
}

.ef-divider[b-m6txmxynvp]::before { margin-right: 14px; }
.ef-divider[b-m6txmxynvp]::after  { margin-left:  14px; }

/* ── Secondary button ──────────────────────────────────────── */
.ef-btn-secondary[b-m6txmxynvp] {
    width: 100%;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #d8e0e7;
    padding: 14px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.ef-btn-secondary:hover[b-m6txmxynvp] {
    background: #f4f6f8;
    border-color: #c4cdd5;
}

/* ── Trust footer ──────────────────────────────────────────── */
.login-trust-footer[b-m6txmxynvp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — stack at 900px
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ef-login-page[b-m6txmxynvp] {
        flex-direction: column;
        overflow-y: auto;
        position: fixed;
        inset: 0;
    }

    .left-panel[b-m6txmxynvp] {
        flex: none;
        min-height: 260px;
    }

    .left-nav-links[b-m6txmxynvp] {
        display: none;
    }

    .left-content[b-m6txmxynvp] {
        padding: 28px 28px;
    }

    .right-panel[b-m6txmxynvp] {
        flex: none;
        padding: 40px 28px;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .right-panel[b-m6txmxynvp]::before {
        display: none;
    }
}
/* /Components/Pages/PerformanceAnalytics.razor.rz.scp.css */
.context-bar[b-xc5jkf5eph] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pa-title-strip[b-xc5jkf5eph] {
    padding: 10px 12px;
    border-left: 3px solid #FF8000;
    border-bottom: 1px solid var(--ds-border);
    margin: 8px 0 0 0;
    background: #fff;
}

.pa-title-text[b-xc5jkf5eph] {
    color: #05484e;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}

.pa-toolbar[b-xc5jkf5eph] {
    border-bottom: 1px solid rgba(0,0,0,0.18);
    background: linear-gradient(135deg,#05484e 0%,#08636b 60%,#0a7880 100%);
    padding: 8px 14px;
    margin-bottom: 16px;
}

.pa-toolbar-row[b-xc5jkf5eph] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-menu-backdrop[b-xc5jkf5eph] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

/* ───────────────────────────────────────────────────────────────────────
   Toolbar dropdown panels (Accounts / Benchmarks / Columns).
   Styled to match the Date selector (.ds-date-panel) for a consistent,
   modern look across the toolbar: white card, rounded, soft shadow.
   ─────────────────────────────────────────────────────────────────────── */
.pa-menu-panel[b-xc5jkf5eph] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-xc5jkf5eph] {
    padding: 10px 14px 8px 14px;
}
.pa-menu-section + .pa-menu-section[b-xc5jkf5eph] {
    padding-top: 0;
}

.pa-menu-label[b-xc5jkf5eph] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Segmented control (return type pills) */
.pa-seg[b-xc5jkf5eph] {
    display: flex;
    gap: 4px;
}
.pa-seg-item[b-xc5jkf5eph] {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ds-border, #e0e0e0);
    font-size: 11px;
    line-height: 1.2;
    user-select: none;
    background: #fff;
    color: #444;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.pa-seg-item:hover[b-xc5jkf5eph] {
    border-color: var(--ds-primary, #08636b);
}
.pa-seg-item--active[b-xc5jkf5eph] {
    background: var(--ds-primary, #08636b);
    color: #fff;
    border-color: var(--ds-primary, #08636b);
}

/* Coverage (data-history) hover link + popover */
.pa-cov-wrap[b-xc5jkf5eph] {
    position: relative;
    display: inline-flex;
}
.pa-cov-link[b-xc5jkf5eph] {
    color: var(--ds-primary, #08636b);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.pa-cov-link:hover[b-xc5jkf5eph] {
    text-decoration: underline;
}
.pa-cov-pop[b-xc5jkf5eph] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}
.pa-cov-table[b-xc5jkf5eph] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.pa-cov-table th[b-xc5jkf5eph] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}
.pa-cov-table td[b-xc5jkf5eph] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* Available-benchmark rows in the benchmark selector popup (double-click to add). */
.pa-bm-option:hover[b-xc5jkf5eph] {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}


.pa-widget-drop[b-xc5jkf5eph] {
    display: block;
}

.pa-content[b-xc5jkf5eph] {
    display: block;
}

/* Two-column layout when the calculation-detail panel is open: widgets on the left,
   sticky detail panel on the right (mirrors the Contribution/Attribution pages). */
.pa-content-flex[b-xc5jkf5eph] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pa-content-main[b-xc5jkf5eph] {
    flex: 1;
    min-width: 0;
}

.pa-detail-panel[b-xc5jkf5eph] {
    border: 1px solid var(--ds-border);
}

/* Clickable data-view cells open the Calculation Detail panel. */
[b-xc5jkf5eph] .pa-cell-clickable {
    cursor: pointer;
}

[b-xc5jkf5eph] .pa-cell-clickable:hover {
    background-color: rgba(8, 99, 107, 0.10);
}

/* The cell whose Calculation Detail is currently shown is highlighted (warning
   background + white text), mirroring the Contribution/Attribution "cell-selected"
   pattern, instead of an underline. !important guarantees the highlight wins over
   the table's hover/zebra backgrounds and any per-cell numeric styling. */
[b-xc5jkf5eph] .pa-cell-selected,
[b-xc5jkf5eph] .pa-cell-selected:hover,
[b-xc5jkf5eph] td.pa-cell-selected,
[b-xc5jkf5eph] td.pa-cell-selected:hover {
    background: var(--mud-palette-warning, #ff9800) !important;
    background-color: var(--mud-palette-warning, #ff9800) !important;
    color: white !important;
    font-weight: 700 !important;
}

/* Compact ~16px header icon controls (size, options, detail). */
[b-xc5jkf5eph] .pa-mini-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
}

[b-xc5jkf5eph] .pa-mini-btn .mud-icon-root {
    font-size: 16px;
}

/* The Results Summary acts as a drop target: dragging a widget onto it switches
   which metric the summary displays. */
[b-xc5jkf5eph] .pa-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

[b-xc5jkf5eph] .pa-summary-dropzone.pa-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

/* Each summary view renders as its own card so multiple data/chart views stack.
   IMPORTANT: Blazor scoped CSS only stamps the scope attribute (b-xxxxx) onto plain
   HTML elements authored in this component's .razor file - it does NOT stamp child
   components such as MudPaper. A bare ".pa-summary-panel" selector therefore compiles
   to ".pa-summary-panel[b-xxxxx]" and never matches the rendered MudPaper root, which
   is exactly why every previous fixed-height attempt had no visible effect. We instead
   size the plain wrapper div (which IS scoped) and use ::deep to flow the height into
   the MudPaper root so all panels are uniformly 400px tall.

   CRITICAL: The MudPaper has class="ds-table-container" which sets overflow:hidden in
   app.css line 2464. This creates a clipping context that causes the MudPaper itself
   to scroll when we use flex layout. We must override this to overflow:visible so that
   ONLY the inner .pa-summary-panel-content div scrolls. */
.pa-summary-panel-wrapper[b-xc5jkf5eph]  .pa-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important; /* Override ds-table-container's overflow:hidden */
}

.pa-summary-panel-content[b-xc5jkf5eph] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Inner scroll wrapper for data tables in summary panels — fills the available
   space inside .pa-summary-panel-content and becomes the single scroll ancestor
   so position:sticky on <thead th> works correctly. */
.pa-table-scroll[b-xc5jkf5eph] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-width: 100%;
}

/* Sticky header row for the HTML data tables rendered inside summary panels.
   app.css already sets top:0 and z-index:2 on .ds-table th; we only need
   position:sticky and a solid background so body rows scroll underneath. */
.pa-summary-panel-content .pa-table-scroll .ds-table thead th[b-xc5jkf5eph] {
    position: sticky !important;
    top: 0 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    z-index: 3 !important;
}

/* Chart view should fill the panel exactly (no scrolling), unlike data view which
   scrolls. The Plotly chart is sized to 100% height in MetricChart, so we make this
   content area a non-scrolling flex column and let the chart (and its scoped wrapper)
   stretch to fill the available height. This removes the empty band that appeared
   below charts when they used a fixed min-height shorter than the 400px panel. */
.pa-content-chart[b-xc5jkf5eph] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pa-content-chart[b-xc5jkf5eph]  > .mud-chart,
.pa-content-chart[b-xc5jkf5eph]  > div {
    flex: 1 1 auto;
    min-height: 0;
}

.pa-summary-empty[b-xc5jkf5eph] {
    border: 2px dashed var(--ds-border);
    background: transparent;
}

/* First-run "Ready to run" card — mirrors the Report Catalog onboarding pattern. */
.pa-summary-empty-wrap[b-xc5jkf5eph] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 32px;
}

.pa-summary-empty-card[b-xc5jkf5eph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 52px;
    max-width: 420px;
    text-align: center;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md, 8px);
    background: var(--ds-bg-subtle);
    box-shadow: var(--shadow-card);
}

.pa-summary-empty-icon[b-xc5jkf5eph] {
    font-size: 52px !important;
    color: #14b8a6;
    opacity: 0.5;
}

.pa-summary-empty-title[b-xc5jkf5eph] {
    color: #475569;
    margin-top: 8px;
    font-weight: 600;
}

.pa-summary-empty-text[b-xc5jkf5eph] {
    color: #94a3b8;
    line-height: 1.5;
    margin-top: 4px;
}

.pa-summary-empty-text strong[b-xc5jkf5eph] {
    color: #08636b;
}

/* Loading skeleton shown while a report runs (replaces the spinner). */
.pa-skeleton[b-xc5jkf5eph] {
    padding: 4px 0 8px;
}

.pa-skeleton-grid[b-xc5jkf5eph] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.pa-skeleton-panel[b-xc5jkf5eph] {
    height: 320px;
    overflow: hidden;
}

@media (max-width: 960px) {
    .pa-skeleton-grid[b-xc5jkf5eph] {
        grid-template-columns: 1fr;
    }
}

/* Summary panels grid layout: supports Full (100%), Half (50%), Quarter (25%) widths */
.pa-summary-grid[b-xc5jkf5eph] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pa-summary-panel-wrapper[b-xc5jkf5eph] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.pa-summary-panel-wrapper.pa-panel-width-Full[b-xc5jkf5eph] {
    grid-column: span 4;
}

.pa-summary-panel-wrapper.pa-panel-width-Half[b-xc5jkf5eph] {
    grid-column: span 2;
}

.pa-summary-panel-wrapper.pa-panel-width-Quarter[b-xc5jkf5eph] {
    grid-column: span 1;
}

/* Responsive adjustments for summary panels */
@media (max-width: 1280px) {
    .pa-summary-grid[b-xc5jkf5eph] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pa-summary-panel-wrapper.pa-panel-width-Full[b-xc5jkf5eph] {
        grid-column: span 2;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Half[b-xc5jkf5eph] {
        grid-column: span 1;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-xc5jkf5eph] {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .pa-summary-grid[b-xc5jkf5eph] {
        grid-template-columns: 1fr;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Full[b-xc5jkf5eph],
    .pa-summary-panel-wrapper.pa-panel-width-Half[b-xc5jkf5eph],
    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-xc5jkf5eph] {
        grid-column: span 1;
    }
}

/* Widget grid: 4 equal tracks so S=1 (4/row), M=2 (2/row), L=4 (1/row). */
[b-xc5jkf5eph] .pa-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

/* MudDropZone wraps each rendered widget in a .mud-drop-item — that wrapper is the grid cell.
   Default span is M (2 of 4). */
[b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item {
    grid-column: span 2;
    min-width: 0;
    cursor: grab;
}

[b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:active {
    cursor: grabbing;
}

[b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
    grid-column: span 1;
}

[b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
    grid-column: span 2;
}

[b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
    grid-column: span 4;
}

.pa-widget-item[b-xc5jkf5eph] {
    height: 100%;
}

.pa-widget-card[b-xc5jkf5eph] {
    resize: both;
    overflow: auto;
    border: 1px solid var(--ds-border);
    height: 100%;
}

.pa-widget-header[b-xc5jkf5eph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
}

.pa-widget-header .d-flex[b-xc5jkf5eph] {
    cursor: default;
}

.pa-widget-body[b-xc5jkf5eph] {
    padding: 10px;
    /* Keep wide tables (many period columns) inside the widget panel by scrolling
       horizontally within the body instead of overflowing the card. */
    overflow-x: auto;
    max-width: 100%;
}

.pa-size-S[b-xc5jkf5eph] {
    min-height: 180px;
}

.pa-size-M[b-xc5jkf5eph] {
    min-height: 260px;
}

.pa-size-L[b-xc5jkf5eph] {
    min-height: 360px;
}

/* Two-track layout on mid widths: S=1 (2/row), M and L span the full width. */
@media (max-width: 1280px) {
    [b-xc5jkf5eph] .pa-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
        grid-column: span 1;
    }
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
        grid-column: span 2;
    }
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 2;
    }
}

/* Single column on narrow screens. */
@media (max-width: 760px) {
    [b-xc5jkf5eph] .pa-widget-grid {
        grid-template-columns: 1fr;
    }
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item,
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-S),
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-M),
    [b-xc5jkf5eph] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 1;
    }
}

.pa-mar-switch[b-xc5jkf5eph] {
    margin-right: 4px;
}

/* ─── Hover hint bubble: pure-CSS tooltip ───
   Used by elements that MudTooltip cannot reliably position because of the
   global `.mud-tooltip` transform override in app.css (translateX(50% − 10px))
   which is hard-coded for a 20px icon and forces every tooltip to translate
   sideways from its anchor. This pure-CSS tooltip bypasses MudBlazor's popover
   entirely so placement is deterministic.

   The bubble is anchored BELOW the trigger (top:100% + 8px) and toward the LEFT
   (right:0 → it grows leftward from the trigger's right edge), which guarantees
   it never clips off the right edge of its parent container. */
.pa-hint[b-xc5jkf5eph] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

/* Variant for triggers that are clickable buttons (e.g. Remove view icon).
   The button supplies its own cursor and click handler, so we drop the
   help cursor here. */
.pa-hint--btn[b-xc5jkf5eph] {
    cursor: default;
}

.pa-hint-bubble[b-xc5jkf5eph] {
    position: absolute;
    top: calc(100% + 8px);   /* below the trigger */
    right: 0;                /* align right edge to trigger → expands left */
    left: auto;
    z-index: 1300;
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    /* Match the exact background MudBlazor's default tooltips use (Copy/Export).
       .mud-tooltip-default sets background-color:var(--mud-palette-gray-darker),
       so reuse that same token here for a pixel-identical lighter-brown bubble. */
    background: var(--mud-palette-gray-darker, #424242);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    pointer-events: none;
}

/* Small arrow pointing up toward the trigger, near the right edge. */
.pa-hint-bubble[b-xc5jkf5eph]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 6px;
    border: 5px solid transparent;
    border-bottom-color: var(--mud-palette-gray-darker, #424242);
}

.pa-hint:hover .pa-hint-bubble[b-xc5jkf5eph],
.pa-hint:focus-within .pa-hint-bubble[b-xc5jkf5eph] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
}

/* Toolbar: the SAVED VIEWS and Export menus now render their activators via
   MudMenu <ActivatorContent> using a MudButton / MudIconButton whose inline
   Style sets color:#ffffff directly (mirroring the Benchmark/Portfolio
   buttons). These ::deep rules are a defensive safety net to guarantee the
   inner label text, chevron and SVG icon stay white even if MudBlazor adds
   its own color to the nested button. */
[b-xc5jkf5eph] .pa-toolbar .pa-saved-views-btn .mud-button-root,
[b-xc5jkf5eph] .pa-toolbar .pa-saved-views-btn.mud-button-root {
    color: #ffffff !important;
}

[b-xc5jkf5eph] .pa-toolbar .pa-saved-views-btn .mud-button-root .mud-icon-root,
[b-xc5jkf5eph] .pa-toolbar .pa-saved-views-btn .mud-button-root svg,
[b-xc5jkf5eph] .pa-toolbar .pa-saved-views-btn.mud-button-root svg {
    color: #ffffff !important;
}

/* Export icon-only menu: ensure the FileDownload icon renders white. */
[b-xc5jkf5eph] .pa-toolbar .pa-export-btn .mud-icon-button,
[b-xc5jkf5eph] .pa-toolbar .pa-export-btn .mud-icon-button .mud-icon-root,
[b-xc5jkf5eph] .pa-toolbar .pa-export-btn .mud-icon-button svg,
[b-xc5jkf5eph] .pa-toolbar .pa-export-btn.mud-icon-button svg {
    color: #ffffff !important;
}

/* /Components/Pages/PortfolioContributionSettingsDrawer.razor.rz.scp.css */
/* ── Overlay ─────────────────────────────────────────────────────── */
.settings-overlay[b-38ozjme4lb] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.settings-overlay.open[b-38ozjme4lb] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Drawer panel ────────────────────────────────────────────────── */
.settings-drawer[b-38ozjme4lb] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    width: 420px;
    max-width: 92vw;
    background: var(--ds-settings-drawer-bg);
    border-left: 1px solid var(--ds-settings-drawer-border);
    box-shadow: var(--ds-settings-drawer-shadow);
    color: var(--ds-settings-drawer-text);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-drawer.open[b-38ozjme4lb] {
    transform: translateX(0);
}

/* ── Header (fixed top) ─────────────────────────────────────────── */
.drawer-header[b-38ozjme4lb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Body (scrollable middle) ────────────────────────────────────── */
.drawer-body[b-38ozjme4lb] {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 20px;
}

/* ── Footer (fixed bottom) ───────────────────────────────────────── */
.drawer-footer[b-38ozjme4lb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* ── Section overline color ──────────────────────────────────────── */
.settings-drawer .mud-typography-overline[b-38ozjme4lb] {
    color: var(--ds-settings-drawer-section-clr) !important;
}

/* ── Scrollbar tint ──────────────────────────────────────────────── */
.drawer-body[b-38ozjme4lb]::-webkit-scrollbar-thumb {
    background: var(--ds-border);
}

.drawer-body[b-38ozjme4lb]::-webkit-scrollbar-thumb:hover {
    background: #b0bec5;
}
/* /Components/Pages/Reconciliation.razor.rz.scp.css */
/* ── Toolbar (mirrors PerformanceAnalytics) ─────────────────────── */
.pa-toolbar[b-7tnd8z2krs] {
    border-bottom: 1px solid rgba(0,0,0,0.18);
    background: linear-gradient(135deg,#05484e 0%,#08636b 60%,#0a7880 100%);
    padding: 8px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.pa-toolbar-row[b-7tnd8z2krs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-content[b-7tnd8z2krs] {
    display: block;
}

.pa-widget-drop[b-7tnd8z2krs] {
    display: block;
}

/* ── Results / Recon Summary drop zone ──────────────────────────── */
[b-7tnd8z2krs] .pa-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
    padding: 8px;
    margin-bottom: 12px;
}

[b-7tnd8z2krs] .pa-summary-dropzone.pa-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

.pa-summary-empty[b-7tnd8z2krs] {
    border: 2px dashed var(--ds-border);
    background: transparent;
}

.pa-summary-grid[b-7tnd8z2krs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pa-summary-panel-wrapper[b-7tnd8z2krs] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.pa-summary-panel-wrapper.pa-panel-width-Full[b-7tnd8z2krs] {
    grid-column: span 4;
}

.pa-summary-panel-wrapper.pa-panel-width-Half[b-7tnd8z2krs] {
    grid-column: span 2;
}

.pa-summary-panel-wrapper.pa-panel-width-Quarter[b-7tnd8z2krs] {
    grid-column: span 1;
}

.pa-summary-panel-wrapper[b-7tnd8z2krs]  .pa-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

.pa-summary-panel-content[b-7tnd8z2krs] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.pa-content-chart[b-7tnd8z2krs] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1280px) {
    .pa-summary-grid[b-7tnd8z2krs] {
        grid-template-columns: repeat(2, 1fr);
    }
    .pa-summary-panel-wrapper.pa-panel-width-Full[b-7tnd8z2krs] {
        grid-column: span 2;
    }
    .pa-summary-panel-wrapper.pa-panel-width-Half[b-7tnd8z2krs] {
        grid-column: span 1;
    }
    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-7tnd8z2krs] {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .pa-summary-grid[b-7tnd8z2krs] {
        grid-template-columns: 1fr;
    }
    .pa-summary-panel-wrapper.pa-panel-width-Full[b-7tnd8z2krs],
    .pa-summary-panel-wrapper.pa-panel-width-Half[b-7tnd8z2krs],
    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-7tnd8z2krs] {
        grid-column: span 1;
    }
}

/* ── Widget grid ────────────────────────────────────────────────── */
[b-7tnd8z2krs] .pa-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

[b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item {
    grid-column: span 2;
    min-width: 0;
    cursor: grab;
}

[b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:active {
    cursor: grabbing;
}

[b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
    grid-column: span 1;
}

[b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
    grid-column: span 2;
}

[b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
    grid-column: span 4;
}

.pa-widget-item[b-7tnd8z2krs] {
    height: 100%;
}

.pa-widget-card[b-7tnd8z2krs] {
    overflow: auto;
    border: 1px solid var(--ds-border);
    height: 100%;
}

.pa-widget-header[b-7tnd8z2krs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
}

.pa-widget-header .d-flex[b-7tnd8z2krs] {
    cursor: default;
}

.pa-widget-body[b-7tnd8z2krs] {
    padding: 10px;
    overflow-x: auto;
    max-width: 100%;
}

.pa-size-S[b-7tnd8z2krs] {
    height: 400px;
}

.pa-size-M[b-7tnd8z2krs] {
    height: 400px;
}

.pa-size-L[b-7tnd8z2krs] {
    height: 400px;
}

[b-7tnd8z2krs] .pa-mini-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
}

[b-7tnd8z2krs] .pa-mini-btn .mud-icon-root {
    font-size: 16px;
}

@media (max-width: 1280px) {
    [b-7tnd8z2krs] .pa-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
        grid-column: span 1;
    }
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
        grid-column: span 2;
    }
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    [b-7tnd8z2krs] .pa-widget-grid {
        grid-template-columns: 1fr;
    }
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item,
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-S),
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-M),
    [b-7tnd8z2krs] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 1;
    }
}

/* ── Lightweight horizontal bar chart (Chart view) ──────────────── */
.recon-bar-chart[b-7tnd8z2krs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px;
}

.recon-bar-row[b-7tnd8z2krs] {
    display: grid;
    grid-template-columns: 120px 1fr 90px;
    align-items: center;
    gap: 8px;
}

.recon-bar-label[b-7tnd8z2krs] {
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recon-bar-track[b-7tnd8z2krs] {
    background: rgba(8,99,107,0.10);
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
}

.recon-bar-fill[b-7tnd8z2krs] {
    height: 100%;
    background: linear-gradient(90deg,#08636b 0%,#FF8000 100%);
    border-radius: 4px;
    min-width: 2px;
}

.recon-bar-value[b-7tnd8z2krs] {
    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RecoverAccess.razor.rz.scp.css */
/* Inherits ef-login-page / ef-login-card / ef-brand-* / ef-form-* / ef-btn-primary
   from Login.razor.css via the shared class names.
   Only rules unique to the recovery page are defined here. */

.ef-login-page[b-t44pxftat7] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0a1628;
    background-image: radial-gradient(circle at top right, #11233d, transparent 40%);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ef-login-card[b-t44pxftat7] {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    padding: 48px;
    display: flex;
    flex-direction: column;
}

.ef-brand-header[b-t44pxftat7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.ef-brand-header img[b-t44pxftat7] {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.ef-brand-text[b-t44pxftat7] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
    margin-top: -8px;
}

.ef-brand-subtext[b-t44pxftat7] {
    color: #08636b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    margin-top: 4px;
}

.ef-form-group[b-t44pxftat7] {
    margin-bottom: 24px;
    position: relative;
}

.ef-form-label[b-t44pxftat7] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.ef-form-input[b-t44pxftat7] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    border: 1px solid #d8e0e7;
    border-radius: 4px;
    background: #fafcff;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.ef-form-input:focus[b-t44pxftat7] {
    border-color: #08636b;
    box-shadow: 0 0 0 3px #e0f0f1;
    background: #ffffff;
}

.ef-input-icon[b-t44pxftat7] {
    position: absolute;
    left: 14px;
    top: 36px;
    color: #64748b;
    pointer-events: none;
}

.ef-btn-primary[b-t44pxftat7] {
    width: 100%;
    background: #08636b;
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ef-btn-primary:hover:not(:disabled)[b-t44pxftat7] {
    background: #05484e;
}

.ef-btn-primary:disabled[b-t44pxftat7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ef-footer[b-t44pxftat7] {
    position: absolute;
    bottom: 24px;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ── Recovery-specific ── */

.ef-recover-title[b-t44pxftat7] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.ef-recover-body[b-t44pxftat7] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
}

.ef-recover-admin-note[b-t44pxftat7] {
    margin-top: 20px;
    padding: 12px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    font-size: 12px;
    color: #0369a1;
    line-height: 1.6;
}

.ef-recover-admin-note code[b-t44pxftat7] {
    background: #e0f2fe;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
}

.ef-recover-success[b-t44pxftat7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 0;
}

.ef-recover-success p[b-t44pxftat7] {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.6;
    margin: 0;
}

.ef-recover-platformadmin[b-t44pxftat7] {
    font-size: 12px;
    color: #64748b;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px solid #d8e0e7;
}

.ef-recover-platformadmin code[b-t44pxftat7] {
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
}

.ef-back-link[b-t44pxftat7] {
    display: block;
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #08636b;
    text-decoration: none;
}

.ef-back-link:hover[b-t44pxftat7] {
    text-decoration: underline;
}
/* /Components/Pages/Returns.razor.rz.scp.css */
/* Returns page styling.

   The Returns page reuses the Performance Analytics toolbar + draggable widget /
   results-summary framework. Those `pa-*` classes are defined in
   PerformanceAnalytics.razor.css, but Blazor scoped CSS is per-component: the scope
   attribute (b-xxxxx) is only stamped onto elements authored in THIS component's
   .razor file, so the sibling page's scoped styles cannot apply here. The required
   rules are therefore replicated below (mirroring PerformanceAnalytics.razor.css and
   Reconciliation.razor.css), preserving the same ::deep usage for child components
   such as MudDropZone / MudPaper that never receive the scope attribute. */

.pa-toolbar[b-zcx1d5o9vl] {
    border-bottom: 1px solid rgba(0,0,0,0.18);
    background: linear-gradient(135deg,#05484e 0%,#08636b 60%,#0a7880 100%);
    padding: 8px 14px;
    margin-bottom: 16px;
}

.pa-toolbar-row[b-zcx1d5o9vl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-menu-backdrop[b-zcx1d5o9vl] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

/* Toolbar dropdown panel (Portfolio selector) — matches the Date selector card. */
.pa-menu-panel[b-zcx1d5o9vl] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}

.pa-menu-section[b-zcx1d5o9vl] {
    padding: 10px 14px 8px 14px;
}
.pa-menu-section + .pa-menu-section[b-zcx1d5o9vl] {
    padding-top: 0;
}

.pa-menu-label[b-zcx1d5o9vl] {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-widget-drop[b-zcx1d5o9vl] {
    display: block;
}

.pa-content[b-zcx1d5o9vl] {
    display: block;
}

/* The Results Summary acts as a drop target: dragging a widget onto it pins the
   metric to the summary. */
[b-zcx1d5o9vl] .pa-summary-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

[b-zcx1d5o9vl] .pa-summary-dropzone.pa-can-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(8, 99, 107, 0.05);
}

.pa-summary-empty[b-zcx1d5o9vl] {
    border: 2px dashed var(--ds-border);
    background: transparent;
}

/* Summary panels grid layout: supports Full (100%), Half (50%), Quarter (25%) widths.
   The plain wrapper div IS scoped; ::deep flows height into the child MudPaper, which
   never receives the scope attribute. */
.pa-summary-grid[b-zcx1d5o9vl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pa-summary-panel-wrapper[b-zcx1d5o9vl] {
    min-width: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.pa-summary-panel-wrapper.pa-panel-width-Full[b-zcx1d5o9vl] {
    grid-column: span 4;
}

.pa-summary-panel-wrapper.pa-panel-width-Half[b-zcx1d5o9vl] {
    grid-column: span 2;
}

.pa-summary-panel-wrapper.pa-panel-width-Quarter[b-zcx1d5o9vl] {
    grid-column: span 1;
}

/* The MudPaper uses class="ds-table-container" which sets overflow:hidden in app.css;
   override to overflow:visible so ONLY the inner content div scrolls. */
.pa-summary-panel-wrapper[b-zcx1d5o9vl]  .pa-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    box-sizing: border-box;
    overflow: visible !important;
}

.pa-summary-panel-content[b-zcx1d5o9vl] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 1280px) {
    .pa-summary-grid[b-zcx1d5o9vl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pa-summary-panel-wrapper.pa-panel-width-Full[b-zcx1d5o9vl] {
        grid-column: span 2;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Half[b-zcx1d5o9vl] {
        grid-column: span 1;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-zcx1d5o9vl] {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .pa-summary-grid[b-zcx1d5o9vl] {
        grid-template-columns: 1fr;
    }

    .pa-summary-panel-wrapper.pa-panel-width-Full[b-zcx1d5o9vl],
    .pa-summary-panel-wrapper.pa-panel-width-Half[b-zcx1d5o9vl],
    .pa-summary-panel-wrapper.pa-panel-width-Quarter[b-zcx1d5o9vl] {
        grid-column: span 1;
    }
}

/* Widget grid: 4 equal tracks so S=1 (4/row), M=2 (2/row), L=4 (1/row). */
[b-zcx1d5o9vl] .pa-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-flow: row dense;
    min-height: 80px;
}

/* MudDropZone wraps each rendered widget in a .mud-drop-item — that wrapper is the
   grid cell. Default span is M (2 of 4). */
[b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item {
    grid-column: span 2;
    min-width: 0;
    cursor: grab;
}

[b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:active {
    cursor: grabbing;
}

[b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
    grid-column: span 1;
}

[b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
    grid-column: span 2;
}

[b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
    grid-column: span 4;
}

.pa-widget-item[b-zcx1d5o9vl] {
    /* Match the summary panel's fixed height (see .pa-summary-panel-wrapper) so pinned and
       unpinned views are the same standard size. */
    height: 400px;
}

/* The widget card is a MudPaper, so its rendered element never receives this component's
   scope attribute — the styles must be applied through ::deep (mirroring the summary panel)
   or the 400px flex layout is silently dropped and the card collapses to its content height
   instead of matching the summary panel. */
.pa-widget-item[b-zcx1d5o9vl]  .pa-widget-card {
    resize: vertical;
    border: 1px solid var(--ds-border);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pa-widget-header[b-zcx1d5o9vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(8,99,107,0.18);
    background: linear-gradient(135deg, rgba(8,99,107,0.08), rgba(255,128,0,0.08));
}

.pa-widget-header .d-flex[b-zcx1d5o9vl] {
    cursor: default;
}

.pa-widget-body[b-zcx1d5o9vl] {
    padding: 10px;
    /* Fill the remaining card height and scroll internally so the card stays a fixed 400px,
       matching the summary panel. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-width: 100%;
}

.pa-size-S[b-zcx1d5o9vl] {
    min-height: 180px;
}

.pa-size-M[b-zcx1d5o9vl] {
    min-height: 260px;
}

.pa-size-L[b-zcx1d5o9vl] {
    min-height: 360px;
}

@media (max-width: 1280px) {
    [b-zcx1d5o9vl] .pa-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-S) {
        grid-column: span 1;
    }
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-M) {
        grid-column: span 2;
    }
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    [b-zcx1d5o9vl] .pa-widget-grid {
        grid-template-columns: 1fr;
    }
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item,
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-S),
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-M),
    [b-zcx1d5o9vl] .pa-widget-grid > .mud-drop-item:has(.pa-size-L) {
        grid-column: span 1;
    }
}

/* ─── Hover hint bubble: pure-CSS tooltip (Remove view) ───
   Mirrors PerformanceAnalytics: bypasses MudBlazor's popover for deterministic
   placement. Anchored below the trigger and toward the left so it never clips. */
.pa-hint[b-zcx1d5o9vl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.pa-hint--btn[b-zcx1d5o9vl] {
    cursor: default;
}

.pa-hint-bubble[b-zcx1d5o9vl] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 1300;
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--mud-palette-gray-darker, #424242);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    pointer-events: none;
}

.pa-hint-bubble[b-zcx1d5o9vl]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 6px;
    border: 5px solid transparent;
    border-bottom-color: var(--mud-palette-gray-darker, #424242);
}

.pa-hint:hover .pa-hint-bubble[b-zcx1d5o9vl],
.pa-hint:focus-within .pa-hint-bubble[b-zcx1d5o9vl] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
}

/* Selected-portfolio "Data History" coverage popup (mirrors PerformanceAnalytics.razor.css). */
.pa-cov-pop[b-zcx1d5o9vl] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 1200;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}

.pa-cov-table[b-zcx1d5o9vl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pa-cov-table th[b-zcx1d5o9vl] {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}

.pa-cov-table td[b-zcx1d5o9vl] {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* IRR Returns expandable account/security rows */
.irr-row--account[b-zcx1d5o9vl] {
    font-weight: 700;
    background: rgba(8, 99, 107, 0.06);
}

.irr-row:hover[b-zcx1d5o9vl] {
    background: rgba(8, 99, 107, 0.10);
}

.irr-detail-row > td[b-zcx1d5o9vl] {
    padding: 0 0 8px 0;
    background: rgba(8, 99, 107, 0.02);
}

/* Indent security labels by 5 character widths. The global `.ds-table td` rule sets
   `padding: 0 12px !important`, so this override must also use `!important` to win the cascade. */
.irr-table td.irr-security-label[b-zcx1d5o9vl] {
    padding-left: 5ch !important;
}

.irr-flow-detail[b-zcx1d5o9vl] {
    padding: 8px 12px 8px 36px;
}

.irr-flow-table[b-zcx1d5o9vl] {
    font-size: 12px;
}

.irr-flow-table th[b-zcx1d5o9vl] {
    color: #888;
    font-weight: 600;
}

.irr-flow-bmv[b-zcx1d5o9vl] {
    background: rgba(220, 53, 69, 0.06);
}

.irr-flow-emv[b-zcx1d5o9vl] {
    background: rgba(40, 167, 69, 0.06);
}

.irr-flow-fee[b-zcx1d5o9vl] {
    background: rgba(255, 128, 0, 0.07);
}

/* Combined account-level flow rows that expand to a per-security calculation detail. */
.irr-flow-group:hover[b-zcx1d5o9vl] {
    background: rgba(8, 99, 107, 0.10);
}

.irr-flow-calc-row > td[b-zcx1d5o9vl] {
    padding: 0 0 6px 0 !important;
    background: rgba(8, 99, 107, 0.03);
}

.irr-flow-calc[b-zcx1d5o9vl] {
    padding: 4px 8px 6px 28px;
}

.irr-flow-calc-label[b-zcx1d5o9vl] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #08636b;
    margin: 2px 0 4px 0;
}

/* De-annualized IRR marker (shown when a holding period is under one year). */
.irr-deann-flag[b-zcx1d5o9vl] {
    color: #c2410c;
    font-weight: 700;
    margin-left: 2px;
    cursor: help;
}
/* /Components/Pages/Transactions.razor.rz.scp.css */
/* ── Context bar ─────────────────────────────────────────────────── */
.context-bar[b-nqsuuowc16] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Ghost Date Button ──────────────────────────────────────────── */
.ghost-date-wrapper[b-nqsuuowc16] {
    flex: none;
    max-width: 190px;
    border-radius: 8px;
    padding: 2px 6px;
    transition: background 0.15s ease;
}

.ghost-date-wrapper:hover[b-nqsuuowc16] {
    background: rgba(0, 0, 0, 0.04);
}

/* Remove MudDatePicker underline for ghost look */
[b-nqsuuowc16] .ghost-date-wrapper .mud-input-underline::before,
[b-nqsuuowc16] .ghost-date-wrapper .mud-input-underline::after {
    border: none !important;
}

[b-nqsuuowc16] .ghost-date-wrapper .mud-input {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

[b-nqsuuowc16] .ghost-date-wrapper .mud-input-label {
    display: none;
}

/* ── Date range separator ───────────────────────────────────────── */
.date-sep[b-nqsuuowc16] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    flex: none;
}
/* /Components/Shared/GlobalFilterDrawer.razor.rz.scp.css */
/* All styles for GlobalFilterDrawer have been migrated to wwwroot/app.css
as DS classes under the heading Search Options Drawer (GlobalFilterDrawer).
Class prefix: ds-filter-* */
/* /Components/Shared/MultiFormatDatePicker.razor.rz.scp.css */
/* Adornment button border override is in wwwroot/app.css
   (scoped CSS cannot reliably penetrate MudBlazor's internal DOM) */