/* Scrollbars maiores (Android / desktop) */
html {
    scrollbar-width: auto;
    scrollbar-color: #8b949e #161b22;
}
* {
    scrollbar-width: auto;
    scrollbar-color: #8b949e #161b22;
}
*::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
*::-webkit-scrollbar-track {
    background: #161b22;
}
*::-webkit-scrollbar-thumb {
    background: #6e7681;
    border-radius: 8px;
    border: 2px solid #161b22;
}
*::-webkit-scrollbar-thumb:hover {
    background: #8b949e;
}
.ag-theme-alpine-dark {
    --ag-scrollbar-width: 14px;
}
.ag-theme-alpine-dark .ag-body-vertical-scroll {
    width: 14px !important;
    min-width: 14px !important;
}
.ag-theme-alpine-dark .ag-body-horizontal-scroll {
    height: 14px !important;
    min-height: 14px !important;
}

/* ── Dropdowns Dash 4 (dash-dropdown-*) ─────────────────────────── */
.dash-dropdown-wrapper:has(button.sp-dropdown) {
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #8b949e;
    --Dash-Fill-Interactive-Weak: #21262d;
    position: relative;
    width: 100%;
}

button.dash-dropdown.sp-dropdown {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 20px !important;
    color: #c9d1d9 !important;
    min-height: 36px !important;
    width: 100% !important;
    box-shadow: none !important;
}

button.dash-dropdown.sp-dropdown:hover {
    border-color: #EE4D2D !important;
}

button.dash-dropdown.sp-dropdown[aria-expanded="true"] {
    border-color: #EE4D2D !important;
    border-radius: 20px 20px 0 0 !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-trigger {
    min-height: 36px !important;
    padding: 0 12px !important;
    width: 100% !important;
    position: relative !important;
}

/* Busca digitável na pill (sem lupa / sem caixa Search) */
.dash-dropdown-wrapper:has(button.sp-dropdown-searchable) .dash-dropdown-search-container {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

button.dash-dropdown.sp-dropdown-searchable .sp-inline-search {
    display: none;
    position: absolute;
    left: 12px;
    right: 28px;
    top: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #c9d1d9;
    font-size: 13px;
    line-height: 36px;
    z-index: 2;
}
button.dash-dropdown.sp-dropdown-searchable .sp-inline-search::placeholder {
    color: #8b949e;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-grid-container {
    width: 100% !important;
    min-width: 0 !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-value,
button.dash-dropdown.sp-dropdown .dash-dropdown-placeholder {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-value {
    color: #c9d1d9 !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-placeholder {
    color: #8b949e !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-trigger-icon {
    color: #8b949e !important;
    fill: #8b949e !important;
}

button.dash-dropdown.sp-dropdown .dash-dropdown-clear,
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-clear {
    display: none !important;
}

/* Menu aberto */
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-content {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-top: none !important;
    border-radius: 0 0 20px 20px !important;
    color: #c9d1d9 !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    padding-top: 0 !important;
}

/* Página Shopee Produtos — viewport inteiro sem scroll externo */
.sp-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    box-sizing: border-box;
}

.sp-page-header {
    flex-shrink: 0;
    margin-bottom: 4px !important;
    position: sticky;
    top: 0;
    z-index: 2600;
    background: #0e1117;
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.sp-page-header > .sp-header-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.sp-page-header > .sp-header-actions-col {
    flex: 0 0 auto;
    max-width: none !important;
    width: auto !important;
}

.sp-header-actions {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.sp-header-title-inner {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

#sp-dashboard-error {
    flex-shrink: 0;
}

#sp-dashboard-busy {
    flex-shrink: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.sp-dashboard-busy-off {
    display: none;
}

.sp-dashboard-busy-on {
    display: block;
    position: relative;
    height: 0;
    z-index: 20;
}

.sp-dashboard-busy-on::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #EE4D2D, transparent);
    animation: sp-dashboard-busy-bar 1.1s ease-in-out infinite;
    z-index: 1200;
    pointer-events: none;
}

@keyframes sp-dashboard-busy-bar {
    0% { transform: translateX(-100%); opacity: 0.4; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0.4; }
}

.sp-page-header h1 {
    font-size: 22px !important;
    margin: 0 !important;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Colunas 5/7 com +100px na área esquerda (slider alinhado aos gráficos) */
.sp-page .sp-col-left {
    flex: 0 0 calc(41.666667% + 100px) !important;
    max-width: calc(41.666667% + 100px) !important;
}

.sp-page .sp-col-right {
    flex: 0 0 calc(58.333333% - 100px) !important;
    max-width: calc(58.333333% - 100px) !important;
}

.sp-main-row {
    flex: 1;
    min-height: 0;
    margin: 0 !important;
}

.sp-main-row > [class*="col"] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sp-right-col-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.sp-charts-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 0;
}

.sp-chart-wrap {
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #161b22;
    border-radius: 6px;
    overflow: hidden;
}

.sp-chart-title {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #c9d1d9;
    text-align: center;
    padding: 4px 6px 2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-chart-wrap .dash-graph,
.sp-chart-wrap .js-plotly-plot {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}

/* Filtros — 2 linhas alinhadas à coluna dos KPIs (5/7) */
.sp-filters-main {
    margin-bottom: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 2500;
    overflow: visible;
}

.sp-filters-periodo-col {
    min-width: 0;
}

.sp-filters-main .sp-filter-periodo {
    width: 100%;
    min-width: 0;
}

.sp-filters-main .sp-filter-periodo .sp-slider,
.sp-filters-main .sp-filter-periodo .dash-slider {
    width: 100% !important;
    max-width: 100%;
}

.sp-filters-right-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: visible;
}

.sp-filters-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    position: relative;
    z-index: 0;
    overflow: visible;
}
.sp-filters-line:has(button[aria-expanded="true"]) {
    z-index: 20;
}

.sp-filters-main .sp-filter-item > span,
.sp-filters-main .sp-filter-periodo > div > span:first-child {
    font-size: 10px !important;
    margin-bottom: 2px !important;
}

.sp-filters-main button.dash-dropdown.sp-dropdown,
.sp-filters-main button.dash-dropdown.sp-dropdown .dash-dropdown-trigger {
    min-height: 30px !important;
}

.sp-filter-item,
.sp-filter-periodo {
    min-width: 0;
    overflow: visible;
}

.sp-filters-main .sp-filter-item {
    position: relative;
    min-width: 0;
}

#sp-col-canal { flex: 0 0 110px; }
#sp-col-view-tipo {
    flex: 0 0 115px;
    width: 115px;
    min-width: 115px;
    max-width: 115px;
}

#sp-col-view-tipo .dash-dropdown-wrapper,
#sp-col-view-tipo button.dash-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
#sp-col-data-tipo { flex: 0 0 140px; }
#sp-col-gran { flex: 0 0 120px; }
#sp-col-empresa { flex: 0 0 110px; }
#sp-col-table-visao {
    flex: 0 0 130px;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

#sp-col-table-visao .dash-dropdown-wrapper,
#sp-col-table-visao button.dash-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
#sp-col-produto { flex: 0 0 280px; }
#sp-col-tipo { flex: 0 0 120px; }
#sp-col-emb { flex: 0 0 240px; }
#sp-col-kit { flex: 0 0 90px; }

@media (max-width: 1200px) {
    .sp-page .sp-col-left,
    .sp-page .sp-col-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.sp-page-marketplaces #sp-periodo .dash-slider-range { background-color: #2ea043 !important; }
.sp-page-marketplaces #sp-periodo .dash-slider-thumb,
.sp-page-marketplaces #sp-periodo [class*="dash-slider-thumb"] {
    background-color: #2ea043 !important;
    border-color: #2ea043 !important;
}
.sp-page-marketplaces #sp-periodo .dash-slider-thumb:hover,
.sp-page-marketplaces #sp-periodo [class*="dash-slider-thumb"]:hover {
    background-color: #3fb950 !important;
    border-color: #3fb950 !important;
}

.sp-page-shopee #sp-periodo .dash-slider-range { background-color: #EE4D2D !important; }
.sp-page-shopee #sp-periodo .dash-slider-thumb,
.sp-page-shopee #sp-periodo [class*="dash-slider-thumb"] {
    background-color: #EE4D2D !important;
    border-color: #EE4D2D !important;
}
.sp-page-shopee #sp-periodo .dash-slider-thumb:hover,
.sp-page-shopee #sp-periodo [class*="dash-slider-thumb"]:hover {
    background-color: #ff6b47 !important;
    border-color: #ff6b47 !important;
}

.sp-page-meli #sp-periodo .dash-slider-range { background-color: #FFE600 !important; }
.sp-page-meli #sp-periodo .dash-slider-thumb,
.sp-page-meli #sp-periodo [class*="dash-slider-thumb"] {
    background-color: #FFE600 !important;
    border-color: #FFE600 !important;
}
.sp-page-meli #sp-periodo .dash-slider-thumb:hover,
.sp-page-meli #sp-periodo [class*="dash-slider-thumb"]:hover {
    background-color: #fff44f !important;
    border-color: #fff44f !important;
}

.sp-filter-item {
    position: relative;
}

.sp-filter-item .dash-dropdown-wrapper,
.sp-filter-item button.dash-dropdown {
    max-width: 100%;
}

/* Dropdowns abrem como overlay para baixo, sem o Radix/Plotly cobrir a lista */
.sp-dropdown .Select-menu-outer,
.dash-dropdown .Select-menu-outer,
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-content {
    position: absolute !important;
    z-index: 9999 !important;
    width: 100% !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-height: min(280px, calc(100vh - 140px)) !important;
    overflow-y: auto !important;
}

.dash-dropdown-wrapper [data-radix-popper-content-wrapper] {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    min-width: 100% !important;
    width: 100% !important;
}

.sp-filter-item:has(button[aria-expanded="true"]),
.sp-filter-item:has(.dash-dropdown-wrapper:has(button[aria-expanded="true"])) {
    z-index: 3000;
}

.sp-filter-item .dash-dropdown-wrapper {
    position: relative;
}

/* Painel direito: KPIs + tabela escalam juntos */
.sp-right-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
    background-color: #0e1117;
    overflow: hidden;
}

.sp-right-scale {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    width: 100%;
    transform-origin: top center;
}

.sp-grid-wrap {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #161b22;
    border-radius: 6px;
    overflow: hidden;
}

.sp-grid-wrap > div {
    flex: 1;
    min-height: 0;
    background-color: #161b22 !important;
}

.sp-grid-wrap .ag-theme-alpine-dark {
    flex: 1;
    height: 100% !important;
    min-height: 0;
    width: 100% !important;
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
    --ag-header-background-color: #1a1f2e;
    --ag-border-color: #30363d;
    --ag-foreground-color: #c9d1d9;
    --ag-secondary-foreground-color: #8b949e;
    --ag-cell-horizontal-padding: 2px;
    --ag-header-height: 28px;
    --ag-row-height: 28px;
    --ag-font-size: 11px;
}

/* Menu de contexto (copiar/colar) — texto claro no tema escuro */
.sp-grid-wrap .ag-theme-alpine-dark .ag-menu,
.sp-grid-wrap .ag-theme-alpine-dark .ag-popup,
.sp-grid-wrap .ag-theme-alpine-dark .ag-popup-child {
    --ag-background-color: #161b22;
    --ag-foreground-color: #c9d1d9;
    --ag-secondary-foreground-color: #c9d1d9;
    --ag-border-color: #30363d;
    background-color: #161b22;
    color: #c9d1d9;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option,
.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option-active {
    color: #c9d1d9;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option-text,
.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option-part,
.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option-shortcut,
.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-separator-part::after {
    color: #c9d1d9;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-menu-option-icon .ag-icon {
    color: #8b949e;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-cell,
.sp-grid-wrap .ag-theme-alpine-dark .ag-cell {
    padding-left: 4px !important;
    padding-right: 2px !important;
    text-align: left !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-cell-label {
    justify-content: flex-start !important;
    width: 100%;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-cell-text {
    overflow: visible;
    text-overflow: clip;
    text-align: left !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-right-aligned-header .ag-header-cell-label,
.sp-grid-wrap .ag-theme-alpine-dark .ag-right-aligned-cell {
    text-align: left !important;
    justify-content: flex-start !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-cell.sp-ag-left .ag-header-cell-label,
.sp-grid-wrap .ag-theme-alpine-dark .ag-cell.sp-ag-left {
    text-align: left !important;
    justify-content: flex-start !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-cell.sp-ag-center .ag-header-cell-label,
.sp-grid-wrap .ag-theme-alpine-dark .ag-cell.sp-ag-center {
    text-align: center !important;
    justify-content: center !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-group-cell.sp-ag-group .ag-header-group-cell-label {
    justify-content: center !important;
    width: 100%;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-header-group-cell.sp-ag-group .ag-header-group-text {
    overflow: visible;
    text-overflow: clip;
    text-align: center !important;
    font-weight: 600;
    color: #c9d1d9;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-root-wrapper,
.sp-grid-wrap .ag-theme-alpine-dark .ag-root-wrapper-body {
    height: 100% !important;
    min-height: 0;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-body-horizontal-scroll {
    height: 10px !important;
    min-height: 10px !important;
}

/* KPI cards — compactos mas legíveis em 100% */
#sp-kpis {
    width: 100%;
    flex-shrink: 0;
}

.sp-kpi-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-kpi-row {
    gap: 6px !important;
}

.sp-kpi-card {
    border-radius: 5px;
    padding: 12px 14px;
    min-height: 52px;
}

.sp-kpi-card-row1 {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sp-kpi-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.sp-kpi-frete-sub {
    font-size: 10px;
    color: #8b949e;
    line-height: 1.2;
}

.sp-kpi-note {
    font-size: 9px;
    color: #8b949e;
    line-height: 1.15;
    margin-top: 2px;
    padding: 0 2px;
}

.sp-kpi-head-row1 {
    align-items: flex-start;
}

.sp-kpi-val-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.sp-kpi-val-wrap .sp-kpi-val {
    flex: none;
}

.sp-kpi-val-sub {
    font-size: 10px;
    color: #8b949e;
    line-height: 1.15;
    white-space: nowrap;
    opacity: 0.9;
}

.sp-kpi-val-sub-warn {
    color: #f85149;
    opacity: 0.75;
}

.sp-kpi-val-sub-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.sp-kpi-sub-spacer {
    min-height: 14px;
}

.sp-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 3px;
    line-height: 1.15;
}

.sp-kpi-title {
    font-size: 11px;
    color: #8b949e;
    margin-bottom: 0;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

.sp-kpi-val {
    font-size: 22px !important;
    font-weight: 700;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.sp-kpi-comps-line {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    margin-top: 2px;
    line-height: 1.15;
}

.sp-kpi-comp {
    font-size: 11px;
    color: #6e7681;
    white-space: nowrap;
}

.sp-kpi-comp span {
    font-size: 11px !important;
}

.sp-kpi-card-simple .sp-kpi-head {
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.sp-kpi-card-simple .sp-kpi-val {
    text-align: center;
}

/* Linha 1 — 5 cards financeiros compactos */
.sp-kpi-panel .sp-kpi-row-1 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

.sp-kpi-row-1 .sp-kpi-card-row1 {
    padding: 8px 6px;
    min-height: auto;
}

.sp-kpi-row-1 .sp-kpi-head-row1 {
    align-items: flex-start;
    gap: 4px;
}

.sp-kpi-row-1 .sp-kpi-head-row1 .sp-kpi-title {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-kpi-row-1 .sp-kpi-head-row1 .sp-kpi-val {
    flex: 0 1 auto;
    max-width: 62%;
    font-size: 14px !important;
}

.sp-kpi-meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-top: 2px;
    min-width: 0;
    width: 100%;
}

.sp-kpi-row-1 .sp-kpi-frete-sub,
.sp-kpi-row-1 .sp-kpi-val-sub {
    font-size: 8px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-kpi-row-1 .sp-kpi-comps-line {
    gap: 1px;
    margin-top: 4px;
}

.sp-kpi-row-1 .sp-kpi-comp,
.sp-kpi-row-1 .sp-kpi-comp span {
    font-size: 9px !important;
}

/* Linha 2 — 6 cards na mesma linha (painel ~58% da tela) */
.sp-kpi-panel .sp-kpi-row-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

.sp-kpi-row-6 .sp-kpi-card {
    padding: 8px 6px;
    min-height: 44px;
}

.sp-kpi-row-6 .sp-kpi-val {
    font-size: 15px !important;
}

.sp-kpi-row-6 .sp-kpi-title {
    font-size: 9px;
}

.sp-kpi-row-6 .sp-kpi-comp,
.sp-kpi-row-6 .sp-kpi-comp span {
    font-size: 9px !important;
}

.sp-kpi-row-6 .sp-kpi-comps-line {
    gap: 1px;
    margin-top: 1px;
}

.sp-kpi-row-6 .sp-kpi-head {
    gap: 2px;
}

/* Linha 3 — 5 cards de percentual compactos */
.sp-kpi-panel .sp-kpi-row-5:not(.sp-kpi-row-1) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-card {
    padding: 8px 6px;
    min-height: 44px;
}

.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-val {
    font-size: 15px !important;
}

.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-title {
    font-size: 9px;
}

.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-comp,
.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-comp span {
    font-size: 9px !important;
}

.sp-kpi-row-5:not(.sp-kpi-row-1) .sp-kpi-comps-line {
    gap: 1px;
    margin-top: 1px;
}

@media (min-width: 1200px) {
    .sp-kpi-panel .sp-kpi-row:not(.sp-kpi-row-5):not(.sp-kpi-row-6) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .sp-kpi-panel .sp-kpi-row-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    .sp-kpi-panel .sp-kpi-row-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}

.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option:hover,
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option:focus-within,
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option[data-highlighted] {
    background: #21262d !important;
    color: #f0f6fc !important;
}

.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option[aria-selected="true"],
.dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-option[data-state="checked"] {
    background: #1a1f2e !important;
    color: #EE4D2D !important;
}

/* ── AG Grid ag-theme-alpine-dark overrides (ref. Streamlit) ─── */
#sp-grid.ag-theme-alpine-dark .ag-root-wrapper,
#sp-grid.ag-theme-alpine-dark .ag-root-wrapper-body,
#sp-grid.ag-theme-alpine-dark .ag-body,
#sp-grid.ag-theme-alpine-dark .ag-body-viewport,
#sp-grid.ag-theme-alpine-dark .ag-center-cols-viewport,
#sp-grid.ag-theme-alpine-dark .ag-center-cols-container,
#sp-grid.ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport,
#sp-grid.ag-theme-alpine-dark .ag-horizontal-left-spacer,
#sp-grid.ag-theme-alpine-dark .ag-horizontal-right-spacer,
.ag-theme-alpine-dark .ag-root-wrapper {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

.crm-ag.ag-theme-alpine-dark {
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
    --ag-header-background-color: #161b22;
    --ag-control-panel-background-color: #161b22;
    --ag-overlay-background-color: #161b22;
    background-color: #161b22 !important;
}
.crm-page .ag-theme-alpine-dark,
.crm-page .ag-theme-alpine-dark .ag-root,
.crm-page .ag-theme-alpine-dark .ag-root-wrapper,
.crm-page .ag-theme-alpine-dark .ag-root-wrapper-body,
.crm-page .ag-theme-alpine-dark .ag-body,
.crm-page .ag-theme-alpine-dark .ag-body-viewport,
.crm-page .ag-theme-alpine-dark .ag-center-cols-viewport,
.crm-page .ag-theme-alpine-dark .ag-center-cols-container,
.crm-page .ag-theme-alpine-dark .ag-center-cols-clipper,
.crm-page .ag-theme-alpine-dark .ag-overlay,
.crm-page .ag-theme-alpine-dark .ag-overlay-wrapper,
.crm-page .ag-theme-alpine-dark .ag-overlay-no-rows-wrapper,
.crm-page .ag-theme-alpine-dark .ag-overlay-no-rows-center,
.crm-page .ag-theme-alpine-dark .ag-layout-normal,
.crm-page .ag-theme-alpine-dark .ag-sticky-top,
.crm-page .ag-theme-alpine-dark .ag-header,
.crm-page .ag-theme-alpine-dark .ag-header-viewport,
.crm-page .ag-theme-alpine-dark .ag-body-horizontal-scroll,
.crm-page .ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport,
.crm-page .ag-theme-alpine-dark .ag-body-vertical-scroll-viewport,
.crm-page .ag-theme-alpine-dark .ag-full-width-container,
.crm-page .ag-theme-alpine-dark .ag-dummy-container {
    background-color: #161b22 !important;
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
}
.crm-wf {
    flex: 0 0 360px;
    min-width: 300px;
    max-width: 420px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.crm-wf-step {
    background: #1a1f2e;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px;
}
.crm-wf-flag {
    height: 3px;
    border-radius: 2px;
    background: #30363d;
    margin-bottom: 8px;
}
.crm-wf-flag.is-ok {
    background: #2ea043;
}
.crm-wf-flag.is-wait {
    background: #e6962a;
}
.crm-wf-flag.is-no {
    background: #f85149;
}
.crm-wf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.crm-wf-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EE4D2D;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-wf-name {
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 600;
}
.crm-wf-arrow {
    color: #8b949e;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    padding: 2px 0;
}
.crm-wf-body {
    min-height: 18px;
}
.crm-funil-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin: 8px 0;
    flex-shrink: 0;
}
.crm-tpl-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    min-height: 52px;
    flex-shrink: 0;
}
.crm-tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #30363d;
    background: #1a1f2e;
    color: #c9d1d9;
    font-size: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.crm-tpl-chip:active {
    cursor: grabbing;
}
.crm-tpl-chip.is-hold {
    outline: 2px solid #EE4D2D;
    border-color: #EE4D2D;
}
.crm-tpl-chip-st {
    font-size: 10px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.crm-tpl-chip-rascunho .crm-tpl-chip-st { color: #8b949e; }
.crm-tpl-chip-pendente .crm-tpl-chip-st { color: #e6962a; }
.crm-tpl-chip-aprovado .crm-tpl-chip-st { color: #2ea043; }
.crm-tpl-chip-rejeitado .crm-tpl-chip-st,
.crm-tpl-chip-pausado .crm-tpl-chip-st { color: #f85149; }
.crm-funil-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding-bottom: 12px;
}
.crm-funil {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 92px minmax(200px, 1fr) 92px minmax(200px, 1fr);
    gap: 8px;
    min-height: 420px;
    align-items: stretch;
}
.crm-funil-gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 0;
    min-width: 0;
}
.crm-funil-gap-lab {
    color: #8b949e;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.crm-funil-gap-val {
    color: #EE4D2D;
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
}
.crm-funil-gap-arrow {
    color: #EE4D2D;
    font-size: 18px;
    line-height: 1.2;
    margin: 2px 0;
}
.crm-funil-gap-sub {
    color: #8b949e;
    font-size: 10px;
}
.crm-funil-col {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.crm-funil-col-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.crm-funil-col-h strong {
    color: #e6edf3;
    font-size: 14px;
}
.crm-funil-col-h span {
    color: #8b949e;
    font-size: 11px;
}
.crm-funil-slot-lab {
    color: #8b949e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.crm-wf-slot {
    min-height: 58px;
    border: 1px dashed #30363d;
    border-radius: 8px;
    background: #0e1117;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.crm-wf-slot.is-over,
.crm-wf-slot:hover {
    border-color: #EE4D2D;
}
.crm-wf-slot.is-filled {
    border-style: solid;
    background: #1a1f2e;
}
.crm-wf-slot[data-ramo="envio"] { box-shadow: inset 3px 0 0 #EE4D2D; }
.crm-wf-slot[data-ramo="leu"] { box-shadow: inset 3px 0 0 #00BCD4; }
.crm-wf-slot[data-ramo="nao_leu"] { box-shadow: inset 3px 0 0 #e6962a; }
.crm-wf-slot[data-ramo="converteu"] { box-shadow: inset 3px 0 0 #2ea043; }
.crm-wf-slot-ph {
    color: #8b949e;
    font-size: 11px;
}
.crm-wf-slot-name {
    color: #e6edf3;
    font-size: 12px;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}
.crm-wf-x {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #8b949e;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.crm-wf-x:hover { color: #f85149; }
.crm-funil-rec {
    display: grid;
    grid-template-columns: 92px repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
}
.crm-funil-rec-h {
    color: #8b949e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 4px 4px;
}
.crm-funil-rec-lab {
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-right: 4px;
    line-height: 1.25;
}
.crm-funil-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #8b949e;
    font-size: 11px;
    margin: 0 0 8px;
}
.crm-funil-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}
@media (max-width: 1100px) {
    .crm-funil {
        grid-template-columns: 1fr;
    }
    .crm-funil-gap {
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        padding: 4px 0;
    }
}
.crm-ag.ag-theme-alpine-dark .ag-root,
.crm-ag.ag-theme-alpine-dark .ag-root-wrapper,
.crm-ag.ag-theme-alpine-dark .ag-root-wrapper-body,
.crm-ag.ag-theme-alpine-dark .ag-body,
.crm-ag.ag-theme-alpine-dark .ag-body-viewport,
.crm-ag.ag-theme-alpine-dark .ag-center-cols-viewport,
.crm-ag.ag-theme-alpine-dark .ag-center-cols-container,
.crm-ag.ag-theme-alpine-dark .ag-overlay,
.crm-ag.ag-theme-alpine-dark .ag-overlay-wrapper,
.crm-ag.ag-theme-alpine-dark .ag-overlay-no-rows-wrapper,
.crm-ag.ag-theme-alpine-dark .ag-overlay-no-rows-center,
.crm-ag.ag-theme-alpine-dark .ag-layout-normal,
.crm-ag.ag-theme-alpine-dark .ag-sticky-top,
.crm-ag.ag-theme-alpine-dark .ag-header-viewport {
    background-color: #161b22 !important;
}
.crm-grid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #EE4D2D;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.crm-grid-btn-ok {
    background: #2ea043;
}
.crm-grid-btn-wait {
    background: #e6962a;
}
.crm-grid-btn-no {
    background: #f85149;
}
.crm-lista-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.crm-lista-bottom {
    flex: 1 1 0;
    min-height: 180px;
    display: flex;
    gap: 10px;
}
.crm-lista-pick,
.crm-lista-itens-wrap {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.crm-lista-pick[hidden] {
    display: none !important;
}
.crm-lista-tipo .form-check-label {
    color: #c9d1d9;
    font-size: 12px;
}
#crm-grid.ag-theme-alpine-dark .ag-root,
#crm-grid-prod.ag-theme-alpine-dark .ag-root,
#crm-grid.ag-theme-alpine-dark .ag-root-wrapper,
#crm-grid-prod.ag-theme-alpine-dark .ag-root-wrapper,
#crm-grid.ag-theme-alpine-dark .ag-root-wrapper-body,
#crm-grid-prod.ag-theme-alpine-dark .ag-root-wrapper-body,
#crm-grid.ag-theme-alpine-dark .ag-body,
#crm-grid-prod.ag-theme-alpine-dark .ag-body,
#crm-grid.ag-theme-alpine-dark .ag-body-viewport,
#crm-grid-prod.ag-theme-alpine-dark .ag-body-viewport,
#crm-grid.ag-theme-alpine-dark .ag-center-cols-viewport,
#crm-grid-prod.ag-theme-alpine-dark .ag-center-cols-viewport,
#crm-grid.ag-theme-alpine-dark .ag-center-cols-container,
#crm-grid-prod.ag-theme-alpine-dark .ag-center-cols-container,
#crm-grid.ag-theme-alpine-dark .ag-overlay,
#crm-grid-prod.ag-theme-alpine-dark .ag-overlay,
#crm-grid.ag-theme-alpine-dark .ag-layout-normal,
#crm-grid-prod.ag-theme-alpine-dark .ag-layout-normal,
#crm-grid.ag-theme-alpine-dark .ag-sticky-top,
#crm-grid-prod.ag-theme-alpine-dark .ag-sticky-top,
#crm-grid.ag-theme-alpine-dark .ag-header-viewport,
#crm-grid-prod.ag-theme-alpine-dark .ag-header-viewport {
    background-color: #161b22 !important;
}

.crm-top-cards {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 10px;
    flex-shrink: 0;
}
.crm-top-counts {
    flex: 1 1 0;
    min-width: 0;
}
.crm-top-kpis {
    flex: 1 1 0;
    min-width: 0;
}
.crm-count-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crm-count-cap {
    color: #8b949e;
    font-size: 11px;
    margin: 2px 0 0;
}
.crm-count-grid {
    display: grid;
    gap: 6px;
}
.crm-count-grid-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.crm-count-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: 1;
}
.crm-count-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 5px;
    padding: 6px 8px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.crm-count-grid-5 .crm-count-card {
    min-height: 0;
    flex: 1;
}
.crm-count-val {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}
.crm-count-lbl {
    color: #8b949e;
    font-size: 10px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-at-cap {
    color: #8b949e;
    font-size: 11px;
    margin: 0 0 6px;
}
.crm-at-panel {
    height: 100%;
    gap: 0;
}
.crm-at-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    flex: 1;
    min-height: 0;
}
.crm-at-panel .sp-kpi-card {
    padding: 8px 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.crm-at-panel .sp-kpi-head {
    gap: 4px;
    align-items: baseline;
}
.crm-at-panel .sp-kpi-title {
    font-size: 11px;
}
.crm-at-panel .sp-kpi-val {
    font-size: 18px !important;
    font-weight: 700;
}
.crm-at-panel .sp-kpi-comps-line {
    margin-top: 4px;
    gap: 6px;
}
.crm-at-panel .sp-kpi-comp,
.crm-at-panel .sp-kpi-comp span {
    font-size: 10px !important;
}
@media (max-width: 1280px) {
    .crm-top-cards {
        flex-direction: column;
    }
    .crm-top-counts {
        flex: 1 1 auto;
        width: 100%;
    }
}

.crm-ficha-modal .modal-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
.crm-ficha-modal .modal-header,
.crm-ficha-modal .modal-footer {
    background-color: #0e1117 !important;
    border-color: #30363d !important;
}
.crm-ficha-modal .modal-body {
    background-color: #161b22 !important;
}
.crm-ficha-modal .modal-dialog {
    max-width: min(980px, 94vw);
}
#crm-abord-add-modal {
    z-index: 1080;
}

.crm-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    box-sizing: border-box;
}
.crm-nav {
    flex-shrink: 0;
    margin: 6px 0 0;
}
.crm-pane {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.crm-pane[hidden] {
    display: none !important;
}
.crm-btn-ficha {
    background: transparent !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
}
.crm-btn-ficha-on {
    background: #EE4D2D !important;
    border: 1px solid #EE4D2D !important;
    color: #fff !important;
}
.crm-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2ea043;
    color: #fff !important;
    font-weight: 600;
    font-size: 12px;
    border-radius: 6px;
    padding: 0 12px;
    height: 36px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.crm-wa-btn:hover {
    background: #3fb950;
    color: #fff !important;
    text-decoration: none;
}
.crm-wa-btn[hidden] {
    display: none !important;
}
.crm-wa-split {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: 10px;
}
.crm-wa-form {
    flex: 0 0 340px;
    min-width: 280px;
    max-width: 380px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
}
.crm-wa-grid {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.crm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin: 10px 0 8px;
    overflow: visible;
    flex-shrink: 0;
}
.crm-main-table {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.crm-agenda-field {
    width: 100%;
    background: #1a1f2e;
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
    min-height: 36px;
    --Dash-Fill-Inverse-Strong: #1a1f2e;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;
}
.crm-agenda-field:hover,
.crm-agenda-field:focus-within {
    border-color: #EE4D2D;
}
.crm-agenda-field .dash-datepicker {
    width: 100%;
    color: #c9d1d9;
    --Dash-Fill-Inverse-Strong: #1a1f2e;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
}
.crm-agenda-field .dash-datepicker-input-wrapper {
    width: 100% !important;
    min-height: 36px !important;
    background: #1a1f2e !important;
    color: #c9d1d9 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 10px !important;
}
.crm-agenda-field .dash-datepicker-input-wrapper:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.crm-agenda-field .dash-datepicker-input,
.crm-agenda-field input {
    width: 100% !important;
    background: transparent !important;
    color: #c9d1d9 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 !important;
}
.crm-agenda-field .dash-datepicker-input::placeholder,
.crm-agenda-field input::placeholder {
    color: #8b949e !important;
}
.crm-agenda-field .dash-datepicker-caret-icon {
    color: #8b949e !important;
    fill: #8b949e !important;
}
.crm-ficha-modal {
    overflow: visible;
}
#crm-grid.ag-theme-alpine-dark .ag-cell,
#crm-grid.ag-theme-alpine-dark .ag-cell-value {
    color: #e6edf3;
}

#sp-grid.ag-theme-alpine-dark .ag-header,
.ag-theme-alpine-dark .ag-header {
    background-color: #1a1f2e !important;
    border-color: #30363d !important;
}

#sp-grid.ag-theme-alpine-dark .ag-row,
.ag-theme-alpine-dark .ag-row {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

#sp-grid.ag-theme-alpine-dark .ag-row-odd,
.ag-theme-alpine-dark .ag-row-odd {
    background-color: #1a1f2e !important;
}

#sp-grid.ag-theme-alpine-dark .ag-header-cell-text,
.ag-theme-alpine-dark .ag-header-cell-text {
    color: #f0f6fc !important;
    font-weight: 600 !important;
}

#sp-grid.ag-theme-alpine-dark .ag-group-cell,
.ag-theme-alpine-dark .ag-group-cell,
#sp-grid.ag-theme-alpine-dark .ag-group-value,
.ag-theme-alpine-dark .ag-group-value {
    color: #f0f6fc !important;
}

#sp-grid.ag-theme-alpine-dark .ag-icon,
.ag-theme-alpine-dark .ag-icon {
    color: #c9d1d9 !important;
}

#sp-grid.ag-theme-alpine-dark .ag-header-cell-menu-button,
.ag-theme-alpine-dark .ag-header-cell-menu-button {
    display: none !important;
}

.sp-grid-wrap #sp-grid-prod.ag-theme-alpine-dark .ag-pinned-left-header,
.sp-grid-wrap #sp-grid-prod.ag-theme-alpine-dark .ag-pinned-left-cols-container {
    border-right: 1px solid #30363d !important;
    z-index: 3;
    flex-shrink: 0;
    min-width: 205px !important;
}

.sp-grid-wrap #sp-grid-data.ag-theme-alpine-dark .ag-pinned-left-header,
.sp-grid-wrap #sp-grid-data.ag-theme-alpine-dark .ag-pinned-left-cols-container {
    border-right: 1px solid #30363d !important;
    z-index: 3;
    flex-shrink: 0;
    min-width: 130px !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-pinned-left-cols-container .ag-cell,
.sp-grid-wrap .ag-theme-alpine-dark .ag-pinned-left-header .ag-header-cell {
    padding-left: 4px !important;
    padding-right: 2px !important;
}

.sp-grid-wrap .ag-theme-alpine-dark .ag-group-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── RangeSlider Dash 4 (#sp-periodo) ───────────────────────────── */
/* Dash 4 usa dash-slider-* (não rc-slider-*) */

#sp-periodo .dash-slider-track,
.sp-slider .dash-slider-track {
    background-color: #30363d !important;
    height: 4px !important;
}

#sp-periodo .dash-slider-range,
.sp-slider .dash-slider-range {
    background-color: #2ea043 !important;
}

#sp-periodo .dash-slider-thumb,
.sp-slider .dash-slider-thumb,
#sp-periodo [class*="dash-slider-thumb"],
.sp-slider [class*="dash-slider-thumb"] {
    background-color: #2ea043 !important;
    border: 2px solid #2ea043 !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: none !important;
}

#sp-periodo .dash-slider-thumb:hover,
.sp-slider .dash-slider-thumb:hover,
#sp-periodo [class*="dash-slider-thumb"]:hover,
.sp-slider [class*="dash-slider-thumb"]:hover {
    background-color: #3fb950 !important;
    border-color: #3fb950 !important;
}

#sp-periodo .dash-slider-mark,
.sp-slider .dash-slider-mark {
    color: #8b949e !important;
    font-size: 10px !important;
}

/* Inputs numéricos nas pontas (Dash 4 allow_direct_input) + tooltips */
#sp-periodo .dash-range-slider-inputs,
#sp-periodo .dash-range-slider-input,
#sp-periodo .dash-range-slider-min-input,
#sp-periodo .dash-range-slider-max-input,
.sp-slider .dash-range-slider-inputs,
.sp-slider .dash-range-slider-input,
.dash-slider-tooltip,
.dash-slider-tooltip.always-visible {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* ── Filter bar layout ───────────────────────────────────────────── */
.sp-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}
/* Remove X do dropdown quando placeholder/Todos */
.sp-dropdown .Select-clear-zone {
    display: none !important;
}
.sp-dropdown.has-value .Select-clear-zone {
    display: flex !important;
}

/* Esconde X flutuante nos dropdowns */
.sp-dropdown .Select-clear,
.sp-dropdown .Select-clear-zone {
    display: none !important;
}

/* Campo de busca inline na pill (não caixa separada) */
.sp-dropdown .Select-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px !important;
}
.sp-dropdown .Select-input input {
    background: transparent !important;
    color: #c9d1d9 !important;
    font-size: 13px !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Esconde a caixa de search separada abaixo da pill */
.sp-dropdown .Select-search-box {
    display: none !important;
}

.row-media {
    background-color: #2d2a1e !important;
    font-weight: 700 !important;
    border-top: 2px solid #5a5035 !important;
}
.row-media .ag-cell:not([col-id$="_pct"]) {
    color: #d4c5a0 !important;
}
.row-soma {
    background-color: #1e2a2d !important;
    font-weight: 700 !important;
    border-top: 2px solid #355a50 !important;
}
.row-soma .ag-cell:not([col-id$="_pct"]):not([col-id="total_ml"]) {
    color: #a0d4c5 !important;
}
.row-projecao {
    background-color: #2a1e14 !important;
    font-weight: 700 !important;
    border-top: 1px solid #8b5e3c !important;
}
.row-projecao .ag-cell:not([col-id$="_pct"]) {
    color: #c49a6c !important;
}

/* Popup pedidos do dia — títulos menores */
.sp-day-modal-grid .ag-header-cell.sp-day-modal-hdr .ag-header-cell-label,
.sp-day-modal-grid .ag-header-cell.sp-day-modal-hdr .ag-header-cell-text {
    font-size: 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.sp-day-modal-grid .ag-header-cell.sp-day-modal-hdr {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.sp-day-modal-grid .ag-cell[col-id=faturamento] {
    color: #c9d1d9 !important;
}

.sp-day-modal-dialog .modal-content,
.sp-day-modal .modal-content {
    background-color: #0e1117 !important;
    border: 1px solid #30363d !important;
}

.sp-day-modal-grid.ag-theme-alpine-dark {
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
    --ag-header-background-color: #1a1f2e;
    --ag-row-hover-color: #21262d;
    --ag-border-color: #30363d;
    --ag-foreground-color: #c9d1d9;
}

.sp-day-modal-grid.ag-theme-alpine-dark .ag-row.sp-day-modal-total {
    background-color: #1a1f2e !important;
    font-weight: 600;
    border-top: 1px solid #30363d !important;
}

.sp-day-modal-grid.ag-theme-alpine-dark .ag-row.sp-day-modal-total .ag-cell {
    color: #c9d1d9 !important;
}

/* ── Insights modal & dropdowns ─────────────────────────────────── */
.insights-header-btn:hover {
    border-color: #EE4D2D !important;
}

.insights-modal .modal-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

.insights-modal .modal-dialog {
    pointer-events: auto;
}

.insights-dropdown .Select-control,
.insights-dropdown .Select__control,
div.insights-dropdown .dash-dropdown {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 20px !important;
    color: #c9d1d9 !important;
}

.insights-dropdown .Select-control:hover,
.insights-dropdown .Select__control:hover,
div.insights-dropdown .dash-dropdown:hover {
    border-color: #EE4D2D !important;
}

.insights-dropdown .Select-value-label,
.insights-dropdown .Select__single-value,
.insights-dropdown .Select-placeholder,
.insights-dropdown .dash-dropdown-value {
    color: #c9d1d9 !important;
}

.insights-dropdown .Select-menu-outer,
.insights-dropdown .Select__menu,
.insights-dropdown .dash-dropdown-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

.insights-dropdown .VirtualizedSelectOption,
.insights-dropdown .Select__option,
.insights-dropdown .dash-dropdown-option {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}

.insights-dropdown .VirtualizedSelectFocusedOption,
.insights-dropdown .Select__option--is-focused,
.insights-dropdown .dash-dropdown-option:hover,
.insights-dropdown .dash-dropdown-option[data-highlighted] {
    background-color: #21262d !important;
}

.insights-dropdown .Select-arrow-zone .Select-arrow,
.insights-dropdown .Select__indicator svg {
    fill: #8b949e !important;
}

/* Insights modal — dropdowns herdam sp-dropdown; z-index no menu */
.insights-modal .dash-dropdown-wrapper:has(button.sp-dropdown) {
    width: 100%;
}

.insights-modal .dash-dropdown-wrapper:has(button.sp-dropdown) .dash-dropdown-content {
    z-index: 1060 !important;
}

.insights-filter-row .dash-dropdown-wrapper {
    width: 100%;
}

/* Insights — Dash 4 date picker (campo + calendário portal) */
.insights-modal .insights-date-row {
    width: 100%;
}

.insights-modal .insights-date-field {
    width: 100%;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 20px;
    overflow: hidden;
    min-height: 36px;
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

}

.insights-modal .insights-date-field:hover,
.insights-modal .insights-date-field:focus-within {
    border-color: #EE4D2D;
}

.insights-modal .insights-date-field .dash-datepicker {
    width: 100%;
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

    color: #c9d1d9;
}

.insights-modal .insights-date-field .dash-datepicker-input-wrapper {
    width: 100% !important;
    min-height: 36px !important;
    background: #161b22 !important;
    color: #c9d1d9 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

}

.insights-modal .insights-date-field .dash-datepicker-input-wrapper:focus-within {
    border: none !important;
    outline: none !important;
}

.insights-modal .insights-date-field .dash-datepicker-input {
    width: 100% !important;
    background: transparent !important;
    color: #c9d1d9 !important;
    font-size: 13px !important;
}

.insights-modal .insights-date-field .dash-datepicker-input::placeholder {
    color: #8b949e !important;
}

.insights-modal .insights-date-field .dash-datepicker-caret-icon {
    color: #8b949e !important;
    fill: #8b949e !important;
}

/* Calendário renderizado em portal (fora do modal) — precisa do tema escuro explícito */
.dash-datepicker-content,
.dash-datepicker-portal .dash-datepicker-content {
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

    background: #161b22 !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    z-index: 1065 !important;
}

.dash-datepicker-content .dash-datepicker-calendar-week,
.dash-datepicker-content .dash-datepicker-calendar-month-header th {
    color: #8b949e !important;
}

.dash-datepicker-content .dash-datepicker-calendar td.dash-datepicker-calendar-date-inside {
    color: #c9d1d9 !important;
}

.dash-datepicker-content .dash-datepicker-calendar td.dash-datepicker-calendar-date-outside {
    color: #6e7681 !important;
}

.dash-datepicker-content .dash-datepicker-calendar td:hover {
    background-color: #21262d !important;
}

.dash-datepicker-content
    .dash-datepicker-calendar td.dash-datepicker-calendar-date-selected:not(
        .dash-datepicker-calendar-date-outside
    ) {
    background-color: #EE4D2D !important;
    color: #ffffff !important;
}

.dash-datepicker-content .dash-datepicker-controls {
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

}

.dash-datepicker-content .dash-datepicker-controls .dash-input,
.dash-datepicker-content .dash-datepicker-controls .dash-input-stepper {
    background: #21262d !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
}

.dash-datepicker-content .dash-datepicker-controls .dash-input-stepper button {
    background: transparent !important;
    color: #c9d1d9 !important;
    border: none !important;
}

.dash-datepicker-content .dash-datepicker-controls .dash-dropdown-wrapper {
    
    --Dash-Fill-Inverse-Strong: #161b22;
    --Dash-Stroke-Strong: #30363d;
    --Dash-Fill-Interactive-Strong: #EE4D2D;
    --Dash-Text-Strong: #c9d1d9;
    --Dash-Text-Weak: #8b949e;
    --Dash-Text-Disabled: #6e7681;
    --Dash-Fill-Interactive-Weak: #21262d;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.25);
    --Dash-Spacing: 4px;

}

.dash-datepicker-content .dash-datepicker-controls button.dash-dropdown {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
    border-radius: 6px !important;
    min-height: 32px !important;
}

.dash-datepicker-content .dash-datepicker-controls .dash-dropdown-value {
    color: #c9d1d9 !important;
}

.dash-datepicker-content .dash-dropdown-content {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
    z-index: 1070 !important;
}

.dash-datepicker-content .dash-dropdown-option {
    color: #c9d1d9 !important;
}

.dash-datepicker-content .dash-dropdown-option:hover,
.dash-datepicker-content .dash-dropdown-option[data-highlighted] {
    background: #21262d !important;
}

.dash-datepicker-content .dash-datepicker-month-nav {
    color: #EE4D2D !important;
}

/* Legado react-dates (fallback) */
.insights-date-picker .SingleDatePickerInput__withBorder {
    border: 1px solid #30363d;
    border-radius: 20px;
    background: #161b22;
}
.insights-date-picker .DateInput_input {
    background: #161b22;
    color: #c9d1d9;
    font-size: 13px;
}
.insights-date-picker .DateInput {
    background: #161b22;
    width: 100%;
}

/* ── Calculadora de Preço (modal) — canto esquerdo ───────────────── */
.preco-modal.modal {
    padding: 0 !important;
    pointer-events: none;
}

.preco-modal .modal-dialog {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0 !important;
    max-width: min(560px, 46vw);
    width: min(560px, 46vw);
    height: 100%;
    max-height: 100%;
    transform: none !important;
    pointer-events: auto;
}

.preco-modal .modal-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    border-left: none;
    border-radius: 0;
    color: #c9d1d9 !important;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
}

.preco-modal .modal-header,
.preco-modal .modal-footer {
    flex-shrink: 0;
}

.preco-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.preco-modal input.preco-num-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.preco-modal input.preco-num-input[type=number]::-webkit-outer-spin-button,
.preco-modal input.preco-num-input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.preco-modal input.preco-num-input {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
    outline: none;
}

.preco-modal input.preco-num-input:focus {
    border-color: #EE4D2D !important;
    box-shadow: 0 0 0 1px rgba(238, 77, 45, 0.35);
}

.preco-modal input.preco-num-input:read-only {
    background: #21262d !important;
    color: #8b949e !important;
    opacity: 1;
    cursor: not-allowed;
}

.preco-modal input.preco-num-input::placeholder {
    color: #6e7681 !important;
}

.notif-header-btn:hover {
    border-color: #EE4D2D !important;
    color: #f0f6fc !important;
}
.notif-badge {
    margin-left: 2px;
}
.notif-reprocess-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.notif-reprocess-eta {
    color: #8b949e;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.notif-reprocess-btn {
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 5px;
    color: #c9d1d9;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    font-family: Inter, sans-serif;
}
.notif-reprocess-primary {
    border-color: #2ea043;
    color: #aff5b4;
}
.notif-reprocess-primary:hover {
    background: #1a3d2a;
}
.notif-reprocess-secondary {
    border-color: #388bfd;
    color: #a5d3ff;
}
.notif-reprocess-secondary:hover {
    background: #15253d;
}

/* ── Web Push (central de notificações) ── */
.push-alerts-bar {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.push-alerts-title {
    color: #f0f6fc;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.push-alerts-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.push-alerts-status {
    color: #8b949e;
    font-size: 11px;
}
.push-alerts-status[data-kind="ok"] {
    color: #2ea043;
}
.push-alerts-status[data-kind="warn"] {
    color: #e6962a;
}
.push-alerts-hint {
    display: none;
    color: #8b949e;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 8px;
}
.push-alerts-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.sp-header-push-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pwa-header-btn:hover {
    border-color: #EE4D2D !important;
    color: #f0f6fc !important;
}
@media (max-width: 720px) {
    .pwa-header-label-long {
        display: none;
    }
}

.pwa-text-link {
    background: none;
    border: none;
    padding: 0;
    color: #58a6ff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: Inter, sans-serif;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pwa-text-link:hover {
    color: #79b8ff;
}

/* Native <dialog> — Baixar + Configurações (sem polyfill CDN) */
.pwa-dialog {
    margin: auto;
    width: calc(100% - 24px);
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow: auto;
    border: 1px solid #30363d;
    border-radius: 12px;
    background: #161b22;
    color: #c9d1d9;
    padding: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    z-index: 10050;
}
.pwa-dialog[open] {
    display: block;
}
.pwa-dialog.pwa-dialog-wide {
    max-width: 480px;
}
.pwa-dialog::backdrop {
    background: rgba(1, 4, 9, 0.72);
}
.js-pwa-install-card,
.js-pwa-settings-card {
    cursor: pointer;
}
.js-pwa-install-card:active,
.js-pwa-settings-card:active {
    border-color: #EE4D2D;
}
/* App já na Tela de Início: some links de instalar */
html.pwa-standalone #push-settings-open-install,
html.pwa-standalone #notif-open-install,
html.pwa-standalone .pwa-settings-install-link {
    display: none !important;
}
.pwa-dialog-inner {
    padding: 18px 16px 16px;
    position: relative;
}
.pwa-dialog-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    color: #8b949e;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.pwa-dialog-close:hover {
    color: #f0f6fc;
}
.pwa-dialog h2 {
    color: #f0f6fc;
    font-size: 18px;
    font-weight: 700;
    margin: 0 28px 8px 0;
    font-family: Inter, sans-serif;
}
.pwa-dialog-lead,
.pwa-dialog-user {
    color: #8b949e;
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 12px;
}
.pwa-dialog-user strong {
    color: #c9d1d9;
}
.pwa-dialog ol {
    margin: 0 0 12px;
    padding-left: 20px;
    color: #c9d1d9;
    font-size: 13px;
    line-height: 1.5;
}
.pwa-dialog li + li {
    margin-top: 6px;
}
.pwa-dialog-note {
    color: #8b949e;
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 12px;
}
.pwa-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.pwa-dialog-actions button,
.pwa-primary-btn,
.pwa-secondary-btn {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    font-family: Inter, sans-serif;
}
.pwa-primary-btn {
    background: #EE4D2D;
    border: 1px solid #EE4D2D;
    color: #fff;
}
.pwa-primary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.pwa-secondary-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
}

.pwa-pref-matrix {
    overflow-x: auto;
    margin-bottom: 12px;
}
.pwa-pref-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.pwa-pref-matrix th,
.pwa-pref-matrix td {
    border-bottom: 1px solid #30363d;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
}
.pwa-pref-matrix th {
    color: #8b949e;
    font-weight: 600;
}
.pwa-pref-matrix td.pwa-pref-topic {
    text-align: left;
    color: #f0f6fc;
    font-weight: 600;
    white-space: nowrap;
}
.pwa-pref-matrix .pwa-pref-example {
    display: block;
    color: #8b949e;
    font-weight: 400;
    font-size: 10px;
}
.pwa-pref-matrix input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #EE4D2D;
    cursor: pointer;
}
.pwa-settings-status {
    font-size: 11px;
    color: #2ea043;
    margin: 0 0 10px;
}
.pwa-settings-status[data-kind="warn"] {
    color: #e6962a;
}
.pwa-settings-device {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.pwa-settings-device-title {
    color: #f0f6fc;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pwa-settings-install-link {
    margin: 0;
}

/* ── Ops health panel (notificações) ── */
.ops-notif-tabs .nav-link {
    color: #8b949e !important;
    font-size: 12px;
    padding: 6px 12px;
    border: none !important;
}
.ops-notif-tabs .nav-link.active {
    color: #f0f6fc !important;
    background: transparent !important;
    border-bottom: 2px solid #EE4D2D !important;
}
.ops-health-panel {
    padding-top: 8px;
}
.ops-health-overall {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #30363d;
}
.ops-health-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.ops-health-group-card {
    flex: 1 1 120px;
    min-width: 110px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-left-width: 3px;
    border-radius: 6px;
    padding: 8px 10px;
}
.ops-health-group-title {
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}
.ops-health-section {
    margin-bottom: 16px;
}
.ops-health-section-title {
    color: #f0f6fc;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.ops-health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ops-health-table th {
    color: #8b949e;
    font-weight: 600;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #30363d;
}
.ops-health-table td {
    color: #c9d1d9;
    padding: 6px 8px;
    border-bottom: 1px solid #21262d;
    vertical-align: top;
}
.ops-health-db-alert {
    font-size: 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
}

/* ── Odysseus modal (Assistente IA) ─────────────────────────────── */
.odysseus-header-btn:hover {
    border-color: #EE4D2D !important;
}

.odysseus-modal .modal-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

.odysseus-modal .modal-header,
.odysseus-modal .modal-footer {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

.odysseus-modal .modal-body {
    background-color: #161b22 !important;
}

.odysseus-modal .modal-dialog {
    pointer-events: auto;
}

.odysseus-modal #odysseus-context-text:focus {
    outline: none;
    border-color: #EE4D2D !important;
}

.odysseus-open-hint {
    background: #0e1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 12px 14px;
}

/* ── Assistente BI (painel lateral) ─────────────────────────────── */
.bi-agent-header-btn:hover {
    border-color: #EE4D2D !important;
}

.bi-agent-drawer.modal {
    padding: 0 !important;
    pointer-events: none;
    z-index: 12000 !important;
}
.bi-agent-drawer .modal-content,
.bi-agent-drawer .modal-header,
.bi-agent-drawer .modal-body,
.bi-agent-drawer .modal-footer,
.bi-agent-send-btn,
.bi-agent-input {
    pointer-events: auto !important;
}

body.bi-agent-open,
body.modal-open:has(.bi-agent-drawer) {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Assistente aberto: filtros bloqueados (evita dropdown sobre o painel) */
body.bi-agent-open .sp-filters-main {
    pointer-events: none;
    opacity: 0.55;
    user-select: none;
}

body.bi-agent-open .sp-filters-main::after {
    content: "Feche o assistente (×) para alterar filtros";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 17, 23, 0.45);
    color: #8b949e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 2;
    pointer-events: none;
}

/* Assistente aberto: gráficos e tabela diária sem filtro por clique */
body.bi-agent-open .sp-charts-col,
body.bi-agent-open #sp-grid-data-wrap {
    pointer-events: none;
    opacity: 0.88;
}

body.bi-agent-open #sp-grid-prod-wrap {
    opacity: 0.95;
}

body.bi-agent-open .sp-charts-col::after,
body.bi-agent-open #sp-grid-data-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.bi-agent-drawer .modal-dialog {
    position: fixed;
    right: 0;
    top: 0;
    margin: 0;
    max-width: min(420px, 38vw);
    width: min(420px, 38vw);
    height: 100%;
    max-height: 100%;
    transform: none !important;
    pointer-events: auto;
    z-index: 12001 !important;
}

.bi-agent-drawer .modal-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    border-right: none;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
}

.bi-agent-modal .modal-header,
.bi-agent-modal .modal-footer {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    flex-shrink: 0;
}

.bi-agent-modal-header {
    padding: 10px 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bi-agent-modal-close {
    background: transparent;
    border: none;
    color: #8b949e;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.bi-agent-modal-close:hover {
    color: #c9d1d9;
}

.bi-agent-modal-footer {
    padding: 8px 14px !important;
}

.bi-agent-modal-body {
    background-color: #161b22 !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px 14px !important;
}

.bi-agent-modal #bi-agent-input:focus {
    outline: none;
    border-color: #EE4D2D !important;
}

.bi-agent-messages {
    flex: 1;
    min-height: 100px;
    max-height: none;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 6px;
}

.bi-agent-usage-accordion {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.bi-agent-usage-accordion .accordion-button {
    background: #0e1117 !important;
    color: #c9d1d9 !important;
    font-size: 11px;
    padding: 6px 10px;
    box-shadow: none !important;
}

.bi-agent-usage-accordion .accordion-button:not(.collapsed) {
    color: #EE4D2D !important;
}

.bi-agent-usage-accordion .accordion-body {
    padding: 6px 0 0;
    background: transparent;
}

.bi-agent-usage-accordion .accordion-item {
    background: transparent;
    border-color: #30363d !important;
}

.bi-agent-msg-row {
    display: flex;
    margin-bottom: 10px;
}

.bi-agent-msg-user {
    justify-content: flex-end;
}

.bi-agent-msg-assistant {
    justify-content: flex-start;
}

.bi-agent-bubble {
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #30363d;
    font-size: 13px;
    line-height: 1.55;
}

.bi-agent-bubble-user {
    background: #EE4D2D;
    color: #fff;
    border-color: #EE4D2D;
}

.bi-agent-bubble-assistant {
    background: #1a1f2e;
    color: #c9d1d9;
}

.bi-agent-user-text {
    white-space: pre-wrap;
}

.bi-agent-md {
    color: #c9d1d9;
    font-size: 13px;
    line-height: 1.55;
}

.bi-agent-md h1,
.bi-agent-md h2,
.bi-agent-md h3,
.bi-agent-md h4,
.bi-agent-md h5,
.bi-agent-md h6 {
    color: #f0f6fc;
    font-weight: 700;
    line-height: 1.35;
    margin: 8px 0 4px;
}

.bi-agent-md h1 { font-size: 14px; }
.bi-agent-md h2 { font-size: 13px; }
.bi-agent-md h3,
.bi-agent-md h4,
.bi-agent-md h5,
.bi-agent-md h6 { font-size: 13px; }

.bi-agent-md hr {
    border: none;
    border-top: 1px solid #30363d;
    margin: 8px 0;
}

.bi-agent-chat-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.bi-agent-new-chat-btn {
    background: transparent;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
}

.bi-agent-new-chat-btn:hover {
    border-color: #484f58;
    color: #c9d1d9;
}

.bi-agent-md p {
    margin: 0 0 8px;
}

.bi-agent-md p:last-child {
    margin-bottom: 0;
}

.bi-agent-md strong {
    color: #f0f6fc;
    font-weight: 600;
}

.bi-agent-md ul,
.bi-agent-md ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.bi-agent-md li {
    margin-bottom: 4px;
}

.bi-agent-md code {
    background: #0e1117;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 12px;
}

.bi-agent-typing-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.bi-agent-typing {
    display: flex;
    align-items: center;
    min-width: 140px;
}

.bi-agent-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 50%;
    background: #8b949e;
    animation: bi-agent-pulse 1.2s infinite ease-in-out;
}

.bi-agent-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.bi-agent-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes bi-agent-pulse {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

.bi-agent-status {
    margin-top: 6px;
}

.bi-agent-send-btn:disabled,
.bi-agent-modal .bi-agent-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bi-agent-usage-panel {
    background: #0e1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 0;
}

.bi-agent-usage-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bi-agent-usage-title {
    color: #f0f6fc;
    font-size: 12px;
    font-weight: 600;
}

.bi-agent-usage-sub {
    color: #8b949e;
    font-size: 11px;
}

.bi-agent-usage-row {
    margin-bottom: 8px;
}

.bi-agent-usage-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #c9d1d9;
    margin-bottom: 3px;
}

.bi-agent-usage-val {
    color: #8b949e;
    white-space: nowrap;
}

.bi-agent-usage-track {
    height: 6px;
    background: #1a1f2e;
    border-radius: 999px;
    overflow: hidden;
}

.bi-agent-usage-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.bi-agent-usage-meta,
.bi-agent-usage-reset,
.bi-agent-usage-note {
    font-size: 11px;
    color: #8b949e;
    margin-top: 4px;
}

.bi-agent-usage-reset {
    color: #e6962a;
}

.bi-agent-usage-note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
}

.bi-agent-usage-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bi-agent-usage-panel-active {
    border-color: #EE4D2D !important;
    box-shadow: 0 0 0 1px rgba(238, 77, 45, 0.25);
}

.bi-agent-usage-badge {
    color: #EE4D2D;
    font-weight: 600;
    margin-left: 4px;
}

.bi-agent-model-wrap {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #1a1f2e;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.bi-agent-model-label {
    font-size: 11px;
    font-weight: 600;
    color: #8b949e;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bi-agent-model-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.bi-agent-model-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: #0e1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: Inter, sans-serif;
    text-align: left;
}

.bi-agent-model-btn:hover {
    border-color: #484f58;
    background: #161b22;
}

.bi-agent-model-btn-active {
    border-color: #EE4D2D;
    background: rgba(238, 77, 45, 0.1);
    box-shadow: 0 0 0 1px rgba(238, 77, 45, 0.25);
}

.bi-agent-model-btn-title {
    font-size: 13px;
    font-weight: 700;
    color: #c9d1d9;
}

.bi-agent-model-btn-sub {
    font-size: 10px;
    color: #8b949e;
    line-height: 1.3;
}

.bi-agent-model-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(238, 77, 45, 0.08);
    border: 1px solid rgba(238, 77, 45, 0.35);
    border-radius: 6px;
}

.bi-agent-usage-intro {
    font-size: 11px;
    color: #8b949e;
    margin: 0 0 10px;
    line-height: 1.45;
}

.bi-agent-usage-quota {
    font-size: 12px;
    font-weight: 600;
    color: #c9d1d9;
    margin: 4px 0 8px;
}

.bi-agent-usage-model-id {
    font-size: 10px;
    color: #6e7681;
    font-family: ui-monospace, monospace;
    margin-bottom: 8px;
}

/* ── Storage page — header/padding alinhados ao Marketplaces ── */
.sp-page-storage {
    box-sizing: border-box;
}
.sp-page-storage .sp-page-header h1 {
    font-size: 22px !important;
    margin: 0 !important;
    line-height: 1.2;
}

/* ── Storage charts — mesmo padrão Marketplaces (blocos separados) ── */
.sp-page-storage .sp-charts-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    /* 50/50 com a coluna de KPIs/tabela */
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.sp-page-storage .sp-right-col-wrap {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.sp-page-storage .sp-chart-wrap {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
}
.sp-page-storage .sp-grid-wrap {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
}

/* ── Storage RangeSlider (accent laranja) ── */
.sp-page-storage #st-periodo .dash-slider-range { background-color: #EE4D2D !important; }
.sp-page-storage #st-periodo .dash-slider-thumb,
.sp-page-storage #st-periodo [class*="dash-slider-thumb"] {
    background-color: #EE4D2D !important;
    border: 2px solid #EE4D2D !important;
}
.sp-page-storage #st-periodo .dash-slider-thumb:hover,
.sp-page-storage #st-periodo [class*="dash-slider-thumb"]:hover {
    background-color: #ff6a4d !important;
    border-color: #ff6a4d !important;
}

/* ── Cadastros AgGrid — contraste alto no tema escuro ── */
.cad-grid-wrap,
.cad-grid-wrap .ag-theme-alpine-dark,
.cad-grid.ag-theme-alpine-dark {
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
    --ag-header-background-color: #1a1f2e;
    --ag-border-color: #30363d;
    --ag-foreground-color: #e6edf3;
    --ag-secondary-foreground-color: #c9d1d9;
    --ag-data-color: #e6edf3;
    --ag-header-foreground-color: #f0f6fc;
    --ag-control-panel-background-color: #161b22;
    --ag-selected-row-background-color: #21262d;
    --ag-row-hover-color: #21262d;
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

.cad-grid.ag-theme-alpine-dark .ag-root-wrapper,
.cad-grid.ag-theme-alpine-dark .ag-root-wrapper-body,
.cad-grid.ag-theme-alpine-dark .ag-body,
.cad-grid.ag-theme-alpine-dark .ag-body-viewport,
.cad-grid.ag-theme-alpine-dark .ag-center-cols-viewport,
.cad-grid.ag-theme-alpine-dark .ag-center-cols-container,
.cad-grid.ag-theme-alpine-dark .ag-body-viewport .ag-center-cols-clipper,
.cad-grid.ag-theme-alpine-dark .ag-overlay,
.cad-grid.ag-theme-alpine-dark .ag-overlay-wrapper,
.cad-grid.ag-theme-alpine-dark .ag-row {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

.cad-grid.ag-theme-alpine-dark .ag-row-odd {
    background-color: #1a1f2e !important;
}

.cad-grid.ag-theme-alpine-dark .ag-header,
.cad-grid.ag-theme-alpine-dark .ag-header-cell,
.cad-grid.ag-theme-alpine-dark .ag-header-cell-text {
    color: #f0f6fc !important;
    background-color: #1a1f2e !important;
}

.cad-grid.ag-theme-alpine-dark .ag-cell,
.cad-grid.ag-theme-alpine-dark .ag-cell-value {
    color: #e6edf3 !important;
}

.cad-grid.ag-theme-alpine-dark .ag-icon {
    color: #c9d1d9 !important;
}

.cad-grid.ag-theme-alpine-dark .ag-row-selected {
    background-color: #21262d !important;
}

.cad-grid.ag-theme-alpine-dark .ag-row-hover {
    background-color: #21262d !important;
}

.cad-grid.ag-theme-alpine-dark .ag-paging-panel,
.cad-grid.ag-theme-alpine-dark .ag-body-horizontal-scroll,
.cad-grid.ag-theme-alpine-dark .ag-horizontal-left-spacer,
.cad-grid.ag-theme-alpine-dark .ag-horizontal-right-spacer {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}

/* ── Storage AgGrid — contraste alto no tema escuro ── */
.sp-page-storage .sp-grid-wrap,
.sp-page-storage .sp-grid-wrap .ag-theme-alpine-dark,
#st-grid.ag-theme-alpine-dark {
    --ag-background-color: #161b22;
    --ag-odd-row-background-color: #1a1f2e;
    --ag-header-background-color: #1a1f2e;
    --ag-border-color: #30363d;
    --ag-foreground-color: #e6edf3;
    --ag-secondary-foreground-color: #c9d1d9;
    --ag-data-color: #e6edf3;
    --ag-header-foreground-color: #f0f6fc;
}

#st-grid.ag-theme-alpine-dark .ag-root-wrapper,
#st-grid.ag-theme-alpine-dark .ag-body-viewport,
#st-grid.ag-theme-alpine-dark .ag-center-cols-container,
#st-grid.ag-theme-alpine-dark .ag-row {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

#st-grid.ag-theme-alpine-dark .ag-row-odd {
    background-color: #1a1f2e !important;
}

#st-grid.ag-theme-alpine-dark .ag-header,
#st-grid.ag-theme-alpine-dark .ag-header-cell,
#st-grid.ag-theme-alpine-dark .ag-header-cell-text,
#st-grid.ag-theme-alpine-dark .ag-header-group-text {
    color: #f0f6fc !important;
    background-color: #1a1f2e !important;
}

/* Cor base legível; cellStyle inline (Status/PR) continua podendo sobrescrever */
#st-grid.ag-theme-alpine-dark .ag-cell,
#st-grid.ag-theme-alpine-dark .ag-cell-value {
    color: #e6edf3;
}

#st-grid.ag-theme-alpine-dark .ag-group-value,
#st-grid.ag-theme-alpine-dark .ag-group-cell {
    color: #f0f6fc !important;
    font-weight: 600;
}

#st-grid.ag-theme-alpine-dark .ag-icon {
    color: #c9d1d9 !important;
}

#st-grid.ag-theme-alpine-dark .ag-row-selected {
    background-color: #21262d !important;
}

#st-grid.ag-theme-alpine-dark .ag-row-hover {
    background-color: #21262d !important;
}

/* Storage: cabeçalho e valor na mesma coluna (centralizado) */
#st-grid.ag-theme-alpine-dark .ag-header-cell.sp-ag-center .ag-header-cell-label,
#st-grid.ag-theme-alpine-dark .ag-cell.sp-ag-center {
    justify-content: center !important;
    text-align: center !important;
}
#st-grid.ag-theme-alpine-dark .ag-header-cell.sp-ag-center .ag-header-cell-text {
    text-align: center !important;
    white-space: nowrap;
}
#st-grid.ag-theme-alpine-dark .ag-header-cell.sp-ag-left .ag-header-cell-label,
#st-grid.ag-theme-alpine-dark .ag-cell.sp-ag-left {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ── Atacado (50/50 gráficos | tabelas) ── */
.sp-page-atacado .sp-charts-col,
.sp-page-atacado .sp-col-left {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.sp-page-atacado .sp-right-col-wrap,
.sp-page-atacado .sp-col-right {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.sp-page-atacado .sp-kpi-panel .sp-kpi-row-1,
.sp-page-atacado .at-kpi-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.sp-page-atacado .sp-main-row {
    flex: 1 1 auto;
    min-height: 0;
}
.sp-page-atacado .sp-charts-col {
    height: 100%;
    min-height: 0;
    gap: 8px;
}
.sp-page-atacado .sp-chart-wrap {
    flex: 1 1 0;
    min-height: 0;
}
.sp-page-atacado .sp-right-scale > .sp-grid-wrap {
    flex: 1 1 0;
    min-height: 120px;
}
.sp-page-atacado .at-cli-block {
    flex: 1 1 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sp-page-atacado .at-cli-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.sp-page-atacado .sp-filters-line {
    flex-wrap: nowrap;
    width: 100%;
    overflow: visible;
}
.sp-page-atacado .sp-filters-right-col,
.sp-page-atacado .sp-filters-main .sp-col-right {
    overflow: visible !important;
}
.sp-page-atacado .sp-filter-item {
    overflow: visible !important;
}
.sp-page-atacado .sp-filter-item .dash-dropdown-wrapper {
    position: relative;
    overflow: visible;
}
.sp-page-atacado .sp-filter-item .dash-dropdown-wrapper,
.sp-page-atacado .sp-filter-item button.dash-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.sp-page-atacado #at-col-canal { flex: 1 1 0; min-width: 96px; }
.sp-page-atacado #at-col-view-tipo { flex: 1 1 0; min-width: 100px; }
.sp-page-atacado #at-col-gran { flex: 1 1 0; min-width: 108px; }
.sp-page-atacado #at-col-empresa { flex: 1 1 0; min-width: 96px; }
.sp-page-atacado #at-col-produto { flex: 2.4 1 0; min-width: 160px; }
.sp-page-atacado #at-col-marca { flex: 1.15 1 0; min-width: 100px; }
.sp-page-atacado #at-col-tipo { flex: 0.8 1 0; min-width: 72px; }
.sp-page-atacado #at-col-emb { flex: 0.95 1 0; min-width: 84px; }
.sp-page-atacado #at-col-kit { flex: 0.6 1 0; min-width: 64px; max-width: 100px; }
.sp-page-atacado #at-periodo .dash-slider-range,
.sp-page-atacado .sp-slider .dash-slider-range {
    background-color: #EE4D2D !important;
}
.sp-page-atacado #at-periodo .dash-slider-thumb,
.sp-page-atacado #at-periodo [class*="dash-slider-thumb"] {
    background-color: #EE4D2D !important;
    border-color: #EE4D2D !important;
}

/* Administrativo — filtros iguais a Marketplaces / Atacado */
.sp-page-admin .sp-filters-line {
    width: 100%;
    overflow: visible;
}
.sp-page-admin .sp-filters-right-col,
.sp-page-admin .sp-filters-main .sp-col-right {
    overflow: visible !important;
}
.sp-page-admin .sp-filter-item {
    overflow: visible !important;
}
.sp-page-admin .sp-filter-item .dash-dropdown-wrapper {
    position: relative;
    overflow: visible;
}
.sp-page-admin .sp-filter-item .dash-dropdown-wrapper,
.sp-page-admin .sp-filter-item button.dash-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.sp-page-admin #ad-col-visao { flex: 1.3 1 0; min-width: 140px; }
.sp-page-admin #ad-col-gran { flex: 1 1 0; min-width: 120px; }
.sp-page-admin #ad-col-empresa { flex: 0.9 1 0; min-width: 100px; }
.sp-page-admin #ad-col-categoria { flex: 1.4 1 0; min-width: 150px; }
.sp-page-admin #ad-periodo .dash-slider-range,
.sp-page-admin .sp-slider .dash-slider-range {
    background-color: #EE4D2D !important;
}
.sp-page-admin #ad-periodo .dash-slider-thumb,
.sp-page-admin #ad-periodo [class*="dash-slider-thumb"] {
    background-color: #EE4D2D !important;
    border-color: #EE4D2D !important;
}
.sp-page-admin #ad-periodo .dash-slider-mark,
.sp-page-admin .sp-slider .dash-slider-mark {
    white-space: nowrap !important;
    font-size: 10px !important;
}
.sp-page-admin .sp-filter-periodo {
    padding: 0 10px 26px 10px;
    min-height: 58px;
    box-sizing: border-box;
}
.sp-page-admin #ad-periodo {
    padding: 0 6px;
}
.sp-page-admin .ad-kpi-row-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.sp-page-admin .ag-cell[col-id="data_col"] {
    cursor: pointer;
    color: #e6edf3 !important;
}
.sp-page-admin .ag-header-cell,
.sp-page-admin .ag-header-cell-text {
    color: #c9d1d9 !important;
}
.sp-page-admin .sp-main-row {
    flex: 1 1 auto;
    min-height: 0;
}
.sp-page-admin .sp-main-row > .sp-col-left {
    flex: 0 0 30% !important;
    max-width: 30% !important;
}
.sp-page-admin .sp-main-row > .sp-col-right {
    flex: 0 0 70% !important;
    max-width: 70% !important;
}
# Modal Administrativo — o dbc.Modal vai para o body (fora de .sp-page-admin)
#ad-det-modal.modal {
    z-index: 10050 !important;
}
#ad-det-modal .modal-dialog,
.ad-det-modal-dialog {
    max-width: 96vw !important;
    width: 96vw !important;
    height: auto !important;
    margin: 2vh auto !important;
}
#ad-det-modal .modal-content {
    width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
}
#ad-det-modal .ad-det-grid-wrap {
    max-height: 70vh;
    height: auto !important;
}
#ad-det-grid,
#ad-det-grid .ag-root-wrapper,
#ad-det-grid .ag-theme-alpine-dark {
    width: 100% !important;
    height: auto !important;
}
#ad-det-grid .ag-cell[col-id="historico"] {
    white-space: pre-wrap !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.sp-page-admin .modal-backdrop {
    z-index: 10040 !important;
}
.sp-page-admin .sp-charts-col {
    height: 100%;
    min-height: 0;
    gap: 8px;
}
.sp-page-admin .sp-chart-wrap {
    flex: 1 1 0;
    min-height: 0;
}
.sp-page-admin .js-plotly-plot .legend .bg {
    stroke: none !important;
}
.sp-page-admin .js-plotly-plot .legendrect,
.sp-page-admin .js-plotly-plot g.legend .traces rect,
.sp-page-admin .js-plotly-plot g.legend .traces path {
    stroke: none !important;
    stroke-width: 0 !important;
}
.sp-page-admin .sp-kpi-panel {
    flex-shrink: 0;
    margin-bottom: 6px;
}
.sp-page-admin .sp-right-col > .sp-grid-wrap {
    flex: 1 1 0;
    min-height: 0;
}

/* Automações — modal vai para o body */
#auto-baixas-modal.modal,
#auto-baixas-boss-modal.modal,
#auto-baixas-eq-modal.modal,
#auto-baixas-meli-boss-modal.modal,
#auto-baixas-meli-eq-modal.modal {
    z-index: 10050 !important;
}
#auto-baixas-modal .modal-dialog,
#auto-baixas-boss-modal .modal-dialog,
#auto-baixas-eq-modal .modal-dialog,
#auto-baixas-meli-boss-modal .modal-dialog,
#auto-baixas-meli-eq-modal .modal-dialog,
.auto-baixas-modal-dialog {
    max-width: 640px !important;
    width: 92vw !important;
    margin: 8vh auto !important;
}
#auto-baixas-modal .modal-content,
#auto-baixas-boss-modal .modal-content,
#auto-baixas-eq-modal .modal-content,
#auto-baixas-meli-boss-modal .modal-content,
#auto-baixas-meli-eq-modal .modal-content {
    background: #0e1117 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
#auto-baixas-modal .btn-close,
#auto-baixas-boss-modal .btn-close,
#auto-baixas-eq-modal .btn-close,
#auto-baixas-meli-boss-modal .btn-close,
#auto-baixas-meli-eq-modal .btn-close {
    filter: invert(1);
    opacity: 0.7;
}
#auto-baixas-modal .form-check-input,
#auto-baixas-boss-modal .form-check-input,
#auto-baixas-eq-modal .form-check-input,
#auto-baixas-meli-boss-modal .form-check-input,
#auto-baixas-meli-eq-modal .form-check-input {
    width: 2.4em;
    height: 1.25em;
    background-color: #30363d;
    border-color: #30363d;
    cursor: pointer;
}
#auto-baixas-modal .form-check-input:checked,
#auto-baixas-boss-modal .form-check-input:checked,
#auto-baixas-eq-modal .form-check-input:checked,
#auto-baixas-meli-boss-modal .form-check-input:checked,
#auto-baixas-meli-eq-modal .form-check-input:checked {
    background-color: #2ea043;
    border-color: #2ea043;
}
#auto-baixas-modal .form-switch .form-check-input:focus,
#auto-baixas-boss-modal .form-switch .form-check-input:focus,
#auto-baixas-eq-modal .form-switch .form-check-input:focus,
#auto-baixas-meli-boss-modal .form-switch .form-check-input:focus,
#auto-baixas-meli-eq-modal .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(46, 160, 67, 0.25);
}

.auto-nav {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.auto-nav-lbl {
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.auto-nav-pills .form-check {
    padding-left: 0;
    margin-right: 8px;
    margin-bottom: 6px;
}
.auto-nav-pills .form-check-input {
    display: none;
}
.auto-nav-pills .form-check-label {
    background: #1a1f2e;
    border: 1px solid #30363d;
    border-radius: 16px;
    color: #c9d1d9;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.auto-nav-pills .form-check-input:checked + .form-check-label {
    background: #EE4D2D;
    border-color: #EE4D2D;
    color: #fff;
}
.auto-nav-hint {
    color: #8b949e;
    font-size: 12px;
    margin-top: 8px;
}
.auto-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.auto-cards-grid > .row {
    display: contents;
}
.auto-cards-grid > .row.auto-group-note-row {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    width: 100%;
}
.auto-group-note-text {
    white-space: pre-wrap !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    word-break: normal;
}
.auto-cards-grid > .row > [class*="col"] {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 767.98px) {
    .auto-cards-grid {
        grid-template-columns: 1fr;
    }
}
.auto-nav-item[data-empresa="equality"],
.auto-nav-item[data-grupo]:not([data-grupo="receber"]) {
    /* JS filtra; fallback inicial some no callback */
}

/* Mobile header: título não compete com ações; Baixar/Config saíram do header */
.sp-page-header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.sp-page-header > .sp-header-title {
    min-width: 0;
    overflow: hidden;
}
.sp-page-header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.sp-header-actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 6px;
}
@media (max-width: 768px) {
    .sp-page-header h1 {
        font-size: 1.05rem;
    }
    .notif-header-label,
    .pwa-header-label {
        display: none !important;
    }
    .notif-header-btn,
    .pwa-header-btn {
        padding: 6px 8px !important;
    }
    /* Diagnóstico no header: só ícone se tiver label longa */
    .diag-header-label {
        display: none !important;
    }
}

/* Mobile density: espaço, scrollbar, menos aperto */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
::-webkit-scrollbar-thumb {
    background: #484f58;
    border-radius: 8px;
    border: 3px solid #0d1117;
}
::-webkit-scrollbar-track {
    background: #0d1117;
}
* {
    scrollbar-width: auto;
    scrollbar-color: #484f58 #0d1117;
}
@media (max-width: 768px) {
    .sp-page, #sp-page, .sp-dashboard {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* gráficos e tabelas empilhados com folga */
    #sp-fig1, #sp-fig2,
    .js-plotly-plot,
    .dash-graph {
        margin-bottom: 20px !important;
    }
    #sp-grid-prod-wrap,
    #sp-grid-data-wrap,
    .ag-theme-alpine,
    .ag-theme-alpine-dark {
        margin-top: 12px !important;
        margin-bottom: 28px !important;
    }
    /* filtros: menos altura vertical */
    .sp-filters, #sp-filters, .sp-filter-row {
        row-gap: 8px !important;
        margin-bottom: 12px !important;
    }
    /* KPI cards: não esmagar */
    #sp-kpis, .sp-kpis {
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    #sp-kpis > *, .sp-kpi-card {
        min-width: 0 !important;
    }
    /* Plotly: área útil um pouco mais baixa = menos aperto com a grid */
    .js-plotly-plot .plotly {
        max-width: 100%;
    }
}

/* Filtros sempre visíveis (Div, sem <details> — Chrome escondia o accordion). */
.sp-filters-summary {
    display: none;
}
.sp-filters-details > .sp-filters-right-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Mobile: menos densidade, stack, espaço entre gráfico e tabela.
   Depois das regras 50/50 de Atacado/Storage para ganhar especificidade. */
@media (max-width: 768px) {
    .sp-page,
    .sp-page-storage {
        height: auto !important;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .sp-page .sp-main-row,
    .sp-page-storage .sp-main-row,
    .sp-page-atacado .sp-main-row {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto !important;
        gap: 20px !important;
        margin-top: 8px !important;
    }
    .sp-page .sp-col-left,
    .sp-page .sp-col-right,
    .sp-page .sp-charts-col,
    .sp-page .sp-right-col-wrap,
    .sp-page-atacado .sp-col-left,
    .sp-page-atacado .sp-col-right,
    .sp-page-atacado .sp-charts-col,
    .sp-page-atacado .sp-right-col-wrap,
    .sp-page-storage .sp-charts-col,
    .sp-page-storage .sp-right-col-wrap {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    .sp-charts-col {
        gap: 16px !important;
        height: auto !important;
    }
    .sp-chart-wrap {
        flex: none !important;
        height: 200px;
        min-height: 180px;
        margin-bottom: 0;
    }
    .sp-page-marketplaces .sp-chart-wrap:last-child {
        height: 220px;
        margin-bottom: 4px;
    }
    .sp-chart-wrap .dash-graph,
    .sp-chart-wrap .js-plotly-plot,
    .sp-page-marketplaces #sp-fig1,
    .sp-page-marketplaces #sp-fig2,
    .sp-page-atacado #at-fig1,
    .sp-page-atacado #at-fig2 {
        height: 200px !important;
        min-height: 180px !important;
        max-height: 220px !important;
    }
    .sp-right-col-wrap,
    .sp-right-col,
    .sp-right-scale {
        overflow: visible !important;
        height: auto !important;
    }
    .sp-grid-wrap,
    .sp-page-marketplaces .sp-grid-wrap .ag-theme-alpine-dark,
    .sp-page-atacado .sp-grid-wrap .ag-theme-alpine-dark,
    .sp-page-storage .sp-grid-wrap .ag-theme-alpine-dark {
        height: 320px !important;
        max-height: 320px !important;
        margin-top: 12px;
    }
    .sp-filters-main {
        margin-bottom: 12px;
        flex-wrap: wrap;
        overflow-x: hidden;
        max-width: 100%;
    }
    .sp-filters-main > .sp-col-left,
    .sp-filters-main > .sp-col-right,
    .sp-filters-main > .sp-filters-right-col-wrap {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .sp-filters-periodo-col {
        margin-bottom: 8px;
    }
    .sp-filters-summary {
        display: none;
    }
    .sp-filters-details,
    .sp-filters-right-col,
    .sp-filters-right-col-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .sp-filters-line {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .sp-filters-main .sp-filter-item,
    .sp-page-atacado .sp-filter-item,
    .sp-page-admin .sp-filter-item {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        box-sizing: border-box;
        overflow: hidden;
    }
    .sp-filters-main .sp-filter-item > span,
    .sp-page-atacado .sp-filter-item > span,
    .sp-page-admin .sp-filter-item > span {
        display: block;
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .sp-filters-main .sp-filter-item .dash-dropdown-wrapper,
    .sp-filters-main .sp-filter-item button.dash-dropdown,
    .sp-page-atacado .sp-filter-item .dash-dropdown-wrapper,
    .sp-page-atacado .sp-filter-item button.dash-dropdown,
    .sp-page-admin .sp-filter-item .dash-dropdown-wrapper,
    .sp-page-admin .sp-filter-item button.dash-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .sp-filter-periodo .sp-slider,
    .sp-filter-periodo .dash-slider {
        max-width: 100%;
        overflow: hidden;
    }
    .sp-filter-periodo .rc-slider-mark-text,
    .sp-filter-periodo .dash-slider .rc-slider-mark-text {
        font-size: 9px !important;
    }
}

/* ── Modal aberto: cabeçalho e filtros voltam para o fundo ───────────
   Cabeçalho (2600) e filtros (2500) ficam acima dos gráficos para o menu
   dos dropdowns não ser cortado. Só que o `.modal` do Bootstrap é 1055 —
   mais baixo — então os filtros apareciam POR CIMA do modal de Insights,
   inclusive por cima dos campos de data da comparação de períodos.
   Enquanto há modal aberto ninguém mexe nesses filtros; mandá-los para o
   fundo resolve sem tocar no z-index interno do modal (os menus dele e o
   calendário em portal continuam nos 1060–1070 de sempre). */
body.modal-open .sp-page-header,
body.modal-open .sp-filters-main {
    z-index: 0;
}