/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-a7bfj87aoe],
.components-reconnect-repeated-attempt-visible[b-a7bfj87aoe],
.components-reconnect-failed-visible[b-a7bfj87aoe],
.components-pause-visible[b-a7bfj87aoe],
.components-resume-failed-visible[b-a7bfj87aoe],
.components-rejoining-animation[b-a7bfj87aoe] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-retrying[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-failed[b-a7bfj87aoe],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-a7bfj87aoe] {
    display: block;
}


#components-reconnect-modal[b-a7bfj87aoe] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-a7bfj87aoe 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-a7bfj87aoe 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-a7bfj87aoe 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-a7bfj87aoe]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-a7bfj87aoe 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-a7bfj87aoe {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-a7bfj87aoe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-a7bfj87aoe {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-a7bfj87aoe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-a7bfj87aoe] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-a7bfj87aoe] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-a7bfj87aoe] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-a7bfj87aoe] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-a7bfj87aoe] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-a7bfj87aoe] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-a7bfj87aoe 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-a7bfj87aoe] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-a7bfj87aoe {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Acessos.razor.rz.scp.css */
/* Access admin panel — sidebar of expandable sections + grantees list.
   Reuses the global nnm-*dash-* shell styles; warm BrainHub palette. */

.acc-grid[b-ditnbzijsl] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
}

/* 964, not 900: the query measures the viewport but the grid lives inside
   .hub-content, which is the viewport less the sidebar. See the breakpoint
   conversion documented at the top of app.css. */
@media (max-width: 964px) {
    .acc-grid[b-ditnbzijsl] { grid-template-columns: 1fr; }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.acc-side[b-ditnbzijsl] { padding-bottom: 8px; }

.acc-tree[b-ditnbzijsl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

/* Section header row: chevron + selectable label + count */
.acc-sec-row[b-ditnbzijsl] {
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-top: 6px;
    border: 1px solid transparent;
    transition: background-color .12s, border-color .12s;
}
.acc-sec-row:hover[b-ditnbzijsl] { background: rgba(0, 0, 0, .03); }
.acc-sec-row.active[b-ditnbzijsl] { background: rgba(224, 120, 32, .08); border-color: rgba(224, 120, 32, .35); }

.acc-sec-chev[b-ditnbzijsl] {
    background: none; border: none; cursor: pointer;
    color: #b0a898; padding: 8px 4px 8px 8px; font-size: 12px;
    display: flex; align-items: center;
}
.acc-sec-chev:hover[b-ditnbzijsl] { color: #7a6e60; }

.acc-sec-main[b-ditnbzijsl] {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer;
    padding: 8px 10px 8px 2px; text-align: left;
}

.acc-section-name[b-ditnbzijsl] {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: #7a6e60;
}

/* Screen rows under a section */
.acc-screen[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    background: none; border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px 7px 26px;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.acc-screen:hover[b-ditnbzijsl] { background: rgba(0, 0, 0, .03); }
.acc-screen.active[b-ditnbzijsl] { background: rgba(224, 120, 32, .10); border-color: rgba(224, 120, 32, .35); }

.acc-dot[b-ditnbzijsl] { width: 5px; height: 5px; border-radius: 50%; background: #cbbfb0; flex: none; }
.acc-screen.active .acc-dot[b-ditnbzijsl] { background: #e07820; }

.acc-screen-name[b-ditnbzijsl] { flex: 1; font-size: 13.5px; font-weight: 600; color: #3a3228; }

.acc-count[b-ditnbzijsl] {
    font-size: 11px; font-weight: 700; color: #e07820;
    background: rgba(224, 120, 32, .12);
    border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.acc-count.muted[b-ditnbzijsl] { color: #b0a898; background: rgba(0, 0, 0, .05); }

/* Unsaved-changes marker on a tree row (the edit lives in memory until Save). */
.acc-unsaved[b-ditnbzijsl] {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: #e07820; margin-right: 6px;
}

/* ── Main panel ──────────────────────────────────────────────────────────── */
.acc-main-head[b-ditnbzijsl] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}

.acc-trail[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: #3a3228;
}
.acc-trail i[b-ditnbzijsl] { color: #e07820; }

.acc-actions[b-ditnbzijsl] { display: flex; align-items: center; gap: 8px; }

.acc-btn-add[b-ditnbzijsl], .acc-btn-save[b-ditnbzijsl] {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; padding: 7px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color .12s, border-color .12s, opacity .12s;
}
.acc-btn-add[b-ditnbzijsl] {
    background: #fff; color: #3a3228;
    border: 1px solid rgba(0, 0, 0, .14);
}
.acc-btn-add:hover[b-ditnbzijsl] { border-color: #e07820; color: #b06010; }

.acc-btn-save[b-ditnbzijsl] {
    background: #e07820; color: #fff; border: 1px solid #e07820;
}
.acc-btn-save:hover[b-ditnbzijsl] { background: #c96a16; }
.acc-btn-save:disabled[b-ditnbzijsl] { opacity: .5; cursor: default; }

/* Pending rule count on the save button — one per rule edited since the last save. */
.acc-save-count[b-ditnbzijsl] {
    background: rgba(255, 255, 255, .25);
    border-radius: 999px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
}

/* Add popover anchored to the button */
.acc-add-wrap[b-ditnbzijsl] { position: relative; }
/* Transparent full-screen catcher: any click outside the popover closes it.
   Sits below the popover (30) and the add button (31) so both stay interactive. */
.acc-add-backdrop[b-ditnbzijsl] { position: fixed; inset: 0; z-index: 29; background: transparent; }
.acc-btn-add[b-ditnbzijsl] { position: relative; z-index: 31; }
.acc-popover[b-ditnbzijsl] {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    width: 320px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    padding: 10px;
}

.acc-picker-tabs[b-ditnbzijsl] { display: flex; gap: 6px; margin-bottom: 8px; }
.acc-picker-tabs button[b-ditnbzijsl] {
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px; padding: 4px 12px;
    font-size: 12.5px; font-weight: 600; color: #b0a898; cursor: pointer;
}
.acc-picker-tabs button.active[b-ditnbzijsl] { color: #fff; background: #e07820; border-color: #e07820; }

.acc-search[b-ditnbzijsl] {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px; padding: 7px 10px; font-size: 13px; margin-bottom: 8px;
}
.acc-search:focus[b-ditnbzijsl] { outline: none; border-color: #e07820; }

.acc-results[b-ditnbzijsl] { max-height: 260px; overflow-y: auto; border-radius: 8px; }
.acc-result[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    background: none; border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding: 8px 10px; font-size: 13px; color: #3a3228; cursor: pointer;
}
.acc-result:hover:not(:disabled)[b-ditnbzijsl] { background: rgba(224, 120, 32, .06); }
.acc-result:disabled[b-ditnbzijsl] { opacity: .5; cursor: default; }
.acc-result-name[b-ditnbzijsl] { font-weight: 600; }
.acc-result-extra[b-ditnbzijsl] { color: #b0a898; font-size: 11.5px; margin-left: auto; }
.acc-result-added[b-ditnbzijsl] { color: #4a7a2a; margin-left: 6px; }

/* Section umbrella hint + saved toast */
.acc-section-hint[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #7a6e60;
    background: rgba(58, 110, 165, .06);
    border: 1px solid rgba(58, 110, 165, .18);
    border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
.acc-saved[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 6px;
    color: #4a7a2a; font-size: 13px; margin-bottom: 10px;
}

/* Pending edits across rules, and the inherited-from-section explanation. */
.acc-dirty-hint[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #b06010;
    background: rgba(224, 120, 32, .08);
    border: 1px solid rgba(224, 120, 32, .28);
    border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
.acc-inherited-hint[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #7a6e60;
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}

.acc-list-head[b-ditnbzijsl] {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #b0a898; margin: 4px 0 10px;
}

/* Grantees list */
.acc-list[b-ditnbzijsl] { display: flex; flex-direction: column; gap: 6px; }

.acc-row[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px; padding: 10px 12px;
    background: #fff;
}

.acc-row-icon[b-ditnbzijsl] {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}

.acc-row-meta[b-ditnbzijsl] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acc-row-name[b-ditnbzijsl] { font-size: 14px; font-weight: 600; color: #3a3228; }
.acc-row-extra[b-ditnbzijsl] { font-size: 12px; color: #b0a898; }

.acc-tag[b-ditnbzijsl] {
    font-size: 11.5px; font-weight: 700;
    border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}

/* Rows granted by the section rule: read-only, no remove button (revoking is done
   on the section). A screen row that repeats one of them is flagged as redundant. */
.acc-row.is-inherited[b-ditnbzijsl] { background: rgba(0, 0, 0, .02); border-style: dashed; }
.acc-row.is-redundant[b-ditnbzijsl] { border-color: rgba(224, 120, 32, .45); }
.acc-tag-inh[b-ditnbzijsl] { background: rgba(0, 0, 0, .06); color: #7a6e60; }
.acc-tag-dup[b-ditnbzijsl] {
    background: rgba(224, 120, 32, .12); color: #b06010;
    display: inline-flex; align-items: center; gap: 5px;
}
.acc-list-head-inh[b-ditnbzijsl] { margin-top: 18px; }
.acc-result-inherited[b-ditnbzijsl] {
    font-size: 11px; font-weight: 700; color: #7a6e60;
    background: rgba(0, 0, 0, .06);
    border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap;
}

.acc-row-x[b-ditnbzijsl] {
    border: none; background: none; cursor: pointer;
    font-size: 14px; line-height: 1; color: #b0a898; padding: 4px 6px; border-radius: 6px;
}
.acc-row-x:hover[b-ditnbzijsl] { color: #b04040; background: rgba(176, 64, 64, .08); }

.acc-empty-rule[b-ditnbzijsl] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: #b0a898; font-size: 13px;
    padding: 32px 16px;
    border: 1px dashed rgba(0, 0, 0, .12); border-radius: 10px;
}
.acc-empty-rule i[b-ditnbzijsl] { font-size: 28px; opacity: .4; }

/* Type colors (icon circle + tag), shared across user/team/business unit */
.acc-chip-user[b-ditnbzijsl]         { background: rgba(58, 110, 165, .12);  color: #3a6ea5; }
.acc-chip-team[b-ditnbzijsl]         { background: rgba(74, 122, 42, .12);   color: #4a7a2a; }
.acc-chip-businessunit[b-ditnbzijsl] { background: rgba(224, 120, 32, .14);  color: #b06010; }

/* ── Visibility: overrides the grants below it, so it is styled as a control bar
   above the lists rather than as one more hint. ── */
.acc-vis-bar[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.acc-vis-lbl[b-ditnbzijsl] {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #7a6e60;
}
.acc-vis-seg[b-ditnbzijsl] {
    display: inline-flex; gap: 2px;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px; padding: 3px;
}
.acc-vis-seg button[b-ditnbzijsl] {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #7a6e60;
    border-radius: 8px; padding: 6px 12px;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.acc-vis-seg button:hover[b-ditnbzijsl] { color: #3a3228; }
.acc-vis-seg button.active[b-ditnbzijsl] {
    background: #fff; color: #3a3228;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.acc-vis-seg button.acc-vis-danger.active[b-ditnbzijsl] { color: #b04040; }

.acc-vis-hint[b-ditnbzijsl] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
.acc-vis-hint.is-hidden[b-ditnbzijsl] {
    color: #b04040;
    background: rgba(176, 64, 64, .07);
    border: 1px solid rgba(176, 64, 64, .25);
}
.acc-vis-hint.is-explicit[b-ditnbzijsl] {
    color: #b06010;
    background: rgba(224, 120, 32, .08);
    border: 1px solid rgba(224, 120, 32, .28);
}

/* Grants kept on a hidden screen: still editable, but visibly without effect. */
.acc-list.is-inactive[b-ditnbzijsl] { opacity: .5; }

/* Tree markers for the two non-default modes. */
.acc-vis-flag[b-ditnbzijsl] { font-size: 12px; color: #b0a898; margin-right: 6px; }
.acc-screen.is-hidden .acc-screen-name[b-ditnbzijsl] { color: #b0a898; }
.acc-screen.is-hidden .acc-vis-flag[b-ditnbzijsl] { color: #b04040; }
/* /Components/Pages/Admin/ConfiguracoesGerais.razor.rz.scp.css */
/* General settings admin page — dev-only Dataverse environment toggle.
   Mirrors the warm BrainHub palette used by Impersonacao.razor.css / Acessos.razor.css. */

.gs-panel[b-f0atevvpth] { padding: 16px; max-width: 480px; }

.gs-hint[b-f0atevvpth] { font-size: 12.5px; color: #7a6e60; margin: 6px 0 16px; }

.gs-toggle-row[b-f0atevvpth] {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 0 12px;
}

.gs-toggle-side[b-f0atevvpth] {
    font-size: 13px; font-weight: 600; color: #b0a898;
    transition: color .12s;
}
.gs-toggle-side.active[b-f0atevvpth] { color: #3a3228; }

.gs-switch[b-f0atevvpth] { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.gs-switch input[b-f0atevvpth] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.gs-switch-track[b-f0atevvpth] {
    position: absolute; inset: 0;
    background: rgba(58, 110, 165, .35);
    border-radius: 999px;
    transition: background-color .15s;
}
.gs-switch input:checked ~ .gs-switch-track[b-f0atevvpth] { background: #e07820; }
.gs-switch input:focus-visible ~ .gs-switch-track[b-f0atevvpth] { box-shadow: 0 0 0 3px rgba(224, 120, 32, .25); }

.gs-switch-thumb[b-f0atevvpth] {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.gs-switch input:checked ~ .gs-switch-track .gs-switch-thumb[b-f0atevvpth] { transform: translateX(20px); }

.gs-baseurl[b-f0atevvpth] {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #7a6e60;
    background: rgba(0, 0, 0, .03);
    border-radius: 8px;
    padding: 8px 12px;
}
.gs-baseurl code[b-f0atevvpth] { color: #3a3228; word-break: break-all; }
/* /Components/Pages/Admin/Impersonacao.razor.rz.scp.css */
/* Impersonation admin page — user picker list. Warm BrainHub palette,
   mirrors the access panel (Acessos.razor.css) tokens. */

.imp-panel[b-fmvpb1utvr] { padding: 14px; }

/* ── Active impersonation banner ─────────────────────────────────────────── */
.imp-active[b-fmvpb1utvr] {
    display: flex; align-items: center; gap: 14px;
    background: rgba(224, 120, 32, .08);
    border: 1px solid rgba(224, 120, 32, .35);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.imp-active-avatar[b-fmvpb1utvr] {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    background: #e07820; color: #fff;
}
.imp-active-meta[b-fmvpb1utvr] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.imp-active-label[b-fmvpb1utvr] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #b06010;
}
.imp-active-name[b-fmvpb1utvr] { font-size: 15px; font-weight: 700; color: #3a3228; }
.imp-active-email[b-fmvpb1utvr] { font-size: 12.5px; color: #7a6e60; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.imp-search-wrap[b-fmvpb1utvr] { position: relative; margin-bottom: 12px; }
.imp-search-icon[b-fmvpb1utvr] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #b0a898; font-size: 14px; pointer-events: none;
}
.imp-search[b-fmvpb1utvr] {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 9px;
    padding: 10px 12px 10px 34px;
    font-size: 13.5px; color: #3a3228;
    transition: border-color .12s, box-shadow .12s;
}
.imp-search:focus[b-fmvpb1utvr] {
    outline: none; border-color: #e07820;
    box-shadow: 0 0 0 3px rgba(224, 120, 32, .12);
}

/* ── User list ───────────────────────────────────────────────────────────── */
.imp-list[b-fmvpb1utvr] {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 56vh; overflow-y: auto;
    padding-right: 2px;
}

.imp-row[b-fmvpb1utvr] {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 10px;
    transition: background-color .12s, border-color .12s;
}
.imp-row:hover[b-fmvpb1utvr] { background: rgba(0, 0, 0, .03); }
.imp-row.is-current[b-fmvpb1utvr] { background: rgba(224, 120, 32, .08); border-color: rgba(224, 120, 32, .35); }

.imp-row-avatar[b-fmvpb1utvr] {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: rgba(58, 110, 165, .12); color: #3a6ea5;
}
.imp-row.is-current .imp-row-avatar[b-fmvpb1utvr] { background: #e07820; color: #fff; }

.imp-row-meta[b-fmvpb1utvr] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.imp-row-name[b-fmvpb1utvr] { font-size: 14px; font-weight: 600; color: #3a3228; }
.imp-row-email[b-fmvpb1utvr] { font-size: 12px; color: #b0a898; }
.imp-row-warn[b-fmvpb1utvr] { font-size: 11.5px; color: #b06010; }

/* ── Buttons + badge ─────────────────────────────────────────────────────── */
.imp-btn[b-fmvpb1utvr] {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; padding: 7px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s, opacity .12s;
}
.imp-btn-start[b-fmvpb1utvr] {
    background: #fff; color: #3a3228;
    border: 1px solid rgba(0, 0, 0, .14);
}
.imp-btn-start:hover:not(:disabled)[b-fmvpb1utvr] { border-color: #e07820; color: #b06010; background: rgba(224, 120, 32, .06); }
.imp-btn-start:disabled[b-fmvpb1utvr] { opacity: .45; cursor: default; }

.imp-btn-stop[b-fmvpb1utvr] {
    background: #e07820; color: #fff; border: 1px solid #e07820; flex: none;
}
.imp-btn-stop:hover[b-fmvpb1utvr] { background: #c96a16; }

.imp-badge[b-fmvpb1utvr] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: #b06010; background: rgba(224, 120, 32, .14);
    border-radius: 999px; padding: 5px 12px;
}

.imp-empty[b-fmvpb1utvr] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: #b0a898; font-size: 13px;
    padding: 36px 16px;
}
.imp-empty i[b-fmvpb1utvr] { font-size: 28px; opacity: .4; }
/* /Components/Pages/Cockpit/Operations.razor.rz.scp.css */
/* Tabs + offshore mock styling for the Operations view.
   Reuses the global nnm-* dashboard styles for cards/charts/table. */

.ops-tabs[b-7qginwobpq] {
    display: flex;
    gap: 24px;
    margin: 4px 0 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ops-tab[b-7qginwobpq] {
    background: none;
    border: none;
    padding: 10px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #b0a898;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}

.ops-tab:hover[b-7qginwobpq] {
    color: #7a6e60;
}

.ops-tab.active[b-7qginwobpq] {
    color: #3a3228;
    border-bottom-color: #e07820;
}

/* Sub-tabs (Onshore / Offshore) inside the Custódias tab — lighter than main tabs */
.ops-subtabs[b-7qginwobpq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}

/* Reload + reference date + info, pushed to the end of the sub-tab row so the view has a
   single header line instead of a second toolbar underneath. */
.ops-subtabs-actions[b-7qginwobpq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ops-subtab[b-7qginwobpq] {
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #b0a898;
    cursor: pointer;
    border-radius: 999px;
    transition: color .15s, background-color .15s, border-color .15s;
}

.ops-subtab:hover[b-7qginwobpq] {
    color: #7a6e60;
}

.ops-subtab.active[b-7qginwobpq] {
    color: #fff;
    background: #e07820;
    border-color: #e07820;
}

/* Purpose segments (Total / AuM / AuA / AuC) inside Onshore — a second, quieter level:
   smaller and outline-only when active, so it doesn't compete with the sub-tabs above. */
.ops-segments[b-7qginwobpq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.ops-segment[b-7qginwobpq] {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #b0a898;
    cursor: pointer;
    border-radius: 999px;
    transition: color .15s, background-color .15s, border-color .15s;
}

.ops-segment:hover[b-7qginwobpq] {
    color: #7a6e60;
}

.ops-segment.active[b-7qginwobpq] {
    color: #e07820;
    background: rgba(224, 120, 32, .10);
    border-color: #e07820;
}

.ops-mock-banner[b-7qginwobpq] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(224, 120, 32, .08);
    border: 1px solid rgba(224, 120, 32, .25);
    color: #9a5a10;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* Year selector in the Cliente (new clients) toolbar */
.ops-year-lbl[b-7qginwobpq] {
    font-size: 13px;
    font-weight: 600;
    color: #7a6e60;
    margin-left: 4px;
}

.ops-year-select[b-7qginwobpq] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3a3228;
    cursor: pointer;
}

.ops-year-select:focus[b-7qginwobpq] {
    outline: none;
    border-color: #e07820;
}

/* Total row in the breakdown table */
[b-7qginwobpq] .ops-total-row td {
    font-weight: 700;
    border-top: 2px solid rgba(0, 0, 0, .12);
}

/* Months with at least one new client open the client drill-down, so they have to look
   clickable — the empty months stay inert and deliberately get none of this. ::deep,
   like .ops-total-row above, because the rows are rendered inside the shared table. */
[b-7qginwobpq] .ops-cli-mes-row { cursor: pointer; }
[b-7qginwobpq] .ops-cli-mes-row:hover { background: rgba(224, 120, 32, .08); }
[b-7qginwobpq] .ops-cli-mes-row:focus-visible {
    outline: 2px solid #e07820;
    outline-offset: -2px;
}

/* ── Client indicators ──────────────────────────────────────────────────────
   Bullet-style rows: label | track | current | previous year. Built in CSS rather
   than on a canvas because there is no Chart.js bullet type and the visual is five
   static rows — a plugin would be more code than the thing it draws. Same grid
   vocabulary as the tables above it, so the panel reads as part of the tab. */
.ops-cli-ind-panel[b-7qginwobpq] { margin-bottom: 12px; }

.ops-cli-ind-grid[b-7qginwobpq] {
    display: grid;
    /* Label sizes to its longest text; the track absorbs the slack. */
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px 14px;
    padding-top: 12px;
}

.ops-cli-ind-colhead[b-7qginwobpq] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nnm-muted);
}

.ops-cli-ind-label[b-7qginwobpq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--nnm-text2);
    white-space: nowrap;
}

.ops-cli-ind-track[b-7qginwobpq] {
    position: relative;
    height: 8px;
    min-width: 80px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .05);
}

/* The previous year, drawn first and kept quiet: it is the baseline, not the subject. */
.ops-cli-ind-ref[b-7qginwobpq] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--nnm-muted);
    opacity: .45;
    border-radius: 999px;
}

/* This year's value as a tick, not a fill: at the same position a fill would be
   indistinguishable from the bar behind it whenever the year improved. translateX
   centres the tick on its own position instead of starting at it. */
.ops-cli-ind-marker[b-7qginwobpq] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    border-radius: 2px;
    background: var(--nnm-text2);
    transform: translateX(-50%);
    transition: left .4s ease;
}

/* Colour only where a previous year exists to compare against — see CliIndicador. */
.ops-cli-ind-marker.up[b-7qginwobpq]   { background: #5f7a3c; }
.ops-cli-ind-marker.down[b-7qginwobpq] { background: #c06060; }

.ops-cli-ind-num[b-7qginwobpq] {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    min-width: 62px;
}

.ops-cli-ind-atual[b-7qginwobpq] { font-weight: 700; color: var(--nnm-text2); }
.ops-cli-ind-atual.up[b-7qginwobpq]   { color: #5f7a3c; }
.ops-cli-ind-atual.down[b-7qginwobpq] { color: #a84a4a; }

.ops-cli-ind-ref-val[b-7qginwobpq] { color: var(--nnm-muted); }

/* Chips do cliente no modal de carteiras por custodiante: espólio (accountcategorycode
   100000013) e distrato em andamento (statuscode 286250004). Tom neutro de propósito: o
   laranja da tela é o acento de seleção (segmento ativo), e um chip laranja aqui leria
   como estado, não como rótulo. */
.ops-cli-badge[b-7qginwobpq] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    color: var(--nnm-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* Distrato ganha cor porque é um estado de saída, não uma classificação estável como o
   espólio. Reaproveita o vermelho já usado nos indicadores acima (.down), para a tela não
   ganhar um vermelho novo só para isto. */
.ops-cli-badge.distrato[b-7qginwobpq] {
    border-color: rgba(168, 74, 74, .35);
    background: rgba(168, 74, 74, .08);
    color: #a84a4a;
}

@media (max-width: 700px) {
    .ops-cli-ind-grid[b-7qginwobpq] { gap: 8px 10px; }
    .ops-cli-ind-label[b-7qginwobpq] { white-space: normal; }
}
/* /Components/Pages/Comercial/Clientes.razor.rz.scp.css */
/* Scoped styles for the Comercial → Clientes screen (Blazor CSS isolation), same approach
   as Operations.razor.css.

   The pv-* detail-modal vocabulary below mirrors the equivalent rules in Prospects.razor's
   inline <style> block — the two screens share the same detail-panel language on purpose
   (section toggle, timeline, last call reports). The modal *chrome* (pv-modal,
   pv-modal-backdrop/head/body/foot/close, pv-search, pv-count) already lives in app.css and
   is not repeated here; only the pieces that were page-local are. Keep them visually in sync
   with Prospects if either side changes. */

.pv-detail-head[b-ue8leibvgm] { align-items: flex-start; }

.pv-detail-head-main[b-ue8leibvgm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pv-modal-scroll[b-ue8leibvgm] { flex: 1; overflow-y: auto; min-height: 0; }

/* The account's full name, beside the nickname in the h2. Subordinate on purpose: the
   nickname is how the desk refers to the client and stays the heading, this only
   disambiguates it. Prospects has no full name to show, so this one has no counterpart
   there — the rest of the pv-* vocabulary above still mirrors it. */
.cli-detail-fullname[b-ue8leibvgm] {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* The portfolio count in the detail header, when it opens the per-portfolio breakdown. Styled
   as the plain meta text beside it rather than as a button, so the header keeps its shape —
   only the hover and the chevron say it is clickable. */
.cli-carteiras-link[b-ue8leibvgm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.cli-carteiras-link:hover[b-ue8leibvgm] { color: var(--orange-dark); text-decoration: underline; }
.cli-carteiras-link .bi-chevron-right[b-ue8leibvgm] { font-size: 10px; }

/* The portfolio's own code, beside its name in the breakdown — subordinate, same idea as
   .cli-detail-fullname above. */
.cli-carteira-codigo[b-ue8leibvgm] {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* The contract's status reason, in the contracts breakdown. Three states only, because the
   provider loads active contracts alone: signed (in force), termination under way, and
   everything still being signed. */
/* Same shape and palette as the .doc-badge family in app.css, so a status pill reads the
   same wherever it appears. */
.cli-contrato-status[b-ue8leibvgm] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.cli-contrato-status-ok[b-ue8leibvgm]     { background: #dcfce7; color: #166534; }
.cli-contrato-status-alerta[b-ue8leibvgm] { background: #fee2e2; color: #991b1b; }
.cli-contrato-status-neutro[b-ue8leibvgm] { background: #f1f5f9; color: #475569; }

/* Icon-only contact actions (e-mail, WhatsApp) in the detail header. Fixed square so the
   disabled and enabled states occupy the same space. */
.cli-contact-btn[b-ue8leibvgm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex: none;
}

.pv-detail-meta[b-ue8leibvgm] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.pv-detail-meta span[b-ue8leibvgm] { display: inline-flex; align-items: center; gap: 6px; }

.pv-section-toggle[b-ue8leibvgm] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.pv-section-card[b-ue8leibvgm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--alt-bg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .15s, color .15s, border-color .15s;
}

.pv-section-card:hover[b-ue8leibvgm] { border-color: var(--orange); }
.pv-section-card i[b-ue8leibvgm] { font-size: 13px; }

.pv-section-card.active[b-ue8leibvgm] {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.pv-tasks-block[b-ue8leibvgm] { margin-top: 16px; }

.pv-tasks-head[b-ue8leibvgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* The shared label carries its own bottom margin, which the flex row already handles. */
.pv-tasks-head .cr-form-participantes-label[b-ue8leibvgm] { margin-bottom: 0; }

.pv-timeline[b-ue8leibvgm] { display: flex; flex-direction: column; gap: 10px; }

.pv-timeline-item[b-ue8leibvgm] {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--alt-bg);
}

.pv-timeline-date[b-ue8leibvgm] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 72px;
}

.pv-timeline-body[b-ue8leibvgm] { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pv-timeline-head[b-ue8leibvgm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pv-empty-hint[b-ue8leibvgm] { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.pv-detail-resumo[b-ue8leibvgm] { font-size: 13px; color: var(--text-main); margin: 10px 0 0; white-space: pre-wrap; }

.pv-last-crs[b-ue8leibvgm] { display: flex; flex-direction: column; gap: 12px; }
.pv-last-cr-item[b-ue8leibvgm] { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pv-last-cr-item:last-child[b-ue8leibvgm] { border-bottom: none; padding-bottom: 0; }

/* Offshore equity is illustrative — same treatment as Cockpit/Operations' offshore tab. */
.ops-mock-banner[b-ue8leibvgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(224, 120, 32, .08);
    border: 1px solid rgba(224, 120, 32, .25);
    color: #9a5a10;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* Horizontal scroll container for the client table — the four columns stay readable on
   narrow viewports instead of squeezing the name column to nothing. */
.kpi-table-wrap[b-ue8leibvgm] { overflow-x: auto; }

/* The client rows are clickable (they open the detail panel), so signal it. */
.kpi-table tbody tr[role="button"][b-ue8leibvgm] { cursor: pointer; }
.kpi-table tbody tr[role="button"]:hover[b-ue8leibvgm] { background: var(--alt-bg); }

/* Totals row of the group modal's member tables. The top border is what separates a summed
   figure from the rows it sums — without it the total reads as one more member. */
.cli-grupo-total td[b-ue8leibvgm] {
    border-top: 2px solid var(--border);
    background: var(--alt-bg);
}

/* The group modal stacks three blocks (clients, prospects, chart); the shared .pv-modal-body
   has no separator of its own, so the sections would run together. */
.pv-modal-scroll .pv-modal-body + .pv-modal-body[b-ue8leibvgm] { border-top: 1px solid var(--border); }

/* Modifier, not an override of the shared .cr-form-participantes-label: that class is
   display:block in app.css and the page's other uses depend on it. Only the label that
   carries an InfoPopover needs the trigger on its own baseline. */
.cli-label-info[b-ue8leibvgm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Compact cards. Scoped on purpose: .kpi-card/.kpi-cards-row in app.css are shared with
   Comercial → Visualizar KPIs, which keeps the roomier proportions. Two of the six cards
   lost their sub-caption, so the shared padding left visible dead space under the figure —
   these overrides tighten the box instead of letting the row grow taller than its content. */
.kpi-cards-row[b-ue8leibvgm] { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

.kpi-card[b-ue8leibvgm] { gap: 10px; padding: 12px; }

.kpi-card-icon[b-ue8leibvgm] { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }

.kpi-card-label[b-ue8leibvgm] { font-size: 11px; margin-bottom: 3px; }
.kpi-card-value[b-ue8leibvgm] { font-size: 19px; }

/* 12-month sparkline in the Patrimônio Onshore card. preserveAspectRatio="none" on the SVG
   lets it stretch to the card width, so the stroke is scaled non-uniformly — hence
   vector-effect, which keeps the line 1px regardless of that stretch. */
.kpi-card-spark[b-ue8leibvgm] {
    display: block;
    width: 100%;
    height: 26px;
    margin-top: 6px;
    overflow: visible;
}

.kpi-card-spark-line[b-ue8leibvgm] {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.kpi-card-spark-area[b-ue8leibvgm] { stroke: none; }

/* Coloured by the series' own direction (SparkTrend). A near-flat series gets neither
   colour: forcing green or red onto noise would assert a trend the data does not carry. */
.kpi-card-spark-line.up[b-ue8leibvgm]     { stroke: #15803d; }
.kpi-card-spark-area.up[b-ue8leibvgm]     { fill: rgba(21, 128, 61, .12); }

.kpi-card-spark-line.down[b-ue8leibvgm]   { stroke: #b91c1c; }
.kpi-card-spark-area.down[b-ue8leibvgm]   { fill: rgba(185, 28, 28, .12); }

.kpi-card-spark-line.flat[b-ue8leibvgm]   { stroke: var(--text-muted); }
.kpi-card-spark-area.flat[b-ue8leibvgm]   { fill: color-mix(in srgb, var(--text-muted) 12%, transparent); }

/* ── ROA reference: client vs its advisor's whole book ─────────────────────────
   Same vocabulary as the Operations indicators panel: the bar is the reference level and
   the marker is the figure being placed against it. Both sit on one origin-anchored axis,
   which is what makes the two lengths comparable. CSS rather than a chart library — it is
   one static row. */
.cli-roa-ref[b-ue8leibvgm] { padding-top: 6px; }

.cli-roa-ref-value[b-ue8leibvgm] {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

/* The client's own figure carries the verdict: at or above its advisor, or below. */
.cli-roa-ref-value.up[b-ue8leibvgm]   { color: #15803d; }
.cli-roa-ref-value.down[b-ue8leibvgm] { color: #b91c1c; }

.cli-roa-ref-track[b-ue8leibvgm] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
}

/* The advisor's level, kept quiet: it is the reference, not the subject. */
.cli-roa-ref-band[b-ue8leibvgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--orange) 35%, transparent);
    /* An advisor ROA near zero would otherwise render an invisible bar. */
    min-width: 3px;
}

.cli-roa-ref-marker[b-ue8leibvgm] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    border-radius: 2px;
    /* Centres the marker on its value rather than starting at it. */
    transform: translateX(-50%);
}

.cli-roa-ref-marker.up[b-ue8leibvgm]   { background: #15803d; }
.cli-roa-ref-marker.down[b-ue8leibvgm] { background: #b91c1c; }

.cli-roa-ref-scale[b-ue8leibvgm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.cli-roa-ref-scale strong[b-ue8leibvgm] { color: var(--text-main); font-variant-numeric: tabular-nums; }
.cli-roa-ref-count[b-ue8leibvgm] { white-space: nowrap; }

/* "Próxima reunião" cell. A date that is only sometimes there reads better as a quiet chip
   than as bare text next to the money columns — it marks the value as coming from the user's
   own calendar rather than from the same load as the rest of the row. */
.cli-reuniao[b-ue8leibvgm] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
    background: color-mix(in srgb, var(--orange) 18%, transparent);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* KPI donut carousel widget */
.kpi-donut-carousel[b-dbb54rup6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0 2px;
    transition: opacity .35s ease;
}

.kpi-donut-title[b-dbb54rup6n] {
    font-size: 12px;
    font-weight: 600;
    color: #3a3228;
    text-align: center;
    min-height: 15px;
}

.kpi-donut-canvas-wrap[b-dbb54rup6n] {
    position: relative;
    width: 116px;
    height: 116px;
}

.kpi-donut-sub[b-dbb54rup6n] {
    font-size: 11px;
    color: #b0a898;
    min-height: 14px;
}

.kpi-donut-dots[b-dbb54rup6n] {
    display: flex;
    gap: 5px;
    margin-top: 2px;
}

/* Dots are created by the JS module, so they live outside the scoped tree — target with ::deep */
[b-dbb54rup6n] .kpi-donut-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8d0c4;
    transition: background .2s ease;
}

[b-dbb54rup6n] .kpi-donut-dot.active {
    background: #e07820;
}
/* /Components/Pages/Middle/OnboardingKpis.razor.rz.scp.css */
/* Scoped styles for the onboarding KPI screen.
   The nnm-* classes shared with the other dashboards live in app.css and are global; the
   filter pills come from the app-wide .bday-filter pattern used by Meu Painel and Call
   Reports. What is left here is this screen's own spacing and the two elements it adds. */

.onb-alert[b-qxmpdakx0l] {
    margin-bottom: 16px;
}

/* .cmp-tabs is the app-wide tab strip and carries no bottom margin, so the filter row below
   would sit against it. */
.onb-tabs[b-qxmpdakx0l] {
    margin-bottom: 18px;
}

/* Sits directly under the denominator strip, which already has its own bottom margin - this
   pulls the note up against the thing it qualifies instead of floating between blocks. */
.onb-twins-note[b-qxmpdakx0l] {
    margin-top: -8px;
    margin-bottom: 18px;
}

/* The base floor sits between the filter row and the figures, and belongs to the filters: it
   says what the year and month pickers can reach. .onb-chart-note supplies the type; this only
   closes the gap the toolbar leaves below itself. */
.onb-floor-note[b-qxmpdakx0l] {
    margin-top: -6px;
    margin-bottom: 16px;
}

.onb-toolbar-right[b-qxmpdakx0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* The shared .nnm-kpi-row is a six-column grid, sized for dashboards that fill it. This
   screen has two cards, so it sets its own track count - otherwise both sit squeezed at one
   sixth of the width with four empty columns beside them. */
.nnm-kpi-row[b-qxmpdakx0l] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

@media (max-width: 700px) {
    .nnm-kpi-row[b-qxmpdakx0l] { grid-template-columns: 1fr; }
}

.onb-kpi-help[b-qxmpdakx0l] {
    opacity: .7;
}

/* The denominator is part of the number, not a footnote: both KPIs only cover the fichas
   that reached the Middle hand-off, and the figure is indefensible without it on screen.
   Tinted with the app accent rather than reusing .ops-mock-banner, whose job on the other
   dashboards is to warn that the figures are simulated - these are real. */
.onb-denominator[b-qxmpdakx0l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--orange) 8%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border));
    color: var(--orange-dark);
    padding: 11px 15px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
}

.onb-denominator b[b-qxmpdakx0l] {
    font-weight: 600;
}

/* .nnm-panel carries no margin of its own, so consecutive panels touch. The two tables are
   separate readings - an aggregate and a per-ficha list - and the spacing has to say so. */
.onb-panels[b-qxmpdakx0l] {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Totals row: heavier than the body without a hard rule, which reads as a section break in
   a table this short. */
.onb-total-row td[b-qxmpdakx0l] {
    font-weight: 600;
    border-top: 1px solid var(--border);
}

/* The standing is the occurrence's current razão de status, straight from Dataverse. A chip
   keeps it legible as data rather than prose, and lets the column be scanned down. */
.onb-chip[b-qxmpdakx0l] {
    display: inline-block;
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* Colour carries the two-state reading - closed or still moving - while the text keeps the
   status itself, so the column can be both scanned and read. The app's own soft status tints,
   the same pair behind .bg-success-soft and .bg-warning-soft, rather than new colours. */
.onb-chip-done[b-qxmpdakx0l] {
    background: var(--status-success-bg);
}

.onb-chip-open[b-qxmpdakx0l] {
    background: var(--status-warning-bg);
}

.onb-td-quiet[b-qxmpdakx0l] {
    color: var(--text-secondary);
    font-size: 12.5px;
}

/* The bypassed list is the chart's complement, so it reads as an explanation rather than a
   third metric: the help line sits inside the panel, above the scroll area. */
.onb-bypassed-help[b-qxmpdakx0l] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -2px 0 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* The path is the one cell that legitimately wraps - a chain runs to seven statuses, and
   truncating it hides exactly the part being looked for. The rest of the table stays on one
   line, so the column is given room instead of the whole row growing. */
.onb-td-path[b-qxmpdakx0l] {
    white-space: normal;
    min-width: 260px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* The chart and the tables are separate readings, and the spacing has to say so - .nnm-panel
   carries no margin of its own. */
.onb-panels-tables[b-qxmpdakx0l] {
    margin-top: 26px;
}

/* Os dois agregados lado a lado: a pizza diz de que a base é feita e as barras dizem quanto
   cada tipo demora — ler uma respondendo a outra é o ponto. Quebram em coluna antes de a pizza
   ficar pequena demais para caber a legenda dos cinco tipos. */
.onb-panels-charts[b-qxmpdakx0l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 26px;
}

@media (max-width: 1100px) {
    .onb-panels-charts[b-qxmpdakx0l] {
        grid-template-columns: 1fr;
    }
}

/* Taller than the shared 260px: twelve months of bars plus the value labels above each bar
   and each line point need the room, or the labels collide with the plot. */
.onb-chart-wrap[b-qxmpdakx0l] {
    height: 300px;
}

/* The line averages only the measured fichas while the bars count them all, so the caveat
   sits with the chart it qualifies rather than in a legend nobody reads. */
.onb-chart-note[b-qxmpdakx0l] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
/* /Components/SearchableSelect.razor.rz.scp.css */
.ss-wrap[b-vg2x85q7s2] {
    position: relative;
    width: 100%;
}

.ss-input[b-vg2x85q7s2] {
    width: 100%;
    padding-right: 30px;
}

.ss-clear[b-vg2x85q7s2] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ss-clear:hover[b-vg2x85q7s2] { background: var(--border); color: var(--text-title); }

.ss-suggestions[b-vg2x85q7s2] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

.ss-suggestion[b-vg2x85q7s2] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.ss-suggestion:hover[b-vg2x85q7s2] { background: var(--alt-bg); }

/* .ss-no-results itself sits on the wrapper this component renders (so it keeps this
   file's scope attribute and inherits max-height/overflow/etc. from .ss-suggestions),
   but its *content* comes from the caller's NoResultsTemplate — a RenderFragment
   keeps the scope of the .razor file that authored the markup, not this one. Any
   classes used inside the template (e.g. a "create new" button/text) must be styled
   from the consuming page's own stylesheet, not from here. */
.ss-no-results[b-vg2x85q7s2] { padding: 10px 8px; display: flex; flex-direction: column; align-items: flex-start; }

.ss-suggestion-label[b-vg2x85q7s2] { font-size: 13px; font-weight: 600; color: var(--text-title); }
.ss-suggestion-sub[b-vg2x85q7s2] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}