/* CloudInventory — shared styles. Embedded in portal Layout. */

/* ──────────────── Hub (tabbed) ──────────────── */
.ci-hub {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 104px);
    gap: 6px;
}

.ci-hub-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: auto;
}

/* Inside the hub, the dashboard fills the area below the tabs (override viewport cap). */
.ci-hub-body .lcdashboard {
    max-height: none !important;
    min-height: 100% !important;
}

.ci-hub-body .ci-rel-page,
.ci-hub-body .ci-rd-page {
    height: 100%;
}

.ci-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e2e6f3;
    flex: 0 0 auto;
}

.ci-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #5b6472;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ci-tab:hover {
    background: rgba(47, 107, 255, 0.06);
    color: #2f6bff;
}

.ci-tab.active {
    background: #fff;
    color: #173192;
    border-color: #e2e6f3;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.ci-tab-ico {
    display: inline-flex;
    align-items: center;
}

/* Clickable RevoGrid rows (drill-down) */
.ci-grid-clickable .revogr-data .rgRow:hover {
    background: rgba(47, 107, 255, 0.06);
    cursor: pointer;
}

/* Explanatory / honest-state panels (screens with no inventory source yet). */
.ci-explain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    height: 100%;
    min-height: 240px;
    padding: 24px;
}

.ci-explain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eef3ff;
    color: #2f6bff;
}

.ci-explain h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2b2f3a;
}

.ci-explain p {
    margin: 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.ci-explain-steps {
    text-align: left;
    max-width: 560px;
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #4b5161;
}

.ci-explain-cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #2f6bff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.ci-explain-cta:hover {
    background: #2559db;
}

.ci-explain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #fff4e5;
    color: #b86e00;
    font-size: 12px;
    font-weight: 600;
}

/* RevoGrid wrapper (matches tagsCompliance tc-grid-wrapper behavior) */
.ci-grid-wrapper {
    width: 100%;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
}

.ci-grid-wrapper revo-grid {
    width: 100%;
    height: 100%;
    font-size: 12px;
}

/* Right / center aligned cells (decimal alignment for financial columns) */
.revo-cell--right .rgCell,
.revo-cell--right {
    text-align: right !important;
    justify-content: flex-end !important;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.revo-cell--center .rgCell,
.revo-cell--center {
    text-align: center !important;
    justify-content: center !important;
}

/* Status badge */
.ci-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ci-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

/* Pill (criticality / level) */
.ci-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.ci-provider-tag {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ci-muted {
    color: #9aa1b1;
    font-weight: 400;
}

.ci-sample-note {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #6b7280;
    background: #f6f8fc;
    border: 1px solid #e6eaf3;
    border-radius: 6px;
    text-align: center;
}

/* KPI trend (↑ x% vs período) */
.ci-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Donut legend (right side of charts, mockup style) */
.ci-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ci-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4a5163;
}

.ci-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}

.ci-legend-name {
    flex: 1 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-legend-val {
    font-weight: 600;
    color: #2b3240;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Donut center overlay */
.ci-donut-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.ci-donut-center strong {
    font-size: 20px;
    color: #2b3240;
    line-height: 1.1;
}

.ci-donut-center span {
    font-size: 11px;
    color: #9aa1b1;
}

/* Resource name cell (two-line: name + sub) */
.ci-res-cell {
    display: block;
    overflow: hidden;
}

.ci-res-cell .ci-res-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #2f6bff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-res-cell .ci-res-sub {
    display: block;
    font-size: 10px;
    color: #9aa1b1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Filter bar */
.ci-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.ci-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.ci-filter label {
    font-size: 11px;
    color: #8b90a3;
    font-weight: 600;
}

.ci-filter select,
.ci-filter input {
    height: 34px;
    border: 1px solid #e2e6f3;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #2b3240;
    background: #fff;
    outline: none;
}

.ci-filter select:focus,
.ci-filter input:focus {
    border-color: #2f6bff;
}

.ci-filterbar-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Filtros dentro do side modal (padrão do sistema) */
.ci-filterbar--panel {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
}

.ci-filterbar--panel .ci-filter {
    width: 100%;
    min-width: 0;
}

.ci-filterbar--panel .ci-filter select,
.ci-filterbar--panel .ci-filter input {
    width: 100%;
}

.ci-filterbar--panel .ci-filterbar-actions {
    margin-left: 0;
    margin-top: 8px;
}

.ci-filterbar--panel .ci-prov-scope {
    align-self: flex-start;
}

/* Sync status bar */
.ci-syncbar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    font-size: 12px;
    color: #4a5163;
}

.ci-syncbar .ci-sync-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ci-syncbar .ci-sync-metric small {
    color: #8b90a3;
}

.ci-syncbar .ci-sync-metric strong {
    font-size: 14px;
    color: #2b3240;
}

/* Dashboard Executivo (#10) — strip de provedores. */

.ci-exec-prov-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    align-content: start;
    overflow: auto;
}

.ci-exec-prov {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e9edf6;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.14s ease, border-color 0.14s ease;
}

.ci-exec-prov:hover {
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.08);
    border-color: #dfe5f1;
}

.ci-exec-prov-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ci-exec-prov-name {
    flex: 1 1;
    font-size: 12px;
    font-weight: 600;
    color: #2b2f3a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-exec-prov-val {
    font-size: 14px;
    font-weight: 700;
    color: #1f2533;
}

.ci-exec-prov-share {
    font-size: 11px;
    font-weight: 700;
    min-width: 42px;
    text-align: right;
}

/* Per-provider inventory dashboard — provider-agnostic (aws/azure/gcp/oci). */

.ci-prov-scope {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 14px;
    background: #fff;
    white-space: nowrap;
}

.ci-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 100%;
}

.ci-account-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #eef1f7;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ci-account-list li:hover {
    background: #f6f8fc;
}

.ci-account-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ci-account-id {
    flex: 1 1;
    font-size: 13px;
    color: #2b2f3a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-account-go {
    color: #9aa1b1;
    flex: 0 0 auto;
}

.mc-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100vh - 170px);
    background: #F4F6FA;
    color: #1F2733;
}

.mc-page:fullscreen {
    background: #F4F6FA;
    padding: 16px;
    overflow: auto;
}

/* Header */
.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 12px;
    padding: 12px 18px;
}

.mc-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563EB, #0EA5C6);
    color: #fff;
    font-size: 18px;
}

.mc-header-title h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #131C2B;
}

.mc-header-title p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #8A93A6;
}

.mc-sync-ok {
    color: #16A34A;
    font-weight: 600;
}

.mc-sync-loading {
    color: #2563EB;
    font-weight: 600;
}

.mc-sync-warn {
    color: #B45309;
    font-weight: 600;
}

.mc-sync-err {
    color: #DC2626;
    font-weight: 600;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

.mc-spin {
    animation: mc-spin 0.9s linear infinite;
}

.mc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-header-actions button,
.mc-export > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    background: #FFFFFF;
    color: #36425A;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.mc-header-actions button:hover,
.mc-export > button:hover {
    background: #F3F6FC;
    border-color: #C9D2E3;
}

.mc-export {
    position: relative;
}

.mc-export-menu {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    background: #fff;
    border: 1px solid #E1E5EE;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(20, 30, 50, 0.14);
    padding: 6px;
}

.mc-export-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #36425A;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.mc-export-menu button:hover {
    background: #F1F5FC;
}

/* Cards */
.mc-cards {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-gap: 10px;
    gap: 10px;
}

.mc-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 11px;
    padding: 12px 13px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}

.mc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #2563EB;
    background: var(--accent, #2563EB);
    opacity: .85;
}

.mc-card:hover {
    border-color: #CBD6EC;
    box-shadow: 0 6px 18px rgba(30, 45, 80, 0.08);
    transform: translateY(-1px);
}

.mc-card-icon {
    font-size: 15px;
}

.mc-card-value {
    font-size: 17px;
    font-weight: 700;
    color: #14203A;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mc-card-label {
    font-size: 11px;
    color: #7C879B;
    line-height: 1.2;
}

/* Filters */
.mc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 12px;
    padding: 12px 14px;
}

.mc-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.mc-filter label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #93A0B4;
}

.mc-filter select,
.mc-filter input {
    height: 32px;
    border: 1px solid #DEE3EE;
    border-radius: 7px;
    padding: 0 9px;
    font-size: 12.5px;
    background: #FBFCFE;
    color: #2A3650;
    outline: none;
}

.mc-filter select:focus,
.mc-filter input:focus {
    border-color: #2563EB;
    background: #fff;
}

.mc-filter--text {
    min-width: 180px;
    flex: 1 1 180px;
}

.mc-filter-range {
    display: flex;
    gap: 6px;
}

.mc-filter-range input {
    width: 78px;
}

.mc-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #E1E5EE;
    border-radius: 7px;
    background: #fff;
    color: #5A6478;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mc-filter-clear:hover {
    background: #F3F6FC;
    border-color: #C9D2E3;
}

/* Apply/Clear action row at the bottom of the filter panel */
.mc-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.mc-filter-actions .mc-filter-clear {
    flex: 0 0 auto;
}

.mc-filter-apply {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #8C40E3;
    border: 1px solid var(--color-primary-purple, #8C40E3);
    border-radius: 7px;
    background: #8C40E3;
    background: var(--color-primary-purple, #8C40E3);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.mc-filter-apply:hover:not(:disabled) {
    background: #7A2FD0;
    border-color: #7A2FD0;
}

.mc-filter-apply:disabled {
    background: #C9CEDB;
    border-color: #C9CEDB;
    color: #fff;
    cursor: default;
}

/* Filters inside the side filter modal (system standard panel) */
.mc-filters--panel {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 14px;
}

.mc-filters--panel .mc-filter {
    width: 100%;
    min-width: 0;
}

.mc-filters--panel .mc-filter select,
.mc-filters--panel .mc-filter input {
    width: 100%;
}

.mc-filters--panel .mc-filter--text {
    flex: none;
    min-width: 0;
}

.mc-filters--panel .mc-filter-range {
    width: 100%;
}

.mc-filters--panel .mc-filter-range input {
    flex: 1 1;
    width: auto;
}

.mc-toggles--panel {
    margin-top: 16px;
}

.mc-filters--panel + .mc-toggles--panel + .mc-filter-clear {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

/* Toggles */
.mc-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px 0 8px;
    border: 1px solid #E4E8F1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #5C6678;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.mc-toggle-switch {
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: #D3DAE6;
    position: relative;
    transition: background .15s;
    flex: 0 0 auto;
}

.mc-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.mc-toggle--on {
    border-color: #2563EB;
    color: #1D4ED8;
    background: #EEF4FF;
}

.mc-toggle--on .mc-toggle-switch {
    background: #2563EB;
}

.mc-toggle--on .mc-toggle-switch::after {
    transform: translateX(11px);
}

/* View mode + overlay bars */
.mc-bars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 12px;
    padding: 10px 14px;
}

.mc-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-bar-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #93A0B4;
}

.mc-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #F1F4F9;
    border-radius: 9px;
    padding: 3px;
}

.mc-segment button {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #5C6678;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}

.mc-segment button:hover {
    color: #2563EB;
}

.mc-segment .mc-seg-on {
    background: #FFFFFF;
    color: #1D4ED8;
    box-shadow: 0 1px 3px rgba(30, 45, 80, 0.12);
}

.mc-segment--overlay .mc-seg-on {
    color: #0F766E;
}

/* Body + canvas */
.mc-body {
    flex: 1 1;
    display: flex;
    gap: 12px;
    min-height: 540px;
}

.mc-canvas-area {
    position: relative;
    flex: 1 1;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 12px;
    overflow: hidden;
}

.mc-canvas-wrap {
    width: 100%;
    height: 100%;
}

.mc-graph-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mc-graph-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-graph-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #DCE2EE;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    color: #36425A;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 45, 80, 0.08);
    transition: all .12s;
}

.mc-graph-toolbar button:hover {
    border-color: #2563EB;
    color: #1D4ED8;
}

.mc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mc-empty--loading {
    flex-direction: column;
    gap: 14px;
}

.mc-empty--stack {
    flex-direction: column;
    gap: 6px;
}

.mc-empty-text {
    font-size: 13px;
    font-weight: 600;
    color: #5A6478;
}

.mc-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #DCE2EE;
    border-top-color: #2563EB;
    animation: mc-spin 0.8s linear infinite;
}

.mc-retry {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #2563EB;
    border-radius: 8px;
    background: #2563EB;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mc-retry:hover {
    background: #1D4ED8;
}

.mc-clearfocus {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #DCE2EE;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #36425A;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 45, 80, 0.08);
}

.mc-clearfocus:hover {
    border-color: #2563EB;
    color: #1D4ED8;
}

.mc-cap-note {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 88%;
    padding: 7px 14px;
    border: 1px solid #DCE2EE;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    color: #5A6478;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(30, 45, 80, 0.1);
}

.mc-cap-note svg {
    color: #2563EB;
    flex-shrink: 0;
}

.mc-graph-loading {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #DCE2EE;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    color: #36425A;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(30, 45, 80, 0.1);
}

.mc-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.mc-hint-inline {
    color: #8A93A6;
    font-weight: 600;
}

/* React Flow surface */
.mc-canvas-wrap .react-flow__attribution {
    display: none;
}

.mc-canvas-wrap .react-flow__controls {
    box-shadow: 0 4px 14px rgba(30, 45, 80, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.mc-canvas-wrap .react-flow__minimap {
    border: 1px solid #E5E9F1;
    border-radius: 8px;
}

/* Resource node */
.mc-node {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1.4px solid #E5E8EF;
    border-radius: 10px;
    padding: 8px 10px 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.05);
    overflow: hidden;
    transition: box-shadow .12s, border-color .12s, opacity .12s;
}

.mc-node--dimmed {
    opacity: 0.32;
}

.mc-node--selected {
    border-color: #2563EB;
}

.mc-node-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.mc-node-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-node-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.mc-node-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #1B2536;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1;
}

.mc-node-flags {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.mc-node-sub {
    font-size: 10.5px;
    color: #8A93A6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-node-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.mc-node-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: #5B6478;
}

.mc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mc-node-metric {
    font-size: 11px;
    font-weight: 700;
    color: #243049;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    max-width: 50%;
}

.mc-node-metric--warn {
    color: #B45309;
}

.mc-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.mc-node-tag {
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
    background: #EEF1F6;
    border-radius: 5px;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

.mc-node-tag--warn {
    color: #B45309;
    background: #FEF3E2;
}

.mc-node-costbar {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 3px;
    background: #EEF1F6;
    border-radius: 3px;
    overflow: hidden;
}

.mc-node-costbar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* Group container node */
.mc-group {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
}

.mc-group-header {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E5E9F1;
    border-left: 3px solid currentColor;
    border-radius: 7px;
}

.mc-group-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.mc-group-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #1B2536;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-group-type {
    font-size: 10px;
    color: #94A0B4;
    white-space: nowrap;
}

.mc-group-stats {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.mc-group-count {
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.mc-group-cost {
    font-size: 10px;
    font-weight: 700;
    color: #16A34A;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.mc-group-alert {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #DC2626;
}

/* Provider group node */
.mc-provider {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1.8px solid #CBD5E1;
    border-radius: 16px;
}

.mc-provider-header {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid;
    border-radius: 9px;
}

.mc-provider-brand {
    display: inline-flex;
    flex: 0 0 auto;
}

.mc-provider-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #14203A;
    white-space: nowrap;
}

.mc-provider-stats {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: #5B6478;
}

.mc-provider-stats strong {
    color: #1B2536;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.mc-provider-cost {
    font-weight: 700;
    color: #16A34A;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.mc-provider-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: #DC2626;
}

/* Legend */
.mc-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #E5E9F1;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(30, 45, 80, 0.1);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    max-width: 560px;
}

.mc-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 30px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #36425A;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.mc-legend-body {
    display: flex;
    gap: 18px;
    padding: 4px 14px 12px;
}

.mc-legend-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-legend-h {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94A0B4;
    margin-bottom: 2px;
}

.mc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #4A5568;
}

.mc-legend-line {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px solid currentColor;
}

.mc-legend-line--dash {
    border-top-style: dashed;
}

.mc-legend-line--dot {
    border-top-style: dotted;
    border-top-width: 2.5px;
}

.mc-legend-note {
    color: #94A0B4;
    font-style: italic;
}

/* Details panel */
.mc-detail-panel {
    flex: 0 0 340px;
    width: 340px;
    background: #FFFFFF;
    border: 1px solid #E9ECF3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-detail-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #EEF1F6;
}

.mc-detail-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #14203A;
}

.mc-detail-close {
    width: 26px;
    height: 26px;
    border: 1px solid #E5E9F1;
    border-radius: 7px;
    background: #fff;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-detail-close:hover {
    background: #F3F6FC;
}

.mc-detail-panel-body {
    flex: 1 1;
    overflow-y: auto;
    padding: 14px;
}

.mc-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 50px 20px;
    color: #94A0B4;
    font-size: 13px;
}

.mc-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mc-detail-head-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.mc-detail-head-text {
    flex: 1 1;
    min-width: 0;
}

.mc-detail-title {
    font-size: 15px;
    font-weight: 700;
    color: #14203A;
    word-break: break-word;
}

.mc-detail-subtitle {
    font-size: 11.5px;
    color: #8A93A6;
}

.mc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.mc-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: #EEF1F6;
    color: #4A5568;
}

.mc-chip--warn {
    background: #FEF3E2;
    color: #B45309;
}

.mc-chip--muted {
    background: #EEF1F6;
    color: #64748B;
}

.mc-chip--cross {
    background: #E8EAF6;
    color: #111827;
}

.mc-detail-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94A0B4;
    margin: 16px 0 8px;
}

.mc-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.mc-detail-label {
    color: #8A93A6;
    flex: 0 0 auto;
}

.mc-detail-value {
    color: #243049;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.mc-detail-value--num {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.mc-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mc-tagchip {
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    background: #EEF1F6;
    border-radius: 6px;
    padding: 2px 7px;
}

.mc-detail-deps {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mc-detail-dep {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid #EEF1F6;
    border-radius: 8px;
    background: #FBFCFE;
    cursor: pointer;
    text-align: left;
}

.mc-detail-dep:hover {
    border-color: #C9D6F0;
    background: #F4F8FF;
}

.mc-detail-dep-type {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6366F1;
    flex: 0 0 auto;
}

.mc-detail-dep-name {
    font-size: 12px;
    font-weight: 600;
    color: #243049;
    flex: 1 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-detail-empty {
    font-size: 12px;
    color: #94A0B4;
}

.mc-detail-related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mc-detail-related-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #EEF1F6;
    border-radius: 8px;
    background: #FBFCFE;
    font-size: 11.5px;
    font-weight: 600;
    color: #36425A;
    cursor: pointer;
}

.mc-detail-related-item:hover {
    border-color: #C9D6F0;
    background: #F4F8FF;
}

.mc-detail-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-detail-alert {
    border: 1px solid #EEF1F6;
    border-left: 3px solid #94A0B4;
    border-radius: 8px;
    padding: 8px 10px;
    background: #FBFCFE;
}

.mc-detail-alert--critical {
    border-left-color: #DC2626;
    background: #FEF2F2;
}

.mc-detail-alert--warning {
    border-left-color: #D97706;
    background: #FFFBEB;
}

.mc-detail-alert--info {
    border-left-color: #2563EB;
    background: #EFF6FF;
}

.mc-detail-alert-title {
    font-size: 12px;
    font-weight: 700;
    color: #1B2536;
}

.mc-detail-alert-desc {
    font-size: 11.5px;
    color: #5B6478;
    margin-top: 2px;
}

.mc-detail-alert-meta {
    font-size: 10px;
    color: #94A0B4;
    margin-top: 4px;
}

.mc-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 6px;
    gap: 6px;
}

.mc-detail-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    background: #FFFFFF;
    color: #36425A;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.mc-detail-actions button:hover {
    background: #F3F6FC;
    border-color: #C9D2E3;
}

.mc-detail-relendpoints {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}

.mc-detail-endpoint {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid #EEF1F6;
    border-radius: 9px;
    background: #FBFCFE;
    cursor: pointer;
    text-align: left;
}

.mc-detail-endpoint:hover {
    border-color: #C9D6F0;
    background: #F4F8FF;
}

.mc-detail-endpoint-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94A0B4;
}

.mc-detail-endpoint-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #1B2536;
    word-break: break-word;
}

.mc-detail-relarrow {
    align-self: center;
    color: #94A0B4;
    font-size: 16px;
}

.mc-detail-desc {
    font-size: 12px;
    color: #4A5568;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1500px) {
    .mc-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .mc-body {
        flex-direction: column;
    }
    .mc-detail-panel {
        flex: 0 0 auto;
        width: 100%;
    }
    .mc-canvas-area {
        min-height: 520px;
    }
}

@media (max-width: 720px) {
    .mc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Detalhes do Recurso (mockup #5) */

.ci-rd-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px;
}

.ci-rd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8b90a3;
}

.ci-rd-crumb-link {
    color: #2f6bff;
    cursor: pointer;
}

.ci-rd-breadcrumb strong { color: #2b3240; }

/* Header */
.ci-rd-header {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 16px 20px;
}

.ci-rd-id {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
    border-right: 3px solid #eef0f4;
    min-width: 240px;
}

.ci-rd-id-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f5f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-rd-name {
    font-size: 18px;
    font-weight: 700;
    color: #2b3240;
}

.ci-rd-type { font-size: 12px; color: #8b90a3; }

.ci-rd-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    flex: 1 1;
}

.ci-rd-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ci-rd-field { display: flex; flex-direction: column; gap: 3px; }

.ci-rd-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #8b90a3;
}

.ci-rd-field-value {
    font-size: 13px;
    color: #2b3240;
    font-weight: 600;
}

.ci-rd-field-value.mono {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    word-break: break-all;
}

/* Tabs (LcCategoryTabs — barOnly). Sits as a content-height row in the page flex column. */
.ci-rd-cattabs.lct-container {
    height: auto;
}

.ci-rd-tabcontent { min-height: 200px; }

.ci-rd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
    gap: 12px;
}

.ci-rd-grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    gap: 12px;
}

@media (max-width: 1100px) {
    .ci-rd-grid { grid-template-columns: repeat(2, 1fr); }
}

.ci-rd-panel {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ci-rd-panel h4 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #2b3240;
}

.ci-rd-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.ci-rd-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ci-rd-tag {
    background: #f5f7fb;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    color: #4a5163;
}

.ci-rd-rel {
    text-align: left;
    border: 0;
    background: transparent;
    padding: 6px 0;
    font-size: 12px;
    color: #4a5163;
    cursor: pointer;
    border-bottom: 1px solid #f5f7fb;
}

.ci-rd-rel:hover { color: #2f6bff; }
.ci-rd-rel-type { color: #2f6bff; font-weight: 600; }

/* Mapa de relacionamentos */
.ci-rd-map {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 16px 20px;
}

.ci-rd-map-title { font-size: 13px; font-weight: 600; color: #2b3240; margin-bottom: 12px; }

.ci-rd-map-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.ci-rd-map-node {
    flex: 0 0 auto;
    width: 120px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.ci-rd-map-node:hover { border-color: #2f6bff; box-shadow: 0 2px 8px rgba(47,107,255,0.08); }

.ci-rd-map-icon { color: #2f6bff; }
.ci-rd-map-name { font-size: 12px; font-weight: 600; color: #2b3240; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-rd-map-type { font-size: 10px; color: #9aa1b1; }
.ci-rd-map-link { color: #c7cdda; display: flex; align-items: center; }

.pp-expand > .header {
    border-bottom: solid 1px #CCCCCF !important;
    display: flex;
    justify-content: space-between;
}

/* Elemento pai que envolve o conteúdo dos filtros do Orçamento/consumo.
   Quando o painel lateral é fixado (pinned), o LCDashboard o expande para 100%
   da tela. Em vez de forçar o width do painel/componente, limitamos a largura
   pelo container pai do filtro — mantém a UI bem dimensionada em ambos os modos. */
.budget-filters-host {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* Cores semanticas para Budget - FinOps */

/* Saldo positivo - economia */
.budget-positive {
    color: var(--text-default);
    font-weight: 600;
}

/* Saldo negativo - estouro */
.budget-negative {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Neutro */
.budget-neutral {
    color: var(--text-default);
}

/* Consumo excelente - ate 70% do orcamento */
.budget-excellent {
    color: var(--text-default);
}

/* Consumo bom - ate 90% do orcamento */
.budget-good {
    color: var(--text-default);
}

/* Consumo alerta - ate 100% do orcamento */
.budget-warning {
    color: #ca8a04 !important;
}

/* Consumo perigo - acima do orcamento */
.budget-danger {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Container do valor com icone */
.budget-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Ubuntu", sans-serif;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Icone de sucesso (seta para baixo = economia) */
.budget-icon-success {
    color: #16a34a;
    flex-shrink: 0;
}

/* Icone de perigo (seta para cima = aumento) */
.budget-icon-danger {
    color: #dc2626;
    flex-shrink: 0;
}

/* Icone de alerta (aviso consumo > 80%) */
.budget-icon-warning {
    color: #ca8a04;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Cards de resumo executivo */
.budget-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px;
    background: transparent;
}

.budget-summary-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
    opacity: 0.8;
}

.budget-summary-icon.blue { color: var(--color-primary-blue); }
.budget-summary-icon.green { color: #16a34a; }
.budget-summary-icon.purple { color: #7c3aed; }
.budget-summary-icon.orange { color: #ea580c; }

.budget-summary-value {
    font-size: 1.4rem;
    font-weight: 400;
    font-family: inherit;
    text-align: center;
    color: var(--text-default);
}

/* .budget-summary-label — definido com melhorias abaixo */

/* Card de totais geral (usa mesma base do budget-cc-card) */
.budget-totals-card {
    border: 2px solid var(--color-primary-blue) !important;
    background: linear-gradient(135deg, rgba(var(--color-primary-blue-rgb), 0.03) 0%, rgba(var(--color-primary-blue-rgb), 0.08) 100%) !important;
    margin-bottom: 24px !important;
}

.budget-totals-card:hover {
    box-shadow: 0 4px 16px rgba(var(--color-primary-blue-rgb), 0.15) !important;
}

.budget-totals-card .budget-cc-title {
    color: var(--color-primary-blue);
    font-weight: 600;
}

/* Linha de resumo no cabeçalho do card Total Geral */
.budget-totals-summary {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.budget-totals-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 20px 0 0;
    min-width: 120px;
}

.budget-totals-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    margin-bottom: 2px;
}

.budget-totals-summary-value {
    font-size: 0.9rem;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: var(--text-default);
    display: inline-flex;
    align-items: center;
}

.budget-totals-summary-sep {
    width: 1px;
    background: #e5e7eb;
    background: var(--border-color, #e5e7eb);
    align-self: stretch;
    margin: 0 20px 0 0;
}

/* Destaque do mes atual — regras aprimoradas definidas abaixo */

.header .cell.current-month {
    border-top: 2px solid var(--color-primary-blue) !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-weight: 600;
}

/* Barra de progresso de utilizacao */
.budget-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
    background-color: var(--background-tertiary, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.budget-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

.budget-progress-fill.excellent {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.budget-progress-fill.good {
    background: linear-gradient(90deg, #84cc16, #65a30d);
}

.budget-progress-fill.warning {
    background: linear-gradient(90deg, #eab308, #ca8a04);
}

.budget-progress-fill.danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Card moderno para centro de custo — definido abaixo com melhorias */

.budget-cc-card.inactive {
    opacity: 0.7;
    background: #f9fafb;
    background: var(--background-tertiary, #f9fafb);
}

.budget-cc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.budget-cc-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-default);
    margin: 0;
}

.budget-cc-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}

/* Alternancia de fundo nos CCs */
.budget-cc-card:nth-child(even) {
    background: #f8fafc;
    background: var(--background-tertiary, #f8fafc);
}

.budget-cc-card:nth-child(odd) {
    background: #fff;
    background: var(--background-secondary, #fff);
}

/* Mini barra de progresso por celula */
.budget-cell-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
}

/* Alinhamento à direita e números tabulares para valores financeiros */
.pp-table > .body > .row > .cells > .cell.right .budget-value,
.pp-table > .body > .row > .cells > .cell.right {
    font-family: "Ubuntu", sans-serif;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-align: right;
    justify-content: flex-end;
}

/* Labels das linhas (Orçamento, Consumo, Saldo) — tamanho fixo e uniforme */
.pp-table > .body > .row > .cells > .cell.small.bold {
    font-family: "Ubuntu", sans-serif;
    font-size: 0.75rem !important;
    font-weight: 600;
    white-space: nowrap;
}

/* Valores numéricos nas células — tamanho base (inline style sobrescreve) */
.pp-table > .body > .row > .cells > .cell.small.right {
    font-family: "Ubuntu", sans-serif;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Garante que elementos internos herdem o font-size do cell (inline style) */
.budget-cell-progress,
.budget-cell-progress .budget-value,
.pp-table > .body > .row > .cells > .cell.small .budget-value {
    font-size: inherit;
}

.budget-mini-bar {
    width: 100%;
    height: 3px;
    background-color: #e5e7eb;
    background-color: var(--background-tertiary, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
}

.budget-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.budget-mini-fill.excellent { background: #22c55e; }
.budget-mini-fill.good { background: #84cc16; }
.budget-mini-fill.warning { background: #eab308; }
.budget-mini-fill.danger { background: #ef4444; }

/* Header da tabela estilizado */
.budget-cc-card .pp-table .header {
    background: linear-gradient(180deg, var(--background-secondary) 0%, var(--background-tertiary) 100%);
    border-bottom: 2px solid var(--color-primary-blue);
    border-radius: 4px 4px 0 0;
}

.budget-cc-card .pp-table .header .cell {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-default);
    padding: 8px 4px;
}

/* Badges de status por CC */
.budget-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.budget-status-badge.on-track {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.budget-status-badge.attention {
    background: rgba(234, 179, 8, 0.15);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.budget-status-badge.critical {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tooltip rico */
.budget-tooltip-container {
    position: relative;
    cursor: help;
}

.budget-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    background: var(--background-secondary, #fff);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 160px;
    transition: visibility 0.2s, opacity 0.2s;
    white-space: nowrap;
}

.budget-tooltip-container:hover .budget-tooltip {
    visibility: visible;
    opacity: 1;
}

.budget-tooltip-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.budget-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.75rem;
    padding: 2px 0;
}

.budget-tooltip-label {
    color: var(--text-light);
}

.budget-tooltip-value {
    font-weight: 600;
    color: var(--text-default);
}

.budget-tooltip-value.positive { color: #16a34a; }
.budget-tooltip-value.negative { color: #dc2626; }
.budget-tooltip-value.warning { color: #ca8a04; }

/* Tooltip de hierarquia no nome do CC - usando LcTooltip */
.lc-tooltip-portal .content:has(.budget-hierarchy-tooltip) {
    background: #fff !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    width: auto !important;
    max-width: none !important;
}

.lc-tooltip-portal:has(.budget-hierarchy-tooltip) .arrow {
    background-color: #fff !important;
}

.budget-hierarchy-tooltip {
    color: #333;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 12px;
    white-space: nowrap;
    width: max-content;
}

/* Tooltip de projeção de fechamento (P3 forecast) na pill de previsão */
.lc-tooltip-portal .content:has(.budget-forecast-tooltip) {
    background: #fff !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    width: auto !important;
    max-width: none !important;
}

.lc-tooltip-portal:has(.budget-forecast-tooltip) .arrow {
    background-color: #fff !important;
}

.budget-forecast-tooltip {
    color: #333;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 12px;
    white-space: nowrap;
    width: max-content;
}

/* Badge de variacao MoM (month-over-month) */
.budget-growth-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.budget-growth-badge.up {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.budget-growth-badge.down {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Container das pills de indicadores FinOps abaixo do subtitle */
.budget-cc-indicators {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Pills de indicadores FinOps */
.budget-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.budget-indicator-pill.new-resources {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.budget-indicator-pill.forecast.warning {
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.budget-indicator-pill.forecast.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Estado vazio para CCs com orçamento zero */
.budget-zero-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    color: var(--text-light);
    font-size: 0.8rem;
    text-align: center;
    gap: 4px;
    background: #f9fafb;
    background: var(--background-tertiary, #f9fafb);
    border-radius: 6px;
    border: 1px dashed #e5e7eb;
    border: 1px dashed var(--border-color, #e5e7eb);
    margin-top: 8px;
}

/* Hover highlighting nas linhas da tabela */
.budget-cc-card .pp-table .body .row:hover {
    background-color: rgba(var(--color-primary-blue-rgb), 0.04);
    transition: background-color 0.15s ease;
}

/* Separadores sutis entre linhas */
.budget-cc-card .pp-table .body .row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.budget-cc-card .pp-table .body .row:last-child {
    border-bottom: none;
}

/* Melhor contraste no label de periodo dos cards */
.budget-summary-label {
    font-size: 0.62rem;
    font-family: inherit;
    color: var(--text-light);
    margin-top: 4px;
    letter-spacing: 0.01em;
}

/* Destaque visual no card do mês atual na coluna */
.current-month {
    background-color: rgba(var(--color-primary-blue-rgb), 0.06) !important;
    border-left: 2px solid rgba(var(--color-primary-blue-rgb), 0.3) !important;
    border-right: 2px solid rgba(var(--color-primary-blue-rgb), 0.3) !important;
    position: relative;
}

/* Badge label do mês atual */
.header .cell.current-month::after {
    content: 'ATUAL';
    position: absolute;
    top: -12px;
    right: 2px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary-blue);
    background: rgba(var(--color-primary-blue-rgb), 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
}

/* Transição suave nos cards de CC ao hover */
.budget-cc-card {
    background: #fff;
    background: var(--background-secondary, #fff);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.budget-cc-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary-blue);
    transform: translateY(-1px);
}

/* FinOps: Run Rate label no card de consumo */
.budget-run-rate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #ea580c;
    background: rgba(234, 88, 12, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

/* FinOps: Burn Rate labels no card de saldo */
.budget-burn-danger {
    color: #dc2626 !important;
    font-weight: 600;
}

.budget-burn-warning {
    color: #d97706 !important;
    font-weight: 600;
}

.budget-burn-ok {
    color: #16a34a !important;
    font-weight: 600;
}

/* FinOps: Ícone de anomalia na célula de consumo */
.budget-icon-anomaly {
    color: #7c3aed;
    margin-right: 2px;
    vertical-align: middle;
    animation: anomaly-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes anomaly-pulse {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* FinOps: Linha de variação MoM (Month-over-Month) */
.budget-mom-row {
    border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
    border-bottom: none !important;
    background: rgba(var(--color-primary-blue-rgb), 0.02);
}

.budget-mom-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.04em;
    color: var(--text-light) !important;
    opacity: 0.8;
}

.budget-mom-cell {
    padding: 1px 0 !important;
}

.budget-mom-value {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0px 4px;
    border-radius: 3px;
    line-height: 1.4;
}

.budget-mom-value.up {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
}

.budget-mom-value.down {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.08);
}

.budget-mom-value.neutral {
    color: var(--text-light);
    opacity: 0.5;
}

/* ========================================================
   Responsividade — escala de fontes por resolução de tela
   O font-size dos valores numéricos é controlado via inline
   style (getUniformFontStyle). Aqui ajustamos apenas labels,
   headers e elementos auxiliares.
   ======================================================== */

/* Telas menores que 1366px (notebooks antigos, HD) */
@media (max-width: 1365px) {
    .pp-table > .body > .row > .cells > .cell.small.bold {
        font-size: 0.62rem !important;
    }
    .budget-cc-card .pp-table .header .cell {
        font-size: 0.85rem;
    }
    .budget-value svg {
        width: 11px;
        height: 11px;
    }
    .budget-mini-bar {
        height: 2px;
    }
    .budget-tooltip {
        font-size: 0.9rem;
    }
}

/* Telas entre 1366px e 1599px (notebooks padrão) */
@media (min-width: 1366px) and (max-width: 1599px) {
    .pp-table > .body > .row > .cells > .cell.small.bold {
        font-size: 0.88rem !important;
    }
    .budget-cc-card .pp-table .header .cell {
        font-size: 0.94rem;
    }
}

/* Telas entre 1600px e 1919px (Full HD baixo / QHD escalado) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .pp-table > .body > .row > .cells > .cell.small.bold {
        font-size: 0.93rem !important;
    }
}

/* Telas >= 1920px (Full HD+, QHD, 4K) — tamanhos confortáveis */
@media (min-width: 1920px) {
    .pp-table > .body > .row > .cells > .cell.small.bold {
        font-size: 1.00rem !important;
    }
    .budget-cc-card .pp-table .header .cell {
        font-size: 1.05rem;
    }
}

/* placeholder */

/* ============================================================
   Tabela unificada Orçamento × Consumo (visual FinOps)
   ============================================================ */

.budget-unified-wrapper {
    width: 100%;
    overflow: auto;
    max-height: calc(100vh - 320px);
    background: #fff;
    background: var(--background-secondary, #fff);
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
}

.budget-unified-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "Ubuntu", sans-serif;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    table-layout: fixed;
}

.budget-unified-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #ffffff;
    background-clip: padding-box;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--text-light);
    font-weight: 600;
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    box-shadow: inset 0 -1px 0 #e5e7eb;
    box-shadow: inset 0 -1px 0 var(--border-color, #e5e7eb);
    text-align: right;
    white-space: nowrap;
}

.budget-unified-table thead th.cc-col {
    text-align: left;
    width: 17%;
    min-width: 180px;
    z-index: 4;
    left: 0;
    border-right: 1px solid #e5e7eb;
    border-right: 1px solid var(--border-color, #e5e7eb);
    background-color: #ffffff;
}

.budget-unified-table thead th.metric-col {
    text-align: left;
    width: 6%;
    min-width: 60px;
    background-color: #ffffff;
}

.budget-unified-table thead th.month-col {
    width: auto;
    min-width: 78px;
    background-color: #ffffff;
}

.budget-unified-table thead th.month-col.current-month {
    color: var(--color-primary-blue);
    background-color: #eef2fb !important;
    border-bottom-color: var(--color-primary-blue);
}

/* Linha do grupo */
.budget-unified-table tbody tr.budget-row td {
    padding: 4px 8px;
    border-bottom: none;
    background: #fff;
    background: var(--background-secondary, #fff);
    text-align: right;
    white-space: nowrap;
    line-height: 1.35;
}

/* Divisor forte entre grupos de CC (após a última métrica "Uso") */
.budget-unified-table tbody tr.budget-row.last td {
    border-bottom: 2px solid #d8dde6;
    padding-bottom: 10px;
}
.budget-unified-table tbody tr.budget-row.last + tr.budget-row td {
    padding-top: 10px;
}

/* Zebra: grupos alternados ganham fundo levemente diferente.
   Cada grupo tem 4 linhas; usamos nth-of-type baseado no agrupamento
   por seletor — como não há wrapper, aplicamos zebra via dado: a primeira
   linha do grupo é a única com .cc-cell, então usamos esse marcador. */
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+5) td,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+6) td,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+7) td,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+8) td {
    background: #fafbfc;
}
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+5) td.value-cell.current-month,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+6) td.value-cell.current-month,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+7) td.value-cell.current-month,
.budget-unified-table tbody tr.budget-row:not(.total):nth-of-type(8n+8) td.value-cell.current-month {
    background: #eef2fb;
}

.budget-unified-table tbody tr.budget-row.last td {
    border-bottom: 2px solid #d8dde6;
}

.budget-unified-table tbody tr.budget-row td.cc-cell {
    text-align: left;
    vertical-align: middle;
    padding: 12px 12px;
    border-right: 1px solid #e5e7eb;
    border-right: 1px solid var(--border-color, #e5e7eb);
    /* sem background explícito: herda do td para permitir zebra */
}

.budget-unified-table tbody tr.budget-row td.metric-cell {
    text-align: left;
    color: var(--text-light);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-right: 6px;
    border-right: 1px dashed rgba(0, 0, 0, 0.06);
}

.budget-unified-table tbody tr.budget-row td.value-cell {
    font-size: 0.72rem;
    padding: 3px 8px;
}

.budget-unified-table tbody tr.budget-row td.value-cell.metric-consumo {
    font-weight: 600;
}

.budget-unified-table tbody tr.budget-row td.value-cell.metric-orcamento {
    color: var(--text-light);
    font-weight: 400;
}

.budget-unified-table tbody tr.budget-row td.value-cell.metric-dif {
    font-weight: 600;
}

.budget-unified-table tbody tr.budget-row td.value-cell.metric-uso {
    font-weight: 600;
    color: var(--text-default);
}

.budget-unified-table tbody tr.budget-row td.value-cell.current-month {
    background: rgba(var(--color-primary-blue-rgb), 0.04);
}

/* Total geral — fundo distinto */
.budget-unified-table tbody tr.budget-row.total td {
    background: rgba(var(--color-primary-blue-rgb), 0.05);
}
.budget-unified-table tbody tr.budget-row.total td.cc-cell {
    border-right-color: var(--color-primary-blue);
}
.budget-unified-table tbody tr.budget-row.total.last td {
    border-bottom: 2px solid var(--color-primary-blue);
}

/* Linha inativa */
.budget-unified-table tbody tr.budget-row.inactive td {
    opacity: 0.55;
}

/* Hover na linha-grupo (4 sub-linhas) */
.budget-unified-table tbody tr.budget-row:not(.total):hover td {
    background: rgba(var(--color-primary-blue-rgb), 0.03);
}
.budget-unified-table tbody tr.budget-row:not(.total):hover td.value-cell.current-month {
    background: rgba(var(--color-primary-blue-rgb), 0.07);
}

/* Bloco de info do CC dentro da célula esquerda */
.budget-cc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.budget-cc-info .cc-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.budget-cc-info .budget-cc-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-default);
    margin: 0;
    line-height: 1.2;
}

.budget-cc-info.total .budget-cc-title {
    color: var(--color-primary-blue);
}

.budget-cc-info .budget-cc-count {
    font-size: 0.68rem;
    color: var(--text-light);
    font-weight: 500;
}

.budget-cc-info .cc-budget-row {
    font-size: 0.60rem;
    color: var(--text-light);
}

.budget-cc-info .cc-actions-row {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 1px;
}

.budget-cc-info .cc-actions-row .lc-icon-link {
    opacity: 0.7;
    font-size: 0.78rem;
}
.budget-cc-info .cc-actions-row .lc-icon-link svg {
    width: 14px;
    height: 14px;
}
.budget-cc-info .cc-actions-row .lc-icon-link:hover {
    opacity: 1;
}

.budget-cc-info .cc-indicators-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Status badges (inativo adicionado) */
.budget-status-badge.inactive {
    background: rgba(150, 150, 150, 0.15);
    color: #6b7280;
    border: 1px solid rgba(150, 150, 150, 0.3);
}

/* ============================================================
   Rodapé com legenda + última atualização
   ============================================================ */
.budget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-light);
    border-top: 1px solid #e5e7eb;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: transparent;
}

.budget-legend {
    display: flex;
    align-items: center;
    gap: 16px;
}

.budget-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.budget-legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.budget-legend-item .dot.excellent { background: #16a34a; }
.budget-legend-item .dot.warning { background: #ea580c; }
.budget-legend-item .dot.danger { background: #dc2626; }

.budget-footer-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.budget-footer-refresh {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.95rem;
}
.budget-footer-refresh:hover {
    color: var(--color-primary-blue);
    background: rgba(var(--color-primary-blue-rgb), 0.08);
}

.budget-footer-sep {
    opacity: 0.5;
}

/* Ícone Red/Gray para KPIs Críticos */
.budget-summary-icon.red { color: #dc2626; }
.budget-summary-icon.gray { color: #9ca3af; }

/* Responsive: telas menores reduzem padding */
@media (max-width: 1365px) {
    .budget-unified-table {
        font-size: 0.60rem;
    }
    .budget-unified-table tbody tr.budget-row td.value-cell {
        font-size: 0.60rem;
        padding: 2px 4px;
    }
    .budget-unified-table tbody tr.budget-row td.metric-cell {
        font-size: 0.58rem;
    }
    .budget-unified-table thead th {
        font-size: 0.54rem;
        padding: 6px 4px;
    }
    .budget-unified-table thead th.cc-col,
    .budget-unified-table thead th.metric-col {
        font-size: 0.56rem;
    }
    .budget-cc-info .budget-cc-title { font-size: 0.70rem; }
    .budget-cc-info .budget-cc-count { font-size: 0.60rem; }
    .budget-cc-info .cc-budget-row { font-size: 0.58rem; }
    .budget-status-badge { font-size: 0.58rem; }
    .budget-cc-card .pp-table .header .cell {
        font-size: 0.72rem;
        padding: 6px 3px;
    }
    .pp-table > .body > .row > .cells > .cell.small.bold {
        font-size: 0.58rem !important;
    }
    .budget-value svg {
        width: 10px;
        height: 10px;
    }
    .budget-mini-bar {
        height: 2px;
    }
    .budget-cc-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    .budget-totals-summary-label { font-size: 0.60rem; }
    .budget-totals-summary-value { font-size: 0.78rem; }
    .budget-footer { font-size: 0.64rem; }
}

@media (min-width: 1600px) {
    .budget-unified-table {
        font-size: 0.78rem;
    }
    .budget-unified-table tbody tr.budget-row td.value-cell {
        font-size: 0.78rem;
    }
    .budget-cc-info .budget-cc-title { font-size: 0.88rem; }
}

/* ===== Chart mode rows ===== */
.budget-unified-table tbody tr.budget-row.chart-row td.chart-cell {
    padding: 4px 0 !important;
    vertical-align: middle;
}
.budget-unified-table tbody tr.budget-row.chart-row td.chart-cc-cell {
    vertical-align: top;
    padding: 8px 6px;
}
.budget-unified-table tbody tr.budget-row.chart-row.total td {
    background: rgba(130, 100, 200, 0.05);
    background: var(--color-primary-purple-lightest, rgba(130, 100, 200, 0.05));
}


.linked-users-container {
    display: flex;
    gap: 16px;
    flex: 1 1;
    min-height: 0;
    /* Adapta à altura do SideModal body (100vh - 152px) menos header+footer do modal */
    height: calc(100vh - 280px);
    overflow: hidden;
}

.linked-users-column {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    background-color: #FAFBFF;
    background-color: var(--background-lightest, #FAFBFF);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
    min-height: 0;
    border: 1px solid #E2E6F3;
    border: 1px solid var(--line-default, #E2E6F3);
    overflow: hidden;
}



.linked-users-column .column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E6F3;
    border-bottom: 1px solid var(--line-default, #E2E6F3);
    flex-shrink: 0;
}

.linked-users-column .column-title {
    font-size: 13px;
    font-weight: 600;
    color: #2E1956;
    color: var(--text-default, #2E1956);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.linked-users-column.vinculados .column-count {
    background-color: #8C40E3;
    background-color: var(--color-primary-purple, #8C40E3);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.linked-users-column.disponiveis .column-count {
    background-color: #00DBFF;
    background-color: var(--color-secondary-cyan, #00DBFF);
    color: #2E1956;
    color: var(--text-default, #2E1956);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.linked-users-column .lc-checklist {
    flex: 1 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.linked-users-column .lc-checklist > .list {
    height: auto !important;
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
}

/* Estilo para usuarios herdados - duas linhas: nome + badge abaixo */
.linked-users-column .lc-checklist > .list > .item {
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 8px;
}

.linked-users-column .lc-checklist > .list > .item span[style*="darkgray"] {
    background-color: transparent;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.3;
    color: #6B6F7D !important;
    color: var(--text-dark, #6B6F7D) !important;
    margin-left: 26px;
    margin-top: 2px;
    width: calc(100% - 26px);
}

/* Header (SideModal v2) */
.linked-users-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.linked-users-header__icon {
    display: flex;
    color: #8C40E3;
    color: var(--color-primary-purple, #8C40E3);
    font-size: 20px;
}

.linked-users-header__title {
    display: flex;
    flex-direction: column;
}

.linked-users-header__title strong {
    font-size: 14px;
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.linked-users-header__title small {
    font-size: 11px;
    color: #6B6F7D;
    color: var(--text-secondary, #6B6F7D);
    margin-top: 2px;
}

/* Footer (SideModal v2) */
.linked-users-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 0 0 0;
    margin-top: 8px;
    border-top: 1px solid #E2E6F3;
    border-top: 1px solid var(--line-default, #E2E6F3);
}

/* ── Confirmação de exclusão (SideModal) ──────────────────────────────── */
.cc-delete-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-delete-header__icon {
    display: flex;
    color: #DC291E;
    color: var(--status-red, #DC291E);
    font-size: 20px;
}

.cc-delete-header__title {
    display: flex;
    flex-direction: column;
}

.cc-delete-header__title strong {
    font-size: 14px;
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cc-delete-header__title small {
    font-size: 11px;
    color: #6B6F7D;
    color: var(--text-secondary, #6B6F7D);
    margin-top: 2px;
}

.cc-delete-body {
    padding: 8px 0;
}

.cc-delete-body__text {
    font-size: 13px;
    color: #2E1956;
    color: var(--text-default, #2E1956);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.cc-delete-body__warning {
    font-size: 12px;
    color: #6B6F7D;
    color: var(--text-secondary, #6B6F7D);
    margin: 0;
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(220, 41, 30, 0.06);
    border-left: 3px solid #DC291E;
    border-left: 3px solid var(--status-red, #DC291E);
    border-radius: 4px;
}

.cc-delete-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0 0;
    margin-top: 12px;
    border-top: 1px solid #E2E6F3;
    border-top: 1px solid var(--line-default, #E2E6F3);
}


/* CreateOrEditCCModal v2 - SideModal + Tabs */

.cc-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-modal-header__icon {
    display: flex;
    color: #8C40E3;
    color: var(--color-primary-purple, #8C40E3);
    font-size: 22px;
}

.cc-modal-header__title {
    display: flex;
    flex-direction: column;
}

.cc-modal-header__title strong {
    font-size: 14px;
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cc-modal-header__title small {
    font-size: 11px;
    color: #6B6F7D;
    color: var(--text-secondary, #6B6F7D);
    margin-top: 2px;
}

.cc-modal-tabs .ant-tabs-nav {
    margin-bottom: 16px;
}

.cc-modal-tabs .ant-tabs-tab {
    font-size: 13px;
    font-family: 'Ubuntu', sans-serif;
}

.cc-modal-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #8C40E3 !important;
    color: var(--color-primary-purple, #8C40E3) !important;
}

.cc-modal-tabs .ant-tabs-ink-bar {
    background: #8C40E3 !important;
    background: var(--color-primary-purple, #8C40E3) !important;
}

.cc-modal-rules-empty {
    padding: 24px 12px;
    text-align: center;
    color: #6B6F7D;
    color: var(--text-secondary, #6B6F7D);
    font-size: 13px;
}

.cc-modal-rules-empty p {
    margin-bottom: 16px;
}

/* Layout coluna: área de conteúdo dimensionada pelo conteúdo + rodapé logo abaixo.
   Quando o conteúdo é curto (ex.: criar c/ orçamento único), os botões ficam
   junto ao formulário, sem gap nem scroll. Quando é alto (orçamento mensal /
   histórico), a área rola internamente e o rodapé permanece fixo e visível. */
.cc-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cc-modal-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Neutraliza o .form global (height: 100%) que, dentro do modal, esticava o
   formulário e empurrava o rodapé para fora da área visível, gerando scroll. */
.cc-modal-scroll .form {
    height: auto;
}

.cc-modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0;
    margin-top: 16px;
    border-top: 1px solid #E2E6F3;
    border-top: 1px solid var(--line-default, #E2E6F3);
}

.cc-modal-footer__right {
    display: flex;
    gap: 8px;
}

/* ─── KPI cards dentro do LCDashboard ─────────────────────────────────── */
.cc-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
}

.cc-kpi-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-kpi-card__icon.purple { background: rgba(140, 64, 227, 0.12); color: #8C40E3; }
.cc-kpi-card__icon.green  { background: rgba(62, 187, 63, 0.12);  color: #3EBB3F; }
.cc-kpi-card__icon.orange { background: rgba(230, 81, 0, 0.12);   color: #E65100; }
.cc-kpi-card__icon.blue   { background: rgba(71, 31, 204, 0.12);  color: #471FCC; }

.cc-kpi-card__body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cc-kpi-card__label {
    font-size: 0.75rem;
    color: #6c7280;
}

.cc-kpi-card__value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-kpi-card__desc {
    font-size: 0.7rem;
    color: #9097a3;
    margin-top: 2px;
}

/* ─── Chart card — ocupa todo o espaço disponível ────────────────────── */

/* Força grid-template-rows: KPI cards compactos (auto) + chart preenche o resto */
.lcdashboard:has(.cc-chart-card) .lcdashboard-cards-panel-body {
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
}

.cc-chart-card {
    overflow: hidden;
    min-height: 0;
}

.cc-chart-card .card-content-body,
.cc-chart-card .card-content-body-content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Garante que orgchart-host e orgchart-container preencham 100% do card */
.cc-chart-card .orgchart-host {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.cc-chart-card .orgchart-container {
    height: 100% !important;
    min-height: 0;
    flex: 1 1;
}

[node-id] rect {
    fill: #2E1956 !important;
}

[control-expcoll-id] circle {
    fill: #e2e6f3;
}

#tree>svg {
    background-color: #fff;
}

.bg-ripple-container {
    background-color: #2E1956 !important;
}

.edit-fields>div:nth-child(2) {
    display: none !important;
}

.editForm {
    display: none;
    text-align: center;
    position: absolute;
    border: 1px solid #aeaeae;
    width: 300px;
    background-color: #2E1956;
    z-index: 10000;
    border-radius: 2rem;
    color: white;
    margin-left: 20rem;
}

.titleEditForm {
    margin-top: 0.27rem;
}

.nameField {
    width: 60%;
    font-family: "Ubuntu", sans-serif;
    height: 40px;
    border: 0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    background-color: #fff;
    color: var(--text-default);
    overflow: hidden;
    margin-top: 0.5rem;
}

.nameField:hover {
    border: 1px solid #898da6;
}

.footerButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.form {
    margin-bottom: 0 !important;
}

.editFormField {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.editFormField label {
    font-size: 12px;
    color: #fff;
    margin-bottom: 0.25rem;
}

.typeField {
    width: 60%;
    font-family: "Ubuntu", sans-serif;
    height: 40px;
    border: 0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    background-color: #fff;
    color: var(--text-default);
    cursor: pointer;
}

.typeField:hover {
    border: 1px solid #898da6;
}
.orgchart.myChart {
  background-image: none !important
}

.orgchart.myChart>ul>li>ul li::before {
  border-top-color: var(--color-primary-blue);
}

.orgchart.myChart>ul>li>ul li .oc-node::before,
.orgchart.myChart ul li .oc-node:not(:only-child)::after {
  background-color: var(--color-primary-blue);
}

.orgchart.myChart .oc-node .position {
  box-sizing: border-box;
  background-color: var(--color-primary-blue);
  color: #fff;
  width: 130px;
  height: 65px;
  padding: 2px;
}

.orgchart.myChart .oc-node .fullname {
  box-sizing: border-box;
  color: #FFF; 
  width: 135px;
  height: 65px;
  padding: 0;
  line-height: 65px;
  border: 1px solid var(--color-primary-blue);
  border-radius: 10px;
}

.fullname p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.orgchart ul li .oc-node.selected {
  background-color: rgba(119, 121, 247, 0.2) !important;
  border-radius: 10px !important;
  transition: 0.5s !important;
}

.orgchart ul li .oc-node.selected .nodeContainer .footerNode {
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: 0.5s;
}

.oc-node .selected {
  background-color: rgba(119, 121, 247, 0.2) !important;
  border-radius: 10px;
  transition: 0.5s;
}

.orgchart ul li .oc-node:hover {
  background-color: rgba(119, 121, 247, 0.2) !important;
  border-radius: 10px;
  transition: 0.5s;
}


.oc-edge .horizontalEdge .leftEdge .oci {
  background-color: red;
  color: yellow;
}

.inputLabelName {
  text-align: left;
  padding-bottom: 0.5rem;
}



.footerButtonSideModal {
  justify-content: left;
  display: flex;
}

.headerNode {
  display: flex;
  flex-direction: row;
}

/* Indicador visual de status inativo */
.nodeContainer.inactive {
  opacity: 0.6;
}

.nodeContainer.inactive .fullname {
  background-color: #8b90a3 !important;
  border-color: #8b90a3 !important;
}

.fullname.disabled {
  background-color: #8b90a3 !important;
  border-color: #8b90a3 !important;
  opacity: 0.7;
}

/* ───── Redesign Phase 3: cards do orgChart ─────────────────────────── */
.orgchart-host {
  /* Container que recebe transform via fitToScreen. */
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Pan canvas: cursor grab/grabbing + scrollbar custom */
.orgchart-pan-wrapper {
  cursor: grab;
  width: 100%;
  height: 100%;
}
.is-panning,
.is-panning * {
  cursor: grabbing !important;
  -webkit-user-select: none;
          user-select: none;
}

/* ───── Zoom toolbar (sobreposta ao canto superior direito) ──────── */
.orgchart-zoom-toolbar {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(140, 64, 227, 0.18);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}
.orgchart-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: #4a4a4a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.orgchart-zoom-btn:hover:not(:disabled) {
  background: rgba(140, 64, 227, 0.12);
  color: #8C40E3;
}
.orgchart-zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.orgchart-zoom-slider {
  width: 110px;
  height: 4px;
  appearance: none;
  background: linear-gradient(90deg, #8C40E3 0%, #8C40E3 50%, #d8d8e0 50%, #d8d8e0 100%);
  background: linear-gradient(90deg, #8C40E3 0%, #8C40E3 var(--zoom-fill, 50%), #d8d8e0 var(--zoom-fill, 50%), #d8d8e0 100%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.orgchart-zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8C40E3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.orgchart-zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8C40E3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.orgchart-zoom-value {
  font-size: 0.7rem;
  color: #555;
  min-width: 36px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Scrollbar custom: aplica em qualquer container ancestral que role o canvas. */
.orgchart-pan-wrapper,
.cc-chart-card .card-content-body,
.cc-chart-card .card-content-body-content,
.orgchart-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 64, 227, 0.35) transparent;
}
.orgchart-pan-wrapper::-webkit-scrollbar,
.cc-chart-card .card-content-body::-webkit-scrollbar,
.cc-chart-card .card-content-body-content::-webkit-scrollbar,
.orgchart-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.orgchart-pan-wrapper::-webkit-scrollbar-track,
.cc-chart-card .card-content-body::-webkit-scrollbar-track,
.cc-chart-card .card-content-body-content::-webkit-scrollbar-track,
.orgchart-container::-webkit-scrollbar-track {
  background: transparent;
}
.orgchart-pan-wrapper::-webkit-scrollbar-thumb,
.cc-chart-card .card-content-body::-webkit-scrollbar-thumb,
.cc-chart-card .card-content-body-content::-webkit-scrollbar-thumb,
.orgchart-container::-webkit-scrollbar-thumb {
  background: rgba(140, 64, 227, 0.35);
  border-radius: 4px;
}
.orgchart-pan-wrapper::-webkit-scrollbar-thumb:hover,
.cc-chart-card .card-content-body::-webkit-scrollbar-thumb:hover,
.cc-chart-card .card-content-body-content::-webkit-scrollbar-thumb:hover,
.orgchart-container::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 64, 227, 0.55);
}

.orgchart.myChart .oc-node {
  background: transparent !important;
}

.nodeContainer {
  width: 180px;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-left: 3px solid #ececf2;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
  padding: 7px 9px 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.nodeContainer.active {
  border-left-color: #3EBB3F;
}
.nodeContainer.inactive {
  border-left-color: #8b90a3;
}

.nodeContainer:hover {
  border-color: #c4b1e3;
  box-shadow: 0 2px 8px rgba(140, 64, 227, 0.12);
}

.nodeContainer.selected {
  border-color: #8C40E3;
  border-color: var(--color-primary-purple, #8C40E3);
  border-width: 2px;
  border-left-width: 3px;
  padding: 6px 8px 6px 7px;
  box-shadow: 0 2px 12px rgba(140, 64, 227, 0.22);
}

.nodeContainer.ancestor-of-selected {
  border-color: #8C40E3;
  border-color: var(--color-primary-purple, #8C40E3);
  border-style: dashed;
}

.nodeContainer.search-hit {
  background: #fffbe6;
  border-color: #f1c40f;
}

.nodeContainer.inactive {
  opacity: 0.55;
}

.nodeHeader {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nodeHeaderIcon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(140, 64, 227, 0.1);
  border-radius: 5px;
  color: #8C40E3;
  flex-shrink: 0;
}

/* nodeStatusDot deprecado em favor da listra esquerda do .nodeContainer.active */
.nodeStatusDot { display: none; }

/* Override do fullname antigo dentro do novo card. */
.nodeContainer .fullname {
  background: transparent !important;
  border: none !important;
  color: #1a1a1a !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  flex: 1 1;
  text-align: left;
}

.nodeContainer .fullname p {
  margin: 0;
}

.nodeContainer.inactive .fullname,
.nodeContainer .fullname.disabled {
  background: transparent !important;
  color: #6c7280 !important;
}

.nodeType {
  font-size: 0.7rem;
  color: #6c7280;
  margin-left: 26px;
}

.nodeBudget {
  background: rgba(46, 25, 86, 0.06);
  color: #2c2c34;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: right;
  padding: 3px 7px;
  border-radius: 6px;
  margin-top: 2px;
}

.nodeBudget.has-budget {
  background: rgba(62, 187, 63, 0.10);
  color: #2E7D32;
}
.nodeBudget.no-budget {
  background: rgba(229, 72, 72, 0.10);
  color: #C62828;
}

.nodeBudgetGroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.nodeBudgetLine {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  color: #4a4a55;
  padding: 2px 6px;
  border-radius: 4px;
}

.nodeBudgetLine.direct.has-budget {
  background: rgba(62, 187, 63, 0.10);
}
.nodeBudgetLine.direct.has-budget .nodeBudgetValue {
  color: #2E7D32;
}
.nodeBudgetLine.direct.no-budget {
  background: rgba(229, 72, 72, 0.10);
}
.nodeBudgetLine.direct.no-budget .nodeBudgetValue {
  color: #C62828;
}

.nodeBudgetLine .nodeBudgetLabel {
  color: #6c7280;
}

.nodeBudgetLine .nodeBudgetValue {
  font-weight: 600;
  color: #1a1a1a;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.footerNode {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f5;
  position: relative;
  gap: 2px;
}

/* Ícones menores no footer */
.footerNode .lc-icon-link svg,
.footerNode .lc-icon-link i svg,
.footerNode a svg,
.footerNode button svg {
  width: 13px !important;
  height: 13px !important;
}

/* Cor vermelha discreta no botão excluir quando habilitado */
.footerNode .lc-icon-link:not(.disabled):nth-child(4) svg,
.footerNode > *:nth-child(4):not(.disabled) svg {
  color: #e54848;
}

/* Wrapper relativo para encostar o badge ao ícone de usuários */
.nodeUsersWrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nodeUserBadge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #8C40E3;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 400;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Remove o highlight legacy do oc-node selected (nosso .selected ja cobre). */
.orgchart ul li .oc-node.selected,
.orgchart ul li .oc-node:hover {
  background-color: transparent !important;
}

/* ───── Phase 6: Refinamentos ─────────────────────────────────────── */

/* Card: borda esquerda como indicador de estado (Ativo/Inativo). */
.nodeContainer {
  border-left: 3px solid #3EBB3F; /* ativo (default) */
  padding-left: 8px; /* compensa a borda 3px (era 10px) */
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}

.nodeContainer.inactive {
  border-left-color: #8b90a3;
}

/* Header icon menor */
.nodeHeaderIcon {
  width: 20px;
  height: 20px;
}

/* Ícones do footer menores e mais compactos */
.footerNode {
  gap: 2px;
  padding-top: 4px;
  margin-top: 4px;
}

.footerNode .lc-icon-link svg,
.footerNode svg {
  width: 13px !important;
  height: 13px !important;
}

/* Trash em vermelho discreto quando habilitado */
.footerNode .lc-icon-link:nth-child(4):not(.disabled) svg {
  color: #e54848;
}

/* Wrapper do botão de usuários para posicionar o badge colado */
.nodeUsersWrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Badge de usuários: dentro do botão, fino, sem negrito */
.nodeUserBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #00DBFF;
  background: var(--color-secondary-cyan, #00DBFF);
  color: #1a1a1a;
  font-size: 0.55rem;
  font-weight: 400;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Chips de orçamento: verde (com) / vermelho (sem) — aplicado em folhas */
.nodeBudget.has-budget {
  background: rgba(62, 187, 63, 0.10);
  color: #2E7D32;
}

.nodeBudget.no-budget {
  background: rgba(229, 72, 72, 0.10);
  color: #C62828;
}

/* Em pais: aplicar somente na linha "Direto" */
.nodeBudgetLine.direct.has-budget .nodeBudgetValue {
  color: #2E7D32;
}

.nodeBudgetLine.direct.no-budget .nodeBudgetValue {
  color: #C62828;
}

/* Scrollbar customizada no canvas do orgchart */
.orgchart-host,
.orgchart-container,
.cc-chart-card .orgchart-container,
.cc-chart-card .card-content-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 64, 227, 0.35) transparent;
}

.orgchart-host::-webkit-scrollbar,
.orgchart-container::-webkit-scrollbar,
.cc-chart-card .orgchart-container::-webkit-scrollbar,
.cc-chart-card .card-content-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.orgchart-host::-webkit-scrollbar-thumb,
.orgchart-container::-webkit-scrollbar-thumb,
.cc-chart-card .orgchart-container::-webkit-scrollbar-thumb,
.cc-chart-card .card-content-body::-webkit-scrollbar-thumb {
  background: rgba(140, 64, 227, 0.35);
  border-radius: 4px;
}

.orgchart-host::-webkit-scrollbar-thumb:hover,
.orgchart-container::-webkit-scrollbar-thumb:hover,
.cc-chart-card .orgchart-container::-webkit-scrollbar-thumb:hover,
.cc-chart-card .card-content-body::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 64, 227, 0.55);
}

.orgchart-host::-webkit-scrollbar-track,
.orgchart-container::-webkit-scrollbar-track,
.cc-chart-card .orgchart-container::-webkit-scrollbar-track,
.cc-chart-card .card-content-body::-webkit-scrollbar-track {
  background: transparent;
}

/* Pan (drag-to-scroll) */
.cc-chart-card .card-content-body,
.cc-chart-card .orgchart-container {
  cursor: grab;
}

.cc-chart-card.is-panning .card-content-body,
.cc-chart-card.is-panning .orgchart-container {
  cursor: grabbing;
}

/* Garante que o card e nós internos não recebam o cursor grab */
.nodeContainer,
.nodeContainer * {
  cursor: pointer;
}

.footerNode .lc-icon-link {
  cursor: pointer;
}


/* ────────────────────────────────────────────────────────────────────────────
 * Cost Center Tree v2 — RevoGrid theme + hierarchical Name cell
 * Segue padrão do skill UI (consolidatedRecommendations.css)
 * ──────────────────────────────────────────────────────────────────────────── */

.cct-grid-wrapper {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    font-family: "Ubuntu", sans-serif;
}

.cct-grid-wrapper revo-grid {
    flex: 1 1;
    min-height: 0;
}

/* ── Linha ──────────────────────────────────────────────────────────────── */
.cct-grid-wrapper revo-grid .rgRow {
    border-bottom: 1px solid #F1F3F8;
    border-bottom: 1px solid var(--line-light, #F1F3F8);
    cursor: default;
}

.cct-grid-wrapper revo-grid .rgRow:hover {
    background-color: #FAFBFD;
    background-color: var(--background-lightest, #FAFBFD);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cct-grid-wrapper revo-grid .header-rgRow,
.cct-grid-wrapper revo-grid .rgHeaderCell {
    background-color: #fff !important;
    background-color: var(--background-white, #fff) !important;
    border-bottom: solid 1px #E2E6F3 !important;
    border-bottom: solid 1px var(--line-default, #E2E6F3) !important;
    min-height: 32px;
}

.cct-grid-wrapper revo-grid .rgHeaderCell {
    font-family: "Ubuntu", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    color: #6B6F7D;
    color: var(--text-dark, #6B6F7D);
    text-transform: none;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.cct-grid-wrapper revo-grid revogr-header,
.cct-grid-wrapper revo-grid revogr-header .rgHeaderCell,
.cct-grid-wrapper revo-grid revogr-viewport-scroll.colPinStart revogr-header,
.cct-grid-wrapper revo-grid revogr-viewport-scroll.colPinStart revogr-header .rgHeaderCell,
.cct-grid-wrapper revo-grid revogr-viewport-scroll.colPinEnd revogr-header,
.cct-grid-wrapper revo-grid revogr-viewport-scroll.colPinEnd revogr-header .rgHeaderCell {
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
}

.cct-grid-wrapper revo-grid .rgHeaderCell:hover {
    color: #2E1956;
    color: var(--text-default, #2E1956);
    background-color: #FAFBFD !important;
    background-color: var(--background-lightest, #FAFBFD) !important;
}

.cct-grid-wrapper revo-grid .rgHeaderCell.sortable {
    cursor: pointer;
}

.cct-grid-wrapper revo-grid .rgHeaderCell.sort-asc,
.cct-grid-wrapper revo-grid .rgHeaderCell.sort-desc {
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cct-grid-wrapper revo-grid .rgHeaderCell .sort-icon,
.cct-grid-wrapper revo-grid .rgHeaderCell.sort-asc::after,
.cct-grid-wrapper revo-grid .rgHeaderCell.sort-desc::after {
    color: #471FCC;
    color: var(--color-primary-blue, #471FCC);
    font-size: 0.65rem;
}

/* ── Célula ─────────────────────────────────────────────────────────────── */
.cct-grid-wrapper revo-grid .rgCell {
    font-family: "Ubuntu", sans-serif;
    font-size: 0.75rem;
    color: #2E1956;
    color: var(--text-default, #2E1956);
    padding: 4px 12px;
    border-right: none !important;
    display: flex;
    align-items: center;
}

revo-grid .revo-cell--right {
    text-align: right;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

revo-grid .revo-cell--center {
    text-align: center;
    justify-content: center;
}

/* ── Célula Nome (indent + chevron + ícone + bullet) ───────────────────── */
.cct-cell-name {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.cct-cell-name .cct-indent {
    display: inline-block;
    flex: 0 0 auto;
}

.cct-cell-name .cct-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    cursor: pointer;
    color: #6B6F7D;
    color: var(--text-dark, #6B6F7D);
    flex: 0 0 auto;
    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cct-cell-name .cct-chevron:hover {
    background-color: #E2E6F3;
    background-color: var(--background-light, #E2E6F3);
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cct-cell-name .cct-chevron.placeholder {
    cursor: default;
    pointer-events: none;
}

.cct-cell-name .cct-icon {
    display: inline-flex;
    color: #898DA6;
    color: var(--icon-not-selected, #898DA6);
    flex: 0 0 auto;
}

.cct-cell-name .cct-icon.is-folder {
    color: #966CF3;
    color: var(--color-primary-purple-light, #966CF3);
}

.cct-cell-name .cct-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #8C40E3;
    background-color: var(--color-primary-purple, #8C40E3);
    flex: 0 0 auto;
}

.cct-cell-name .cct-bullet.inactive {
    background-color: #EBEBEB;
    background-color: var(--background-neutral, #EBEBEB);
}

.cct-cell-name .cct-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cct-cell-name .cct-name-text.inactive {
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
}

/* ── Linha sintética "+ N centros de custo" ─────────────────────────────── */
.cct-row-more {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #471FCC;
    color: var(--color-primary-blue, #471FCC);
    font-size: 0.75rem;
    font-weight: 500;
}

.cct-row-more:hover {
    text-decoration: underline;
}

/* ── Badge Tipo ─────────────────────────────────────────────────────────── */
.cct-badge-type {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    background-color: rgba(140, 64, 227, 0.08);
    color: #8C40E3;
    color: var(--color-primary-purple, #8C40E3);
    border: 1px solid rgba(140, 64, 227, 0.18);
    white-space: nowrap;
}

.cct-badge-type.tipo-produto {
    background-color: rgba(0, 219, 255, 0.08);
    color: #0091A8;
    border-color: rgba(0, 219, 255, 0.2);
}

.cct-badge-type.tipo-projeto {
    background-color: rgba(246, 222, 0, 0.12);
    color: #8A6E00;
    border-color: rgba(246, 222, 0, 0.3);
}

.cct-badge-type.tipo-default {
    background-color: rgba(70, 31, 204, 0.08);
    color: #471FCC;
    color: var(--color-primary-blue, #471FCC);
    border-color: rgba(70, 31, 204, 0.18);
}

/* ── Badge Status ───────────────────────────────────────────────────────── */
.cct-badge-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.cct-badge-status.ativo {
    background-color: rgba(62, 187, 63, 0.12);
    color: #3EBB3F;
    color: var(--status-green, #3EBB3F);
}

.cct-badge-status.inativo {
    background-color: #EBEBEB;
    background-color: var(--background-neutral, #EBEBEB);
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
}

/* ── Ações ──────────────────────────────────────────────────────────────── */
.cct-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: flex-end;
}

.cct-actions .cct-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #2E1956;
    color: var(--icon-default, #2E1956);
    transition: background-color 0.15s ease;
}

.cct-actions .cct-action-btn:hover {
    background-color: #E2E6F3;
    background-color: var(--background-light, #E2E6F3);
}

.cct-actions .cct-action-btn:disabled {
    color: #EBEBEB;
    color: var(--icon-disabled, #EBEBEB);
    cursor: not-allowed;
    background: transparent;
}

.cct-actions .cct-action-btn--danger {
    color: #DC291E;
    color: var(--status-red, #DC291E);
}

.cct-actions .cct-action-btn--danger:hover {
    background-color: rgba(220, 41, 30, 0.1);
}

/* ── Coluna usuários (right-aligned number) ─────────────────────────────── */
.cct-cell-users {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
    width: 100%;
}

.cct-cell-users.zero {
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
}

/* ── Título do card ─────────────────────────────────────────────────────── */
.cct-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.cct-card-header .cct-card-title {
    display: flex;
    flex-direction: column;
}

.cct-card-header .cct-card-title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2E1956;
    color: var(--text-default, #2E1956);
}

.cct-card-header .cct-card-title small {
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
    font-size: 0.75rem;
}

.cct-card-header .cct-card-search {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #E2E6F3;
    border: 1px solid var(--line-default, #E2E6F3);
    border-radius: 6px;
    padding: 4px 10px;
    background-color: #fff;
    background-color: var(--background-white, #fff);
    min-width: 260px;
}

.cct-card-header .cct-card-search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: "Ubuntu", sans-serif;
    font-size: 0.8rem;
    color: #2E1956;
    color: var(--text-default, #2E1956);
    flex: 1 1;
}

.cct-card-header .cct-card-search button {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
    display: inline-flex;
    align-items: center;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.cct-empty {
    padding: 32px;
    text-align: center;
    color: #8B90A3;
    color: var(--text-light, #8B90A3);
    font-size: 0.85rem;
}