@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('ficha-multiplicacao-redesign.css'); /* tokens do redesign da Ficha de Multiplicação (sprint 184) */

/* Variaveis globais */

:root {
    --proplanti-menu-width: 80px;
    --proplanti-body-padding: 22px;
    --proplanti-submenu-size: 180px;
    --proplanti-primary: #6FB839;
    --proplanti-warning: #E9D502;
    --proplanti-danger: #C62828;
    --proplanti-danger-surface: #FBEAEA;
    --proplanti-primary-dark: #243A45;
    --proplanti-primary-hover: #64A633;
    --proplanti-primary-active: #59932E;
    --proplanti-primary-focus: #afb41d;
    --proplanti-secondary: #FFFFFF;
    --proplanti-secondary-hover: #F3F7F7;
    --proplanti-secondary-active: #EAEDED;
    --proplanti-secondary-focus: #F3F7F7;
    --proplanti-text-dark: #243A44;
    --proplanti-icons-gray: #7A909A;
    --proplanti-border-box: #BFD5DF;
    --proplanti-blue-spotlight: #2EA9DD;
    --proplanti-gary-spotlight: #8A6565;
    --proplanti-border-box-hover: #9CACD1;
    --proplanti-shadow-gray: #E2E7EA;
    --proplanti-background-gray: #FAFAFA;
    --proplanti-multiple-input-row-hieght: 40px;
    --proplanti-multiple-input-row-width: 88%;
    --proplanti-input-text-width: 100%;
    --proplanti-input-datepicker-width: 130px;
    --proplanti-input-text-height: 40px;
    --proplanti-input-multiline-min-height: 110px;
    --proplanti-disabled-input-text-height: 38px;
    --proplanti-input-integer-width: 108px;
    --proplanti-input-integer-height: 40px;
    --proplanti-mobile-header-height: 50px;
    --proplanti-mobile-fieldheader-fontsize: 12px;
    --proplanti-mobile-verticalheader-fontsize: 11px;
    --proplanti-mobile-field-fontsize: 13px;

    /* ===== Dashboard V3 (sprint 054) — tokens do handoff hi-fi ===== */
    /* superfícies / shell */
    --dashv3-header-bg: #243A44;
    --dashv3-page-bg: #F4F6F6;
    --dashv3-card-bg: #FFFFFF;
    --dashv3-card-border: #E2E7EA;
    --dashv3-card-radius: 10px;
    --dashv3-card-shadow: 0 1px 2px rgba(16, 40, 36, .04), 0 6px 22px rgba(16, 40, 36, .03);
    --dashv3-track: #EEF1F3;
    /* texto */
    --dashv3-text-strong: #243A44;
    --dashv3-text-secondary: #2F4651;
    --dashv3-text-muted: #7A909A;
    --dashv3-text-muted-2: #93A4AC;
    --dashv3-text-muted-3: #9CABB2;
    --dashv3-text-neutral-dark: #5A6B72;
    /* escala de verdes (gráficos) */
    --dashv3-green-darkest: #59932E;
    --dashv3-green-dark: #64A633;
    --dashv3-green: #6FB839;
    --dashv3-green-light: #A6CD7E;
    --dashv3-green-lighter: #D6E6BF;
    --dashv3-green-icon-bg: #EDF4E4;
    --dashv3-teal-solid: #3F7A4D;
    /* abas */
    --dashv3-tab-text: #AFC2C9;
    --dashv3-tab-active: #8FD45A;
    --dashv3-tab-active-border: #6FB839;
    /* semânticas */
    --dashv3-success: #2E9E5B;
    --dashv3-success-bg: #E9F3E2;
    --dashv3-amber: #C2841C;
    --dashv3-amber-2: #E0A33A;
    --dashv3-amber-bg: #FBF1DD;
    --dashv3-amber-card-border: #F0DCC2;
    --dashv3-error: #E0533D;
    --dashv3-error-bg: #FBEFEC;
    --dashv3-blue: #2EA9DD;
    /* switch (toggle) */
    --dashv3-switch-on: #64A633;
    --dashv3-switch-off: #CDD6CE;

    /* Sprint 053 — redesign do menu de navegação principal (tokens do handoff hifi).
       Prefixo --mp-* para o novo design system da navegação; reutilizado pelas telas da central de módulos. */
    --mp-brand-green: #6FB839;
    --mp-brand-green-hover: #5a9a2f;
    --mp-brand-dark: #243A44;
    --mp-brand-dark-2: #1b2a31;
    --mp-brand-dark-3: #182428;
    --mp-brand-blue: #2EA9DD;
    --mp-bg-app: #f6f7f5;
    --mp-surface-card: #ffffff;
    --mp-border-card: #e4e9eb;
    --mp-border-subtle: #e7ecec;
    --mp-text-strong: #243A44;
    --mp-text-body: #3f5763;
    --mp-text-muted: #8a98a0;
    --mp-text-kicker: #9aabb2;
    --mp-sidebar-label: #c4d0d6;
    --mp-sidebar-group: #6d828c;
    --mp-sidebar-icon: #aebcc3;
    --mp-sidebar-divider: #324a55;
    --mp-sidebar-hover: #1b2a31;
    --mp-sidebar-active-bg: #182428;
    --mp-sidebar-toggle-hover: #2f4751;
    --mp-star-amber: #E9A800;
    --mp-danger: #d83a3a;
    --mp-danger-border: #f3c8c8;
    --mp-danger-bg: #fdecec;
    --mp-tint-green-bg: #eef6e6;
    --mp-tint-green-fg: #5a9a2f;
    --mp-tint-blue-bg: #e8f4fb;
    --mp-tint-blue-fg: #2589bd;
    --mp-tint-teal-bg: #e4f3f1;
    --mp-tint-teal-fg: #2f8f86;
    --mp-tint-amber-bg: #fbf2dd;
    --mp-tint-amber-fg: #b0851f;
    --mp-tint-slate-bg: #edf1f3;
    --mp-tint-slate-fg: #4a6470;
    --mp-sidebar-width-expanded: 248px;
    --mp-sidebar-width-collapsed: 78px;
    --mp-sidebar-transition: width .24s cubic-bezier(.4, 0, .2, 1);
}


@font-face {
    font-family: "Inter";
    src: url('./fonts/Inter/Inter-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: "Montserrat";
    src: url('./fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: "Roboto";
    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

* {
    font-family: Inter, serif;
}

body {
    height: 100vh;
}

/**/

/**/

/* Text */

.proplanti-loading-title {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 100%;
    color: var(--proplanti-text-dark)
}

.proplanti-text-title-pages-dashboard {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 130%;
    color: whitesmoke;
}

.proplanti-text-title-pages {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 130%;
    color: var(--proplanti-text-dark);
}

.proplanti-text-semibold {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.proplanti-text-submenu-subtitle {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
}

.proplanti-text-long {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 160%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.proplanti-text-useremail {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 140%;
}

.proplanti-text-usertext {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 140%;
}

.proplanti-cursor-pointer {
    cursor: pointer;
}

.proplanti-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.proplanti-text-uper-first {
    text-transform: capitalize;
}

/**/

/* Dialog */

.e-dlg-container .e-dialog .e-dlg-header {
    color: var(--proplanti-text-dark);
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    /* altura fixa cortava o texto: 18px * 130% = 23,4px por linha e headers longos quebram em 2+ linhas */
    min-height: 24px;
    /* o tema Syncfusion aplica nowrap + hidden + ellipsis ao .e-dlg-header e truncava o texto-pergunta */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
}

.e-dlg-container {
    z-index: 9999997 !important;
}

.e-dialog .e-dlg-content {
    color: var(--proplanti-icons-gray);
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 140%;
}

.font-ai-insight {
    color: var(--proplanti-icons-gray);
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
}

.e-dlg-overlay {
/ / background-color: brown;
    opacity: 0.6;
}

.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary), .e-css.e-btn.e-flat:not(.e-primary):not(.e-value-switch-btn) {
    padding: 0 20px !important;
    height: 40px !important;
    min-width: 77px !important;
    border-radius: 4px !important;
    border: unset !important;
    box-sizing: unset !important;
    margin-left: 5px !important;
    color: var(--proplanti-text-dark);
    background: white;
    box-shadow: none !important;
    border: 1px solid #BFD5DF !important;
    margin-right: 5px !important;
}

.e-dialog .e-footer-content .e-btn.e-flat:is(.e-primary), .e-css.e-btn.e-flat:is(.e-primary) {
    background: var(--proplanti-primary) !important;
    color: white !important;
    padding: 0 20px !important;
    height: 40px !important;
    min-width: 77px !important;
    border-radius: 4px !important;
    border: unset !important;
    box-sizing: unset !important;
    margin-left: 5px !important;
    box-shadow: none !important;
    border: 1px solid #BFD5DF !important;
    margin-right: 5px !important;
}

.e-dlg-container .e-footer-content .e-primary {
    background: var(--proplanti-primary) !important;
    color: white !important;
    padding: 0 20px !important;
    height: 40px !important;
    min-width: 77px !important;
    border-radius: 4px !important;
    border: unset !important;
    box-sizing: unset !important;
    margin-left: 5px !important;
    box-shadow: none !important;
    border: 1px solid #BFD5DF !important;
    margin-right: 5px !important;
}

.e-dlg-container .e-footer-content .e-primary:hover {
    background-color: var(--proplanti-primary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.e-dlg-container .e-footer-content .e-primary:active {
    background-color: var(--proplanti-primary-active);
    box-shadow: none;
}

.e-dlg-container .e-footer-content .e-primary:focus {
    background-color: var(--proplanti-primary-focus);
    box-shadow: 3px 3px 12px rgba(128, 221, 59, 0.9);
}

.e-dialog .e-footer-content .e-btn.e-flat:is(.e-primary):hover, .e-css.e-btn.e-flat:is(.e-primary):hover {
    background-color: var(--proplanti-primary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.e-dialog .e-footer-content .e-btn.e-flat:is(.e-primary):active, .e-css.e-btn.e-flat:is(.e-primary):active {
    background-color: var(--proplanti-primary-active);
    box-shadow: none;
}

.e-dialog .e-footer-content .e-btn.e-flat:is(.e-primary):active, .e-css.e-btn.e-flat:is(.e-primary):focus {
    background-color: var(--proplanti-primary-focus);
    box-shadow: 3px 3px 12px rgba(128, 221, 59, 0.9);
}

.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary):hover, .e-css.e-btn.e-flat:not(.e-primary):not(.e-value-switch-btn):hover {
    background-color: var(--proplanti-secondary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary):active, .e-css.e-btn.e-flat:not(.e-primary):not(.e-value-switch-btn):active {
    background-color: var(--proplanti-secondary-active);
    box-shadow: none;
}

.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary):active, .e-css.e-btn.e-flat:not(.e-primary):not(.e-value-switch-btn):focus {
    background-color: var(--proplanti-secondary-focus);
    box-shadow: 0px 0px 12px rgba(46, 169, 221, 0.6);
}

/* Diálogo "Filtro customizado" do filtro Excel da grid (.e-xlflmenu).
   As regras de rodapé acima exigem a classe `e-flat`, que o Syncfusion NÃO aplica aos botões deste
   diálogo — por isso o "Cancelar" dele saía no cinza-escuro do tema em vez do secundário do app
   (branco com borda), destoando do "Cancelar" do próprio filtro de checkbox, que fica ao lado.
   Aqui os seletores não dependem de `e-flat`: valem para os dois botões independentemente das
   classes que a versão do componente resolva emitir. */
.e-xlflmenu .e-footer-content .e-btn {
    padding: 0 20px !important;
    height: 40px !important;
    min-width: 77px !important;
    border-radius: 4px !important;
    box-sizing: unset !important;
    box-shadow: none !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    border: 1px solid #BFD5DF !important;
}

.e-xlflmenu .e-footer-content .e-btn.e-primary {
    background: var(--proplanti-primary) !important;
    color: white !important;
}

.e-xlflmenu .e-footer-content .e-btn.e-primary:hover {
    background: var(--proplanti-primary-hover) !important;
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16) !important;
}

.e-xlflmenu .e-footer-content .e-btn.e-primary:active {
    background: var(--proplanti-primary-active) !important;
}

.e-xlflmenu .e-footer-content .e-btn:not(.e-primary) {
    background: var(--proplanti-secondary) !important;
    color: var(--proplanti-text-dark) !important;
}

.e-xlflmenu .e-footer-content .e-btn:not(.e-primary):hover {
    background: var(--proplanti-secondary-hover) !important;
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16) !important;
}

.e-xlflmenu .e-footer-content .e-btn:not(.e-primary):active {
    background: var(--proplanti-secondary-active) !important;
}

/**/

/* Scroll — a espessura vem da preferência global do usuário (UserSettingsGeral.TamanhoScrollbar),
   gravada na raiz do documento pelo ProplantiMainLayoutBase. Sem a variável (usuário que nunca
   escolheu, ou app que não roda o interop), o fallback são os 7px históricos. */

::-webkit-scrollbar {
    height: var(--proplanti-scrollbar-size, 7px);
    width: var(--proplanti-scrollbar-size, 7px);
}

::-webkit-scrollbar-track {
    border-radius: var(--proplanti-scrollbar-size, 7px);
    box-shadow: inset 0 0 1px lightgray;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--proplanti-scrollbar-size, 7px);
    background-color: #868486;
}

/**/


/* Inputs proplanti */

.proplanti-inputs-row {
    height: var(--proplanti-multiple-input-row-hieght) !important;
    width: var(--proplanti-multiple-input-row-width) !important;
}

/* O Syncfusion também copia o CssClass do TimePicker para o popup anexado ao body.
   A largura percentual pertence apenas ao campo; no popup ela seria calculada contra a
   página e faria a lista ocupar toda a linha. */
.proplanti-input-text:not(.e-popup) {
    border-color: var(--proplanti-border-box) !important;
    height: var(--proplanti-input-text-height) !important;
    width: var(--proplanti-input-text-width) !important;
}

.proplanti-input-text-remove-padding-top {
    padding-top: unset !important;
}

.proplanti-input-dropdown {
    border-color: var(--proplanti-border-box) !important;
    height: var(--proplanti-input-text-height) !important;
    text-transform: uppercase;
}

/* :not(.e-popup) — o Syncfusion copia o CssClass do componente para o .e-popup também;
   sem a exclusão, o height fixo do campo vaza para o popup e espremia a lista (ex.: multiselect
   de Módulos exibindo 1 de 6 itens). O input não tem .e-popup, então continua com a altura. */
.proplanti-input-autocomplete:not(.e-popup) {
    border-color: var(--proplanti-border-box) !important;
    height: var(--proplanti-input-text-height) !important;
    text-transform: uppercase;
    /*width aplicado na div pai, direto no arquivo do componente*/
}

.proplanti-input-with-space-for-button {
    border-color: var(--proplanti-border-box) !important;
    height: var(--proplanti-input-text-height) !important;
    text-transform: uppercase;
    /*width aplicado na div pai, direto no arquivo do componente*/
}

.proplanti-input-integer {
    border-color: var(--proplanti-border-box) !important;
    height: var(--proplanti-input-text-height) !important;
    width: var(--proplanti-input-text-width) !important;
}

.e-numerictextbox {
    text-align: right !important;
    margin-right: 10px !important;
}

.proplanti-button-edit {
    position: unset !important;
    right: 5% !important;
}

.proplanti-button-second-onaccordion {
    position: absolute !important;
    right: 10% !important;
}

.proplanti-button-plus {
    position: absolute !important;
    right: 5% !important;
}

/* ClienteSideBar copy buttons: keep the field flexible and the action in normal flex flow. */
.dado-conexao-container {
    gap: 6px;
    align-items: flex-start;
}

.dado-conexao-container > .proplanti-button-plus,
.dado-conexao-container > .cliente-sidebar-action-button--copy {
    position: static !important;
    right: auto !important;
    flex: 0 0 auto;
    margin-top: 20px;
}

.dado-conexao-container > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.cliente-sidebar-actions {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cliente-sidebar-action-button.mp-button-small {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    padding: 0 12px;
    margin: 0;
    border-radius: 6px;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cliente-sidebar-action-button.mp-button-icon-left.mp-button-small {
    flex-direction: row-reverse;
    gap: 6px;
}

.cliente-sidebar-action-button--copy.mp-button-small {
    height: var(--proplanti-input-text-height, 40px);
}

.cliente-sidebar-action-button.mp-outlined-primary {
    background: #fff !important;
    border: 1px solid var(--proplanti-border-box) !important;
    box-sizing: border-box !important;
    color: var(--proplanti-text-dark) !important;
}

.cliente-sidebar-action-button.mp-outlined-primary:hover {
    background: var(--proplanti-secondary-hover) !important;
    border-color: var(--proplanti-border-box-hover) !important;
}

.cliente-sidebar-action-button > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cliente-sidebar-action-button i {
    font-size: 16px;
    line-height: 1;
}

.proplanti-button-accordion-header {
    right: 5% !important;
    margin-left: 10px !important;
}

.proplanti-button-accordion-header-pending-grid-update {
    margin-top: 10px;
    margin-right: 15px;
}

.proplanti-button-custo-1 {
}

.proplanti-accordion-header-button-container {
    flex-grow: 4 !important;
    right: 5% !important;
    position: absolute !important;
    background: unset !important;
}

.proplanti-delete-grid {
    right: 8% !important;
}

.proplanti-input-required {
    border-left: 3px solid green !important;
}

.proplanti-input-required:focus-visible {
    border-left: 3px solid green !important;
}

.proplanti-input-required:hover:not(:focus-within) {
    border-left: 3px solid green !important;
    border-right: 1px solid var(--proplanti-border-box-hover) !important;
    border-top: 1px solid var(--proplanti-border-box-hover) !important;
    border-bottom: 1px solid var(--proplanti-border-box-hover) !important;
}

::-webkit-input-PlaceHolder { /* WebKit browsers */
    text-transform: none;
}

:-moz-PlaceHolder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-PlaceHolder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-PlaceHolder { /* Internet Explorer 10+ */
    text-transform: none;
}

::PlaceHolder { /* Recent browsers */
    text-transform: none;
}

/**/

.e-menu-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 0 20px;
    height: 40px;
    min-width: 77px;
    margin-left: 5px;
    margin-right: 5px;

    border-radius: 4px;
    box-shadow: none !important;
    box-sizing: unset !important;

    color: var(--proplanti-text-dark) !important;
    background: white !important;
    border: 1px solid #BFD5DF !important;

    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 125%;
}

.e-menu-container .e-menu-parent {
    padding: 0 20px;
}

.e-menu-container .e-menu-parent .e-menu-item .e-badge {
    color: var(--proplanti-text-dark) !important;
    background: white !important;
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 125%;
}

.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-container .e-ul .e-menu-item.e-selected {
    background: whitesmoke !important;
}

.e-menu-container.e-menu-popup:hover {
    background: white !important;
}

/*.e-menu-item.e-menu-caret-icon:hover {*/
/*    background-color: unset !important;*/
/*    box-shadow: unset !important;*/
/*}*/

.e-menu-container:hover {
    background-color: var(--proplanti-secondary-hover) !important;
    box-shadow: 0 6px 8px rgba(32, 47, 47, 0.16) !important;
}

.e-menu-container:focus {
    background-color: var(--proplanti-secondary-focus) !important;
    box-shadow: 0px 0px 12px rgba(46, 169, 221, 0.6) !important;
}

.e-menu-container:active {
    background-color: var(--proplanti-secondary-active) !important;
    box-shadow: none !important;
}

.e-menu-item .e-focused > span {
    background-color: #e9ecef
}

/* Input Button MultiOptions ex:Manutencão de Lotes*/

.e-dropdown-btn, .e-dropdown-btn.e-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 0 20px;
    height: 40px;
    min-width: 77px;
    margin-left: 5px;
    margin-right: 5px;

    border-radius: 4px;
    box-shadow: none !important;
    box-sizing: unset !important;

    color: var(--proplanti-text-dark) !important;
    background: white !important;
    border: 1px solid #BFD5DF !important;

    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 125%;
}

.e-dropdown-btn, .e-dropdown-btn.e-btn:hover {
    background-color: var(--proplanti-secondary-hover) !important;
    box-shadow: 0 6px 8px rgba(32, 47, 47, 0.16) !important;
}

.e-dropdown-btn, .e-dropdown-btn.e-btn:focus {
    background-color: var(--proplanti-secondary-focus) !important;
    box-shadow: 0px 0px 12px rgba(46, 169, 221, 0.6) !important;
}

.e-dropdown-btn, .e-dropdown-btn.e-btn:active {
    background-color: var(--proplanti-secondary-active) !important;
    box-shadow: none !important;
}

.e-dropdown-btn, .e-dropdown-btn.e-btn > span.e-btn-icon {
    margin-left: 5px;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:hover {
    border: 1px solid #BFD5DF !important;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:focus {
    border: 1px solid #BFD5DF !important;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:active {
    border: 1px solid #BFD5DF !important;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:hover, .e-css.e-btn:hover {
    border: 1px solid #BFD5DF !important;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:hover, .e-css.e-btn:focus {
    border: 1px solid #BFD5DF !important;
}

.proplanti-header-padding-left .e-dropdown-btn .e-btn:hover, .e-css.e-btn:active {
    border: 1px solid #BFD5DF !important;
}


/**/

/* DatePicker */

.proplanti-input-datepicker:is(.proplanti-input-required) {
    border-right: 1px solid var(--proplanti-border-box-hover) !important;
    border-top: 1px solid var(--proplanti-border-box-hover) !important;
    border-bottom: 1px solid var(--proplanti-border-box-hover) !important;
}

.proplanti-input-datepicker:not(.proplanti-input-required) {
    border-color: var(--proplanti-border-box);
}

/* Focus para o icone do datepicker */

.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
    background-color: var(--proplanti-primary-hover) !important;
    border-top-right-radius: 1.5px;
    border-bottom-right-radius: 1.5px;
}

/*.proplanti-input-datepicker > .e-datepicker {*/
/*    height: var(--proplanti-input-text-height) !important;*/
/*    !*width aplicado na div pai, direto no arquivo do componente*!*/
/*}*/

.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: var(--proplanti-input-text-height) !important;
}

/* Calendarios */

.e-calendar {
    background-color: white !important;
    border: 1px solid #BFD5DF !important;
}

/* Hover DatePicker popup*/

.e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
    background-color: var(--proplanti-primary) !important;
    color: white !important;
    border: unset !important;
}

/* Button footer DatePicker popup  */

.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    color: var(--proplanti-text-dark) !important;
    background: white !important;
    border: 1px solid #BFD5DF !important;
    font-family: Inter, serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 125% !important;
}

/* previous and next icon DataPicker popup  */

.e-calendar .e-header span, .e-bigger.e-small .e-calendar .e-header span {
    border: 1px solid #BFD5DF !important;
    border-radius: 5px;
    color: var(--proplanti-primary-hover) !important;
}

/* Hover para os botões de mês anterior/posterior */

.e-calendar .e-header span:hover {
    border: 1px solid #BFD5DF !important;
    border-radius: 4px;
    color: white !important;
    background-color: var(--proplanti-primary-hover) !important;
}

/* Selecionado DataPicker popup */

.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: var(--proplanti-primary) !important;
}

/*.e-popup-open {*/
/*    width: available !important;*/
/*    height: auto !important;*/
/*}*/

.proplanti-input-text:hover:not(.proplanti-input-required):not(:focus-within),
.proplanti-input-integer:hover:not(.proplanti-input-required):not(:focus-within),
.proplanti-input-autocomplete:hover:not(.proplanti-input-required):not(:focus-within),
.proplanti-input-dropdown:hover:not(.proplanti-input-required):not(:focus-within),
.proplanti-input-datepicker:hover:not(.proplanti-input-required):not(:focus-within),
.proplanti-input-integer:hover:not(.proplanti-input-required):not(:focus-within) {
    border: 1px solid var(--proplanti-border-box-hover) !important;
}

/**/

/* Accordion */

.e-accordion {
    border: none !important;
}

/* Accordion - Header*/

.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    border: none;
}

.e-accordion .e-acrdn-item.e-select {
    border: none;
}

.e-accordion .e-acrdn-item.e-expand-state.e-select {
    border: none;
}

.e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
    background: #F3F6F6 !important;
    justify-content: center;
    border: 2px solid #F3F6F6 !important;
    margin-bottom: 12px !important;
    border-radius: 8px;
    width: 100%;
    border: none;
    display: flex
}

.e-accordion .e-acrdn-item.e-selected.e-expand-state > .e-acrdn-header {
    background: #FFFFFF !important;
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
    width: 100%;
}

.e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    background-color: white !important;
    border: none !important;
}

.e-accordion .e-acrdn-item.e-selected.e-select {
    border: 2px solid #E2E7EA !important;
    margin-bottom: 12px !important;
}

.e-accordion .e-acrdn-item.e-selected.e-expand-state.e-selected.e-active {
    border: 2px solid #E2E7EA;
    margin-bottom: 12px !important;
}

.e-accordion.e-acrdn-root.e-lib.e-keyboard {
    border: none;
}

.e-acrdn-content {
    padding-top: 0 !important;
}

.e-acrdn-panel {
    /*padding-left: 2rem;*/
}

.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
    display: none !important;
}

.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    width: 100%;
}

/* Accordion - Item*/

.e-accordion .e-acrdn-item {
    width: 100%;
}

/* Accordion - Icon*/

.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons {
    color: var(--proplanti-primary);
}

.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-tgl-collapse-icon.e-icons {
    display: none !important;
}

/**/

/* Grid */

/*.e-groupcaption .e-ellipsistooltip  div{*/
/*    margin: 20px*/
/*}*/

/*#ProplantiFormSideBar .e-grid .e-rowcell {*/
/*    padding: 15px 0 15px 10px;*/
/*    border-bottom: 1px solid lightgray !important;*/
/*}*/

#ProplantiFormSideBar .e-rowcell {
    cursor: pointer;
}

/*#ProplantiFormSideBar .e-grid .e-gridheader .e-columnheader {*/
/*    padding-left: 5px;*/
/*}*/

#ProplantiFormSideBar .e-grid .e-gridheader {
    border: unset !important;
}

#ProplantiMenuGrid .e-grid {
    background-color: whitesmoke !important;
}

/*#ProplantiMenuGrid > .e-headercell:first-child, .e-headercell:first-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 4px 0 0 4px;*/
/*}*/

/*#ProplantiMenuGrid > .e-headercell:last-child, .e-headercell:last-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 0 4px 4px 0;*/
/*}*/

/*#ProplantiMenuGrid > .e-rowcell:first-child, .e-rowcell:first-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 4px 0 0 4px;*/
/*}*/

/*#ProplantiMenuGrid > .e-rowcell:last-child, .e-rowcell:last-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 0 4px 4px 0;*/
/*}*/

/*#ProplantiMenuGrid > .e-headercell:first-child, .e-headercell:first-child, .e-headercell:last-child, .e-headercell:last-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 4px 4px 4px 4px;*/
/*}*/

/*#ProplantiMenuGrid > .e-rowcell:first-child, .e-rowcell:first-child, .e-rowcell:last-child, .e-rowcell:last-child {*/
/*    !*height: 40px;*!*/
/*    border-radius: 4px 4px 4px 4px;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-table {
    /*padding: unset;*/
    background-color: whitesmoke;
}

#ProplantiMenuGrid .e-toolbar .e-toolbar-items {
    background-color: whitesmoke;
}

/*#ProplantiMenuGrid .e-grid .e-gridheader {*/
/*    border-spacing: unset !important;*/
/*    !*background-color: var(--proplanti-shadow-gray);*!*/
/*    background-color: unset !important;*/
/*    border-radius: 8px;*/
/*    border: unset;*/
/*    margin: 8px 0 0 0;*/
/*    padding: unset;*/
/*}*/
/*#ProplantiMenuGrid .e-grid .e-gridheader table {*/
/*    border-spacing: unset !important;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-headercontent {
    border: unset;
}

/*#ProplantiMenuGrid .e-grid .e-headertext {*/
/*    padding: 0 23px;*/
/*}*/

/*.e-grid .e-headercell {*/
/*    background-color: var(--proplanti-shadow-gray);*/
/*    !*border: 2px solid var(--proplanti-shadow-gray);*!*/
/*    !*padding: 4px 4px;*!*/
/*}*/
/*.e-grouptopleftcell .e-lastgroupleftcell{*/
/*    background-color: var(--proplanti-shadow-gray);    */
/*}*/
/*.e-grid .e-altrow {*/
/*    background-color: whitesmoke;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-rowcell {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    /*line-height: 140%;*/
    /*padding: 0 23px;*/
    background-color: white;
}

#ProplantiMenuGrid .e-grid .e-altrow {
    /*margin: 5px 0;*/
    background-color: whitesmoke;
}

/*!*#ProplantiMenuGrid .e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid, .e-float-input.e-control-wrapper textarea:not(:valid), .e-float-input.e-control-wrapper textarea:valid, .e-float-input textarea:not(:valid), .e-float-input textarea:valid, .e-input-group.e-control-wrapper textarea:not(:valid), .e-input-group.e-control-wrapper textarea:valid, .e-input-group textarea:not(:valid), .e-input-group textarea:valid {*!*/
/*!*    height: var(--proplanti-input-text-height) !important;*!*/
/*!*}*!*/

/*#ProplantiMenuGrid .e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid {*/
/*    height: var(--proplanti-input-text-height) !important;*/
/*}*/

/*#ProplantiMenuGrid .e-grid .e-toolbar-right span.e-input-group {*/
/*    height: 30px;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-toolbar-right span.e-input-group:active {
    border-color: unset;
}

/*#ProplantiMenuGrid .e-grid .e-toolbar-right span.e-input-group:hover {*/
/*    border: 1px solid var(--proplanti-border-box-hover);*/
/*}*/

/*#ProplantiMenuGrid .e-grid .e-toolbar-right span.e-input-group:focus {*/
/*    border: 1px solid var(--proplanti-border-box-hover);*/
/*}*/

/*#ProplantiMenuGrid .e-grid .e-toolbar-right span.e-search-icon {*/
/*    font-size: 15px;*/
/*}*/

/*#ProplantiMenuGrid .e-grid.sf-grid .e-table {*/
/*    border-spacing: 0 14px;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-gridheader .e-detailheadercell {
    background-color: whitesmoke;
}

#ProplantiMenuGrid .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand {
    /*border: 1px solid lightgray;*/
    background-color: white;
    cursor: pointer;
}

#ProplantiMenuGrid .e-grid .e-icon-grightarrow {
    font-size: 19px;
    text-align: center;
    text-indent: unset;
}

#ProplantiMenuGrid .e-grid .e-icon-gdownarrow {
    font-size: 19px;
    text-align: center;
    text-indent: unset;
}

#ProplantiMenuGrid .e-grid .e-detailindentcell {
    border-color: whitesmoke;
}

#ProplantiMenuGrid .e-grid .e-detailcell {
    border: unset;
    padding: unset;
}

/*#ProplantiMenuGrid .e-grid .e-gridpager {*/
/*    border: unset;*/
/*    padding: unset;*/
/*    background-color: whitesmoke;*/
/*    margin-bottom: 20px;*/
/*}*/

#ProplantiMenuGrid .e-grid .e-content {
    background-color: whitesmoke;
}

/*#ProplantiMenuGrid .e-grid .e-emptyrow > td {*/
/*    text-indent: 2px;*/
/*}*/

.e-pager .e-active {
    border-color: var(--proplanti-primary);
}

/* Sprint 050 — classe compartilhada `.grid-manutencao` (token aditivo, ao lado da `-lotes`):
   generaliza a moldura visual da grid (borda da célula, cores de situação, pílula, group-caption)
   para TODAS as telas de manutenção. NÃO inclui o regime de altura flex (.container/.grid-manutencao-de-lotes
   flex:1 + height:100%), que continua exclusivo do Lotes — as demais telas usam FitHeightScreen. */
.grid-manutencao-de-lotes .e-grid .e-rowcell,
.grid-manutencao .e-grid .e-rowcell {
    border-style: solid;
    border-color: lightgray;
    /*border-width: 1px 0 0 1px;*/
}

/* Sprint 043 — Task-00: V1 — linha branca/zebra, seleção suave; cor de situação só na borda
   esquerda (3px via ProplantiGrid + .situacao-border-only), sem background de situação. */
.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid .e-row .e-rowcell,
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid .e-row .e-rowcell {
    background-color: var(--proplanti-secondary) !important;
}

.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid .e-row.e-altrow .e-rowcell,
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid .e-row.e-altrow .e-rowcell {
    background-color: var(--proplanti-secondary-hover) !important;
}

.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid .e-row.e-active .e-rowcell,
.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid .e-row .e-rowcell.e-active,
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid .e-row.e-active .e-rowcell,
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid .e-row .e-rowcell.e-active {
    background-color: var(--proplanti-secondary-focus) !important;
}

.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid.e-gridhover
.e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-updatedtd):not(.e-indentcell),
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid.e-gridhover
.e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--proplanti-secondary-hover) !important;
}

.grid-manutencao-de-lotes .proplanti-grid.situacao-border-only .e-grid .e-leftfreeze.e-rowcell,
.grid-manutencao .proplanti-grid.situacao-border-only .e-grid .e-leftfreeze.e-rowcell {
    background-color: inherit !important;
}

/* Sprint 043 — Task-01: célula da coluna Situação com pílula (alinhamento vertical). */
.grid-manutencao-de-lotes .e-grid .e-rowcell.situacao-lote-pill-cell,
.grid-manutencao .e-grid .e-rowcell.situacao-pill-cell,
.grid-manutencao .e-grid .e-rowcell.situacao-lote-pill-cell {
    vertical-align: middle;
}

.container-manutencao-de-lotes {
    display: flex;
    flex-direction: column;
    /* ~135px = chrome acima do container (título + botões de ação do header). Somados aos 5px de
       rodapé/respiro até a base da viewport, dão o offset total: footer de ~5px. */
    height: calc(100vh - 140px);
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
    gap: 0;
}

.grid-manutencao-de-lotes {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Coluna flex para o wrapper .proplanti-grid preencher de fato toda a altura disponível
       (evita o grid colapsar para a altura do conteúdo, deixando faixa vazia abaixo do paginador). */
    display: flex;
    flex-direction: column;
}

.grid-manutencao-de-lotes .proplanti-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.grid-manutencao-de-lotes .proplanti-grid,
.grid-manutencao-de-lotes .e-grid {
    height: 100% !important;
}

/* O Syncfusion calcula uma altura FIXA em pixels para o corpo (.e-content) na inicialização —
   quando o container ainda não tem altura (tab/flex não estabilizados) — e não recalcula depois,
   deixando o grid exibir poucas linhas com o paginador colado nelas e uma faixa vazia abaixo.
   Tornando o .e-grid uma coluna flex, o corpo passa a preencher o espaço entre header e paginador
   (que fica fixado embaixo), independente do valor inline calculado pelo Syncfusion. */
.grid-manutencao-de-lotes .e-grid {
    display: flex !important;
    flex-direction: column;
}

.grid-manutencao-de-lotes .e-grid .e-gridcontent {
    flex: 1 1 auto;
    min-height: 0;
}

.grid-manutencao-de-lotes .e-grid .e-gridcontent .e-content {
    height: 100% !important;
}

/* Manutencao de Tabela de Preco (sprint 136) — o grid agora e EDITAVEL in-cell (nao mais listagem
   paginada server-side), entao usa o regime de altura flex do Lotes (Height100Percent) em vez do
   FitHeightScreen da sprint 131: o container e uma coluna flex que ocupa a viewport (menos o chrome do
   header) e o grid preenche o espaco disponivel, deixando ~5px de respiro ate a base. O frame visual do
   grid (bordas/cores/group-caption) vem da classe compartilhada `.grid-manutencao`; a toolbar alinha a
   direita pela `.toolbar-manutencao`. O estado vazio (sem tabela selecionada) COBRE a area do grid
   orientando a selecao, em vez de empilhar abaixo (o que empurraria a pagina). */
.container-manutencao-de-tabela-preco {
    display: flex;
    flex-direction: column;
    /* ~135px = chrome acima do container (titulo + botoes de acao do header); somado ao respiro de ~5px
       ate a base da viewport da o offset total. Mesmo calculo do `.container-manutencao-de-lotes`. */
    height: calc(100vh - 140px);
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
    gap: 0;
}

.grid-manutencao-de-tabela-preco {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Coluna flex para o wrapper .proplanti-grid preencher toda a altura disponivel (evita o grid
       colapsar para a altura do conteudo, deixando faixa vazia abaixo do paginador). */
    display: flex;
    flex-direction: column;
}

.grid-manutencao-de-tabela-preco .proplanti-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.grid-manutencao-de-tabela-preco .proplanti-grid,
.grid-manutencao-de-tabela-preco .e-grid {
    height: 100% !important;
}

/* O Syncfusion fixa uma altura em pixels para o corpo (.e-content) na inicializacao (quando o container
   ainda nao tem altura) e nao recalcula depois. Tornando o .e-grid uma coluna flex, o corpo passa a
   preencher o espaco entre header e paginador — como no Lotes. */
.grid-manutencao-de-tabela-preco .e-grid {
    display: flex !important;
    flex-direction: column;
}

.grid-manutencao-de-tabela-preco .e-grid .e-gridcontent {
    flex: 1 1 auto;
    min-height: 0;
}

.grid-manutencao-de-tabela-preco .e-grid .e-gridcontent .e-content {
    height: 100% !important;
}

.empty-state-manutencao-de-tabela-preco {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--proplanti-secondary, #ffffff);
}

/* ============================================================================
   Expandir datagrid — botao "Expandir/Restaurar" ao lado do filtro nas telas de
   manutencao (Lotes de Producao, Comercial/Ordens, Faturamento/Notas Fiscais).
   Estado efemero: liga ao clicar em "Expandir" e desliga ao selecionar uma linha.
   ============================================================================ */

/* Producao: esconde a faixa de controles inteira (agrupar + chips + as acoes
   Filtros/Expandir/Logs/Colunas) e a strip de KPIs; o grid em flex
   (.grid-manutencao-de-lotes, flex:1) cresce e ocupa o espaco liberado. As acoes da
   faixa direita migram para a linha de acoes do HeaderMenu enquanto expandido
   (controlado por IsGridExpanded no .razor), continuando acessiveis. */
.container-manutencao-de-lotes.is-grid-expanded .toolbar-manutencao-de-lotes,
.container-manutencao-de-lotes.is-grid-expanded .kpis-manutencao-de-lotes {
    display: none !important;
}

/* Comercial/Faturamento: telas FitHeightScreen ja preenchem a viewport, entao o ganho
   e leve — a altura extra vem de IncreaseHeightInPx no code-behind e aqui removemos o
   respiro acima do grid para a area extra aparecer colada ao topo. */
.grid-manutencao-de-ordens-comerciais.is-grid-expanded,
.grid-manutencao-de-ordens-de-compra.is-grid-expanded,
.grid-manutencao-de-notas-fiscais.is-grid-expanded,
.grid-manutencao-de-notas-destinadas.is-grid-expanded,
.grid-manutencao-de-materiais-circulantes.is-grid-expanded,
.grid-manutencao-de-movimento-mc-gfp.is-grid-expanded,
.grid-manutencao-de-ficha-de-multiplicacao.is-grid-expanded,
.grid-manutencao-de-relatorios.is-grid-expanded {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ficha de Multiplicacao (sprint #069): tela FitHeightScreen como Notas/Ordens — ao expandir,
   esconde a faixa de chips/acoes e a strip de KPIs; a reserva de altura (DecreaseHeightInPx) recupera
   o espaco para o grid. As acoes migram para a linha do HeaderMenu enquanto expandido (IsGridExpanded
   no .razor), continuando acessiveis. */
.container-manutencao-de-ficha-de-multiplicacao.is-grid-expanded .toolbar-manutencao-de-ficha-de-multiplicacao,
.container-manutencao-de-ficha-de-multiplicacao.is-grid-expanded .kpis-manutencao-de-ficha-de-multiplicacao {
    display: none !important;
}

/* Toolbar única acima do grid da Manutenção de Lotes (sprint 040, Task-05) — consolida o dropdown
   "Agrupar por" (grupo ESQUERDO) e as ações Filtros / Seleção de colunas / toggles de chips e KPIs
   (grupo DIREITO). Substitui a toolbar provisória .toolbar-agrupar-manutencao-de-lotes (Task-03). */
.toolbar-manutencao-de-lotes,
.toolbar-manutencao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 8px;
    border-bottom: 0;
    flex: 0 0 auto;
    position: relative;
    /* Precisa empilhar ACIMA da strip de KPIs (.kpis-manutencao), que também é posicionada e vem
       DEPOIS no DOM. `position: relative` + empilhamento faz desta toolbar um stacking context, e o
       tooltip CSS-only (.mp-tooltip::after) é resolvido AQUI DENTRO — o valor alto dele não disputa
       com a strip. Empatados, o desempate era por ordem de DOM e os cards de KPI cobriam o tooltip.
       Fixado por ToolbarHibridoCssContractTests (que faz regex no fonte: evite literais aqui). */
    z-index: 1;
}

.toolbar-manutencao-de-lotes-left,
.toolbar-manutencao-de-lotes-right,
.toolbar-manutencao-left,
.toolbar-manutencao-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Wrapper das acoes do grid (Filtros/Expandir/Logs/Colunas). Renderizado tanto na faixa de
   controles (estado normal) quanto na linha de acoes do HeaderMenu (grid expandido); carrega o
   proprio gap para manter o mesmo espacamento entre os botoes nos dois pontos — o container do
   RightBottomFragment do header nao tem gap. */
.grid-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-manutencao-de-lotes-left,
.toolbar-manutencao-left {
    flex: 1 1 auto;
    overflow: hidden;
}

.toolbar-manutencao-de-lotes-right,
.toolbar-manutencao-right {
    flex: 0 0 auto;
    margin-left: auto;
}

.toolbar-manutencao-de-lotes .dropdown-agrupar-manutencao-de-lotes,
.toolbar-manutencao .dropdown-agrupar-manutencao-de-lotes {
    flex: 0 0 auto;
    /* O gap da toolbar (6px) já espaça os controles — zera a margem global do .e-dropdown-btn. */
    margin: 0;
}

.toolbar-manutencao-de-lotes .situacao-chips-filtro,
.toolbar-manutencao .situacao-chips-filtro {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
}

.toolbar-manutencao-de-lotes .manutencao-lotes-toolbar-button.mp-button-small,
.kpis-manutencao-de-lotes .manutencao-lotes-toolbar-button.mp-button-small,
.toolbar-manutencao .manutencao-lotes-toolbar-button.mp-button-small,
.kpis-manutencao .manutencao-lotes-toolbar-button.mp-button-small {
    width: auto;
    /* Mesma altura do botão "Agrupar por" (.e-dropdown-btn = 40px) para alinhar a faixa de controles. */
    height: 40px;
    padding: 0 10px;
    margin: 0;
    border-radius: 4px;
    box-shadow: none;
}

/* Toggle de esconder/mostrar filtros rápidos: vive no início da própria linha (toolbar-left)
   e não deve encolher quando os chips disputam espaço. */
.toolbar-manutencao-de-lotes-left .manutencao-lotes-toolbar-toggle.mp-button-small,
.toolbar-manutencao-left .manutencao-lotes-toolbar-toggle.mp-button-small {
    flex: 0 0 auto;
}

/* Botões de ação primários expostos no header da Manutenção de Lotes (sprint 040, Task-04):
   "Novo planejamento" + "Apontar atividade" planos + "Mais ▾". O LeftBottomFragment é um flex
   container; garantimos espaçamento consistente entre os botões e que não estourem em telas
   estreitas (permite scroll horizontal em vez de quebra/overflow do header). */
.proplanti-header-padding-left .manutencao-lotes-acao-primaria,
.proplanti-header-padding-left .manutencao-lotes-acao-mais {
    margin-right: 8px;
    flex: 0 0 auto;
}

.proplanti-header-padding-left .manutencao-lotes-acao-mais {
    margin-right: 0;
}

@media (max-width: 768px) {
    .proplanti-header-padding-left .manutencao-lotes-acao-primaria,
    .proplanti-header-padding-left .manutencao-lotes-acao-mais {
        margin-right: 6px;
    }
}

/* ── Split de ação primária (revisão do layout da sprint 040) ────────────────────────────────
   Cada ação primária (Novo planejamento de lote, Apontar atividade) é um SPLIT: o corpo
   (.manutencao-lotes-split-main, um .mp-button de 40px) executa a ação em 1 clique e a seta
   (.manutencao-lotes-split-arrow, um .e-dropdown-btn) abre as ações secundárias. Corpo e seta
   ficam colados: cantos EXTERNOS como os botões vizinhos (4px), cantos INTERNOS retos. */
.proplanti-header-padding-left .manutencao-lotes-split {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin-right: 8px;
}

/* Densidade: corpo e seta compartilham a MESMA altura efetiva em confortável/normal/compacto.
   O corpo primário (verde) não tem borda e renderia ~2px mais baixo que a seta/corpo com borda
   (box-sizing herdado = content-box) — causava escadinha corpo↔seta e desalinhava ao trocar a
   densidade. Fixamos os dois em border-box na altura dos vizinhos com borda ("Mais"/secundários =
   var de densidade + 2px de borda): 42px normal, 34px compacto (var 40→32). Especificidade (corpo
   0,3,0 / seta 0,4,0) + !important vencem os overrides de densidade de .mp-button/.e-dropdown-btn. */
.manutencao-lotes-split .manutencao-lotes-split-main.mp-button,
.manutencao-lotes-split .manutencao-lotes-split-arrow.e-dropdown-btn,
.manutencao-lotes-split .manutencao-lotes-split-arrow.e-dropdown-btn.e-btn {
    box-sizing: border-box !important;
    height: calc(var(--proplanti-input-text-height, 40px) + 2px) !important;
    min-height: calc(var(--proplanti-input-text-height, 40px) + 2px) !important;
}

/* Corpo do split: cola na seta (sem margem/sombra/raio à direita). */
.manutencao-lotes-split .manutencao-lotes-split-main.mp-button {
    margin-right: 0;
    box-shadow: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Corpo secundário (branco): sem borda à direita — a seta desenha o divisor único. */
.manutencao-lotes-split .manutencao-lotes-split-main.mp-secondary {
    border-right: none;
}

/* Seta do split: só o caret, largura enxuta, colada ao corpo (sem margem/raio/min-width à
   esquerda). Os 3 seletores de classe + .e-btn vencem .e-dropdown-btn/.e-dropdown-btn.e-btn. */
.manutencao-lotes-split .manutencao-lotes-split-arrow.e-dropdown-btn,
.manutencao-lotes-split .manutencao-lotes-split-arrow.e-dropdown-btn.e-btn {
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    width: 40px;
    padding: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Variante secundária (branca, ex.: Apontar atividade): divisor sutil entre corpo e seta. */
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-secondary.e-dropdown-btn,
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-secondary.e-dropdown-btn.e-btn {
    border-left: 1px solid #BFD5DF;
}

/* Variante primária (verde, ex.: Novo planejamento): a seta herda a cor do corpo. Vence o
   fundo/texto brancos !important do .e-dropdown-btn (maior especificidade) em todos os estados. */
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn,
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn.e-btn,
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn.e-btn:hover,
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn.e-btn:focus,
.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn.e-btn:active {
    background: var(--proplanti-primary) !important;
    color: #fff !important;
    border: 1px solid var(--proplanti-primary) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.manutencao-lotes-split .manutencao-lotes-split-arrow.mp-primary.e-dropdown-btn.e-btn:hover {
    box-shadow: 0 6px 8px rgba(32, 47, 47, 0.16) !important;
}

/* O caret herda a cor do botão (branco no verde, escuro no branco). */
.manutencao-lotes-split .manutencao-lotes-split-arrow .e-caret {
    color: inherit !important;
}

/* Esconder a drop-area nativa do Syncfusion não deve deixar faixa/altura órfã no header.
   GroupingShowDropArea=false já remove o e-groupdroparea, mas garantimos que nenhum resíduo
   reserve espaço no topo do grid. */
.grid-manutencao-de-lotes .e-grid .e-groupdroparea,
.grid-manutencao .e-grid .e-groupdroparea {
    display: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

/* Group-caption recolhível: chevron (toggle nativo) + rótulo + contagem + subtotais legíveis
   (sprint 040, Task-03). */
.grid-manutencao-de-lotes .e-grid .e-groupcaption,
.grid-manutencao-de-lotes .e-grid .e-indentcell,
.grid-manutencao-de-lotes .e-grid .e-recordplusexpand,
.grid-manutencao-de-lotes .e-grid .e-recordpluscollapse,
.grid-manutencao .e-grid .e-groupcaption,
.grid-manutencao .e-grid .e-indentcell,
.grid-manutencao .e-grid .e-recordplusexpand,
.grid-manutencao .e-grid .e-recordpluscollapse {
    background-color: #fff;
}

.grid-manutencao-de-lotes .e-grid .e-groupcaption,
.grid-manutencao .e-grid .e-groupcaption {
    font-weight: 600;
    color: var(--proplanti-text-dark, #2b2b2b);
}

/* Chevron do toggle nativo: cor de destaque e área de clique confortável. */
.grid-manutencao-de-lotes .e-grid .e-recordplusexpand .e-icon-gdownarrow,
.grid-manutencao-de-lotes .e-grid .e-recordpluscollapse .e-icon-grightarrow,
.grid-manutencao .e-grid .e-recordplusexpand .e-icon-gdownarrow,
.grid-manutencao .e-grid .e-recordpluscollapse .e-icon-grightarrow {
    color: var(--proplanti-primary);
}

/* Subtotais do GroupCaptionTemplate dentro do caption — legíveis e alinhados. */
.grid-manutencao-de-lotes .e-grid .e-groupcaption p,
.grid-manutencao-de-lotes .e-grid .e-summarycell,
.grid-manutencao .e-grid .e-groupcaption p,
.grid-manutencao .e-grid .e-summarycell {
    margin: 0;
    font-weight: 600;
    color: var(--proplanti-text-dark, #2b2b2b);
}

@media (max-width: 768px) {
    .toolbar-manutencao-de-lotes,
    .toolbar-manutencao {
        flex-wrap: wrap;
        gap: 6px;
        padding: 4px 0 6px;
    }

    .toolbar-manutencao-de-lotes-left,
    .toolbar-manutencao-left {
        flex: 1 1 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .toolbar-manutencao-de-lotes-right,
    .toolbar-manutencao-right {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .container-manutencao-de-lotes {
        height: 100%;
        overflow: visible;
    }
}

/* Faixa de chips de filtro rápido por situação acima do grid (sprint 040, Task-01).
   Layout/posicionamento da faixa na página (os átomos do chip ficam no scoped css do
   componente SituacaoChipsFiltro.razor.css). O toggle de exibição foi movido para a toolbar
   consolidada (Task-05); aqui resta só a faixa de chips, em largura total. */
.chips-situacao-manutencao-de-lotes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px 4px;
}

.chips-situacao-manutencao-de-lotes > .situacao-chips-filtro {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .chips-situacao-manutencao-de-lotes {
        padding: 6px 6px 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chips-situacao-manutencao-de-lotes > .situacao-chips-filtro {
        flex-wrap: nowrap;
    }
}

/* Strip de cards de KPI acima do grid (sprint 040, Task-02).
   Layout/posicionamento da strip na página (os átomos do card ficam no scoped css do
   componente KpisManutencaoLotes.razor.css). O toggle de exibição foi movido para a toolbar
   consolidada (Task-05); aqui resta só a strip, em largura total. */
.kpis-manutencao-de-lotes,
.kpis-manutencao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 8px;
    flex: 0 0 auto;
    position: relative;
    z-index: 0;
}

/* Toggle de esconder/mostrar indicadores: vive no início da linha de KPIs, centralizado
   verticalmente em relação aos cards e sem encolher. */
.kpis-manutencao-de-lotes .manutencao-lotes-toolbar-toggle.mp-button-small,
.kpis-manutencao .manutencao-lotes-toolbar-toggle.mp-button-small {
    flex: 0 0 auto;
    align-self: center;
}

.kpis-manutencao-de-lotes > .kpis-manutencao-lotes,
.kpis-manutencao > .kpis-manutencao-lotes {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .kpis-manutencao-de-lotes,
    .kpis-manutencao {
        padding: 0 0 6px;
    }

    .kpis-manutencao-de-lotes > .kpis-manutencao-lotes,
    .kpis-manutencao > .kpis-manutencao-lotes {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/*.e-acrdn-content .e-grid .e-table {*/
/*    width: 100% !important;*/
/*}*/

/*.e-table {*/
/*    width: 100% !important;*/
/*}*/

.e-virtualtable {
    width: 100% !important;
}

/* Grid de Apontamento de Atividades Histórico */
/*#GRIDID_APONTAMENTOATIVIDADE_HISTORICO th[aria-colindex="2"] {
    display: table-cell !important;
}
#GRIDID_APONTAMENTOATIVIDADE_HISTORICO td[aria-colindex="2"] {
    display: table-cell !important;
}*/

/**/

.e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid {
    height: var(--proplanti-disabled-input-text-height) !important;
}

/* O seletor de cor usa campos compactos de 30px; a regra global de inputs acima os expandia. */
.e-colorpicker-popup .e-selected-value .e-input-container .e-float-input input {
    height: 30px !important;
}

/*Menu*/

.sidebar-main-menu {
    text-align: left;
}

.sidebar-configuracao {
    height: 90vh;
    display: flex;
    flex-direction: column;
    /*padding: 0 30px;*/
}

.sidebar-configuracao-footer {
    position: sticky;
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    background-color: white;
    padding: 20px 0;
}

.sidebar-padding {
    padding: 44px;
}

@media (max-width: 768px) {
    .e-sidebar {
        padding: 0 0 !important;
        /*width: 101vw !important;*/
        width: auto !important;
        z-index: 100002 !important;
    }

;
}

.e-sidebar {
    display: flex;
    flex-direction: column;
    /*padding: 0 30px;*/
    background-color: white !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    /*z-index: 100002 !important;*/
}

.vertical-menu {
    z-index: 999;
    background-color: var(--proplanti-text-dark);
    width: var(--proplanti-menu-width);
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    border-right: 1px solid var(--proplanti-primary);
}

.vertical-menu-submenus-title {
    max-width: var(--proplanti-submenu-size);
}

.vertical-menu-submenus {
    max-width: var(--proplanti-submenu-size);
    max-height: 400px;
}

.vertical-menu-submenus-subtitle {
    min-height: 48px;
}

.vertical-menu-submenus-lines {
    min-height: 20px;
    margin: 6px 0;
    color: var(--proplanti-blue-spotlight);
}

.vertical-menu-submenus-lines-sem-permissao {
    min-height: 20px;
    margin: 6px 0;
    color: var(--proplanti-gary-spotlight);
}

.vertical-menu-submenus-lines:hover {
    text-shadow: #38c6ff 0.05em 0.05em 0.1em;
}

.img-cover-rounded {
    background-size: cover;
    object-fit: cover;
    /*border-radius: 50%;*/
    background-color: #243a44;
}

.avatar-small {
    height: 40px;
    width: 40px;
}

.avatar-big {
    height: 100px;
    width: 100px;
    /* Remova esse BackGround */
    background-color: var(--proplanti-text-dark);
}

.icons-buttons-vertical-menu {
    font-size: 19px;
    color: white;
}

.icons-options-main-menu {
    color: var(--proplanti-icons-gray);
    font-size: 18px;
    cursor: pointer;
}

.icons-submenu-user {
    color: var(--proplanti-blue-spotlight);
    font-size: 22px;
}

.buttons-vertical-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--proplanti-menu-width);
    height: 58px;
    cursor: pointer;
}

.buttons-vertical-menu:hover {
    background-color: #182428;
    border-right: 4px solid var(--proplanti-primary);
}

div.buttons-vertical-menu-active > div.icons-buttons-vertical-menu > i {
    color: var(--proplanti-primary) !important;
}

div > nav > .buttons-vertical-menu-active {
    background-color: #182428;
    border-right: 4px solid var(--proplanti-primary);
}

.buttons-submenu-user {
    min-height: 30px;
    padding: 10px;
    /*margin-top: 8px;*/
    /*margin-bottom: 8px;*/
    flex-basis: 45%; /* Adjust as needed */
    margin-bottom: 1em; /* Optional: adds space between rows */
}

.hr-color {
    color: rgb(162, 157, 157);
}


.hr-menu {
    border: none;
    border-top-width: medium;
    border-top-style: none;
    border-top-color: currentcolor;
    border-top: 1px solid black;
    height: 1px;
}

/* Spinner — o wrapper ProplantiSpinner foi aposentado (sprint 165); as classes de posicionamento que
   só ele vestia saíram junto. O que fica vale para o SfSpinner cru que ainda existe no produto
   (ProplantiAudioRecorder) e para os painéis de spinner da própria Syncfusion. */

.proplanti-spinner-color {
    color: var(--proplanti-primary)
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {
    stroke: var(--proplanti-primary)
}

.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: var(--proplanti-text-dark)
}

/**/

.proplanti-main-color {
    color: var(--proplanti-primary);
}

html, body {
    font-family: Inter, Helvetica, Arial, sans-serif !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.padding-left-44 {
    padding-left: 44px;
}

.padding-right-44 {
    padding-right: 44px;
}

.margin-eixo-y-28 {
    margin-top: 28px;
    margin-bottom: 28px;
}

.padding-bottom-44 {
    padding-bottom: 44px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}


.margin-bottom-60 {
    margin-bottom: 60px;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75) !important; /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    text-align: center;
}

.error-content {
    font-size: 1.2em;
    width: 600px;
    padding: 25px;
    border-radius: 10px;
    color: black;
    background-color: white;
    border-color: white;
    border-width: 3px;
    border-style: solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999 !important;
}

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

/*#blazor-error-ui .dismiss {*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    right: 0.75rem;*/
/*    top: 0.5rem;*/
/*}*/

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Remoção de Bootstrap style */

.e-dlg-container .e-dialog .e-dlg-header {
    width: unset;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    margin-top: 10px;
}

/*.e-dlg-container .e-dialog {*/
/*    width: 500px !important;*/
/*    height: 206px !important;*/
/*}*/

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    display: none !important;
}

.e-dialog.mp-release-notes-dialog .e-dlg-header-content {
    flex-grow: unset !important;
}

.e-dialog.mp-release-notes-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    display: unset !important;
    flex-grow: unset !important;
}

.e-dlg-container .e-dialog .e-dlg-header-content {
    border-bottom: unset;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-grow: 1;
    align-items: center;
}

.e-dlg-container .e-dialog .e-dlg-content {
    padding: 12px;
    display: flex;
    justify-content: center;
}

.e-dlg-container .e-dialog .e-footer-content {
    border-top: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

/* Modal de pergunta (MessageStore dos MainLayouts + ProplantiDialog sem ContentTemplate).
   A mensagem é o único conteúdo: fica centrada nos dois eixos — assim o texto não boia colado no
   topo quando o dialog tem Height fixo — com respiro lateral para quebrar em 2 linhas sem encostar
   na borda. Escopado pela classe mp-message-dialog: dialogs com conteúdo próprio (grid, formulário,
   release notes) não podem herdar centralização nem text-align. */
.e-dlg-container .e-dialog.mp-message-dialog .e-dlg-header-content {
    flex-grow: 0;
    padding-bottom: 0;
}

.e-dlg-container .e-dialog.mp-message-dialog .e-dlg-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 24px 12px;
}

.e-dlg-container .e-dialog.mp-message-dialog .e-footer-content {
    padding-top: 4px;
}

.form-select:focus {
    box-shadow: unset !important;
}

.e-pager .e-numericitem {
    color: unset !important;
}

.e-pager div.e-icons.e-pager-default {
    color: unset !important;
}

.e-pager .e-spacing {
    color: unset !important;
}

.e-pager .e-currentitem.e-numericitem.e-focused {
    box-shadow: unset !important;
}

.e-grid .e-focused:not(.e-menu-item) {
    box-shadow: unset !important;
}

.e-pager .e-focused {
    box-shadow: unset !important;
}

.e-input-group:not(.e-disabled) .e-input-group-icon:active, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
    background: var(--proplanti-primary-active) !important;
    color: white !important;
}

.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: var(--proplanti-primary-hover) !important;
    color: white !important;
}

.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #86b7fe;
    box-shadow: unset !important;
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
    color: var(--proplanti-text-dark) !important;
}

.e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus {
    box-shadow: unset !important;
}

@media (min-width: 768px) {
    .e-input-focus {
        border: 2px solid var(--proplanti-blue-spotlight) !important;
        box-shadow: unset !important;
    }
}

.e-sidebar.e-left {
    left: var(--proplanti-menu-width) !important;
}

/* Sprint 053 — redesign do menu: os drawers que abrem pela esquerda (Conta/UsuarioSideBar,
   Configurações, Notificações, Tarefas, Ajuda) ficam encostados à DIREITA da nova sidebar
   colapsável (248px expandida / 78px contraída), e não mais nos 80px da régua antiga.
   Como a sidebar e os drawers compartilham o <body>, casamos pelo estado do .mp-sidebar via :has()
   (sem mudar o Blazor): a largura acompanha o colapso automaticamente. A transição em `left`
   acompanha a animação de largura da sidebar. No mobile a nova sidebar não é renderizada, então
   nenhuma destas regras casa e o comportamento antigo (régua/auto) é preservado. */
body:has(.mp-sidebar) .e-sidebar.e-left {
    transition: left .24s cubic-bezier(.4, 0, .2, 1) !important;
}

body:has(.mp-sidebar:not(.mp-collapsed)) .e-sidebar.e-left {
    left: var(--mp-sidebar-width-expanded) !important;
}

body:has(.mp-sidebar.mp-collapsed) .e-sidebar.e-left {
    left: var(--mp-sidebar-width-collapsed) !important;
}

@media (max-width: 768px) {
    .e-sidebar.e-left {
        left: auto !important;
        transition: transform .5s ease !important;
    }

;
}

/*.e-grid {*/
/*    border: unset !important;*/
/*    padding: unset !important;*/
/*}*/

/*.e-grid .e-toolbar {*/
/*    border: unset !important;*/
/*}*/

.e-grid .e-rowcell {
    /*    border: unset !important;*/
    text-transform: uppercase;
}

/* ── Densidade global das linhas do datagrid (preferência por usuário: UserSettingsGeral.DensidadeGrid) ──
   A altura da linha (SfGrid RowHeight) e a var --proplanti-grid-row-height são resolvidas no C#
   (GridDensityResolver): Confortável 52 / Normal 40 / Compacto 30. A classe fica no container do
   ProplantiGrid. Aqui apertamos o padding das células e a altura dos inputs de edição inline para
   que a densidade seja real também nos grids editáveis (ex.: Ordem de produção — Produtos), onde a
   altura do input (--proplanti-input-text-height, 40px padrão) dominaria a linha. O modo Normal não
   recebe override (o padding-base de 11px já dá a altura padrão).

   O SfGrid aplica o RowHeight no `<tr style="height">`, mas a altura VISÍVEL da linha é
   `altura_tr + 2×padding-vertical` da célula. Existe um padding-base de 11px que fixa a altura de
   TODA célula (commit 0591a8e89f, "respiro vertical" dos lotes) — somado ao Compacto dá 30+22=52px,
   exatamente a altura do Confortável, fazendo o Compacto parecer que "não aplica". Por isso as
   regras por densidade precisam vencer aquele `!important`: usamos o seletor COMPOSTO
   `.proplanti-grid-density--X.proplanti-grid` (a classe de densidade fica no mesmo `<div>` que
   `.proplanti-grid`), de especificidade maior, também com `!important`.

   ATENÇÃO — o padding-base MUDOU DE ARQUIVO: hoje é `.proplanti-grid ::deep .e-rowcell`, no CSS
   isolado `Datagrid/ProplantiGrid.razor.css`. Ele compila para `.proplanti-grid[b-x] .e-rowcell`,
   que é (0,3,0) — a MESMA especificidade que tinha aqui como `.proplanti-grid .e-grid .e-rowcell` —
   e as regras abaixo seguem em (0,4,0), continuando a vencer. Esse empate é frágil nos dois
   sentidos: o bundle `*.styles.css` carrega DEPOIS deste arquivo, então se alguém acrescentar um
   `.e-grid` ao seletor de lá (subindo-o a (0,4,0)) ou remover uma classe daqui, a densidade para de
   apertar a linha sem nenhum aviso do build. Ver o bloco de especificidade no topo daquele arquivo. */

/* Compacto — linhas baixas: input e padding vertical reduzidos (30 + 2×2 ≈ 34px).
   Encolhe também o input DESABILITADO (--proplanti-disabled-input-text-height, 38px padrão): nos
   grids de relação com edição inline, as linhas já salvas mostram os campos desabilitados, e um
   input de 38px infla a linha acima dos 30px do RowHeight compacto. Habilitado já usa os 28px. */
.proplanti-grid-density--compacto {
    --proplanti-input-text-height: 28px;
    --proplanti-disabled-input-text-height: 28px;
}

.proplanti-grid-density--compacto.proplanti-grid .e-grid .e-rowcell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Confortável — mais respiro vertical que o padrão (52 + 2×12 ≈ 76px). */
.proplanti-grid-density--confortavel.proplanti-grid .e-grid .e-rowcell {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ── Densidade global da INTERFACE (sprint 099) ──
   A mesma preferência (UserSettingsGeral.DensidadeGrid) vale para o sistema inteiro: o
   ProplantiMainLayoutBase aplica proplanti-density--{confortavel|normal|compacto} no <body>
   (setBodyDensityClass em scripts.js) e aqui ela vira ritmo vertical entre CAMPOS de formulário.
   O gap entre campos vem do OuterCssClass padrão dos inputs (pb-3 = padding-bottom:1rem!important
   do bootstrap; radios usam pt-3) — o override precisa de !important + a especificidade extra do
   prefixo no body para vencer. O padding lateral (30px) do .proplanti-section-nav__content não
   muda; só o vertical (26px padrão). Normal: sem override (padrões atuais). Dentro dos grids
   continuam valendo as regras proplanti-grid-density--* acima. */

/* Compacto — aperta o ritmo vertical entre campos (16px → 8px; seções 26px → 14px). */
.proplanti-density--compacto .pb-3 {
    padding-bottom: .5rem !important;
}

.proplanti-density--compacto .pt-3 {
    padding-top: .5rem !important;
}

.proplanti-density--compacto .proplanti-section-nav__content {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* O gap DOMINANTE entre campos não é o pb-3: é o margin-top: 24px que o tema Syncfusion
   (bootstrap5.css: `.e-float-input, .e-float-input.e-control-wrapper`) põe em todo input com
   floating label — e é o ÚNICO gap dos dropdowns/autocompletes, cujo OuterCssClass padrão é vazio
   (sem pb-3). Medido ao vivo (sidebar de Atividade): o label flutuado ocupa exatamente 16px acima
   do wrapper (altura 17px, top -16px), então 16px é o mínimo sem sobreposição — o campo de cima
   ainda ganha o respiro do próprio pb-3. Empate de especificidade (0,2,0) com a regra do tema é
   resolvido pela ordem de carga (app.css vem depois do bootstrap5.css). */
.proplanti-density--compacto .e-float-input,
.proplanti-density--compacto .e-float-input.e-control-wrapper {
    margin-top: 16px;
}

/* Sidebars de cadastro com accordions (proplanti-section-accordion) têm padding vertical próprio
   de 20px no corpo — acompanha a densidade como o .proplanti-section-nav__content acima. */
.proplanti-density--compacto .proplanti-section-accordion__body {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Inputs (texto/autocomplete/dropdown/data): as alturas fluem das vars --proplanti-input-text-height
   (40px — usada com !important no wrapper .proplanti-input-* e no botão Novo/Editar dos
   autocompletes, .proplanti-autocomplete-action) e --proplanti-disabled-input-text-height (38px —
   o input interno, via regra global .e-input-group input ... !important). Sem redefinir as vars, o
   autocomplete ficava 40px ao lado dos botões de 32px (o !important do .proplanti-autocomplete-action
   inclusive vence o override de .mp-button abaixo). 32px alinha com os botões do compacto; 30px
   (= 32 − 2px de borda) mantém o wrapper em 32px exatos. Dentro dos grids a re-declaração em
   .proplanti-grid-density--* (28px) segue vencendo por escopo mais próximo. Medido ao vivo no
   drawer de OC em lote (Selecione um produto + Editar + Fornecedores possíveis). */
body.proplanti-density--compacto {
    --proplanti-input-text-height: 32px;
    --proplanti-disabled-input-text-height: 30px;
}

/* Compacto — alturas de botões e headers/footers (pedido do usuário; valores validados ao vivo).
   Os alvos em CSS ISOLADO (.razor.css: sideBarHeader/sideBarFooter em ProplantiHeader/
   FooterFormSideBar, proplanti-header-top em HeaderMenu) compilam com o atributo de escopo
   [b-xxx] — especificidade (0,2,0) — e o bundle *.styles.css carrega DEPOIS do app.css, vencendo
   empates. Por isso estes overrides usam o prefixo `body.` ((0,2,1) vence por especificidade).
   Header/footer de sidebar: só o padding VERTICAL (longhand) — o drawer de Filtros tem padding
   horizontal próprio via shorthand (`.proplanti-sidebar-filtros .sideBarFooter`) que deve
   permanecer. Normal/Confortável mantêm os padrões (40/80/18/16). */
body.proplanti-density--compacto .mp-button {
    height: 32px; /* 40px padrão (app.css .mp-button) */
}

body.proplanti-density--compacto .mp-square-button-toolbar {
    height: 32px;
    width: 32px;
    min-width: 32px; /* 40px padrão */
}

/* Sprint 127 — padrão híbrido: no compacto, a principal e o ícone secundário (variante 40px das
   toolbars) acompanham os 32px dos demais controles. A variante 34px dos headers de sidebar não
   encolhe (mantém 34px também no compacto). */
body.proplanti-density--compacto .toolbar-action-principal.mp-square-button {
    height: 32px;
}

body.proplanti-density--compacto .toolbar-action-icon.mp-square-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
}

/* Header das páginas: a faixa do título usa min-height = --proplanti-menu-width (80px) — a var
   também dimensiona o menu lateral, então NÃO é sobrescrita; o min-height é reduzido direto. */
body.proplanti-density--compacto .proplanti-header-top {
    min-height: 56px;
}

body.proplanti-density--compacto .proplanti-header {
    min-height: calc(28px + 56px);
}

/* Header (padding 18px) e footer (padding 16px) dos drawers de formulário. */
body.proplanti-density--compacto .sideBarHeader {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.proplanti-density--compacto .sideBarFooter {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Botões "Mais" das toolbars de manutenção (lotes, ordens comerciais, etc.): são SfDropDownButton
   (.e-dropdown-btn), NÃO .mp-button, então os overrides de botão acima não os alcançam — ficavam
   42px enquanto os irmãos (Novo/Editar/Apontar) encolhiam para 32px no compacto. `.e-dropdown-btn`
   é o denominador comum de todos eles (independe da classe própria de cada página). Alinha ao mesmo
   32px (efetivo ~34px com a borda do .e-btn). !important para vencer a altura do tema Syncfusion;
   medido ao vivo em /producao/manutencaolotes e /ordem. */
body.proplanti-density--compacto .e-dropdown-btn {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 1 !important;
}

/* Telas de regime flex (Lotes e Tabela de Preço editável): esses grids NÃO usam o caminho medido
   (FitHeightScreen + 5px), e sim um container de altura FIXA `height: calc(100vh - 140px)` — onde
   140 = ~135px do chrome acima (título + botões do header) + 5px de respiro. Como o compacto
   encolhe o header (80→56) e os botões (40→32), esse chrome fica 29px menor (medido ao vivo em
   /producao/manutencaolotes: sem o ajuste a folga ia a 34px). Subtraímos 29px a menos (140→111)
   para o rodapé voltar aos 5px. O Confortável faz o oposto logo abaixo. */
body.proplanti-density--compacto .container-manutencao-de-lotes,
body.proplanti-density--compacto .container-manutencao-de-tabela-preco {
    height: calc(100vh - 111px);
}

/* Confortável — mais respiro entre campos (16px → 24px; seções 26px → 34px). */
.proplanti-density--confortavel .pb-3 {
    padding-bottom: 1.5rem !important;
}

.proplanti-density--confortavel .pt-3 {
    padding-top: 1.5rem !important;
}

.proplanti-density--confortavel .proplanti-section-nav__content {
    padding-top: 34px;
    padding-bottom: 34px;
}

.proplanti-density--confortavel .proplanti-section-accordion__body {
    padding-top: 26px;
    padding-bottom: 26px;
}

/* Regime flex (Lotes e Tabela de Preço editável), lado Confortável: o `.pb-3` maior (16→24px) vaza
   para a barra de botões do header (que usa `.pb-3`), então o chrome acima do container flex CRESCE
   ~12px (medido ao vivo: topo 134→146). Como o container base é `calc(100vh - 140px)`, ele passa a
   transbordar a viewport (folga negativa, paginador cortado). Subtraímos 12px a mais (140→152) para
   o rodapé voltar ao mesmo respiro do Normal. Espelha o override do compacto acima. */
body.proplanti-density--confortavel .container-manutencao-de-lotes,
body.proplanti-density--confortavel .container-manutencao-de-tabela-preco {
    height: calc(100vh - 152px);
}

.proplanti-sidebar-selecionar-colunas {
    z-index: 1001 !important;
    width: 60vh !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
    overflow: hidden !important;
}

.proplanti-sidebar-selecionar-colunas-grid {
    z-index: 1001 !important;
    width: min(912px, 100%) !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
    overflow: hidden !important;
}

.proplanti-sidebar-filtros {
    z-index: 1001 !important;
    /*width: 40% !important;*/
    height: 100% !important;
    /* Ancorado à direita da viewport (como os demais .proplanti-sidebar). O drawer NÃO usa mais o
       Target do SfSidebar — o Target fazia o Syncfusion anexá-lo ao .main-content (que vive no
       MainLayout e sobrevive à navegação), deixando o drawer órfão "preso" na próxima tela. Sem
       Target, o drawer é filho da página e o Blazor o destrói ao navegar; o position:fixed mantém
       a posição na borda direita e o espaço do grid é reservado por padding-right no .main-content
       (ver syncSidebarPushTarget). */
    top: 0 !important;
    right: 0 !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    /*display: unset !important;*/
    overflow: hidden !important;
    border: 1px solid #BFD5DF !important;
}

.proplanti-sidebar-filtrar-colunas {
    /*z-index: 1001 !important;*/
    /*width: 40% !important;*/
    height: 100% !important;
    /*position: fixed !important;*/
    overscroll-behavior: contain !important;
    /*display: unset !important;*/
    overflow: hidden !important;
    border: 1px solid #BFD5DF !important;
}

.proplanti-sidebar {
    z-index: 1001 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
    overflow: hidden !important;
}

.proplanti-relation-sidebar {
    z-index: 1001 !important;
    height: 100% !important;
    width: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

/* Histórico de apontamentos do lote (LotesProducaoPage). Toda CssClass proplanti-* escapa do
   re-fix genérico logo abaixo (:not([class*="proplanti-"])) e precisa da própria regra de
   position — sem ela o drawer fica no e-sidebar-absolute do ProplantiFormSideBar e ancora no
   .container-page (position:relative pelo proplanti-page-busy-host), com vão à direita/embaixo.
   z-index 1000: abaixo do proplanti-relation-sidebar (1001), que abre aninhado por cima. */
.proplanti-apontamentodeatividade-historico-sidebar {
    z-index: 1000 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
    overflow: hidden !important;
}

/* Drawer de edição/cadastro (ProplantiFormSideBar) com ShowBackdrop=true.
   Diferente dos drawers de relação/autocomplete (que já carregam uma classe
   proplanti-*-sidebar com z-index e position:fixed), o drawer principal só tem
   "default-sidebar e-sidebar-absolute". O e-sidebar-absolute o deixa em
   position:absolute, e sem z-index próprio o .e-sidebar-overlay (backdrop)
   empata e pinta POR CIMA do formulário — a tela toda parecia bloqueada.
   Aqui replicamos o mesmo tratamento das demais sidebars: o drawer flutua
   ACIMA do seu próprio backdrop. O :not([class*="proplanti-"]) garante que NÃO
   rebaixamos os drawers de relação/autocomplete (1001/1004), que devem ficar
   sobre o de edição quando abertos juntos. */
.e-sidebar.default-sidebar.e-sidebar-absolute.e-open:not([class*="proplanti-"]) {
    z-index: 1000 !important;
    position: fixed !important;
}

/* Backdrop sempre ABAIXO de qualquer drawer (padrão Syncfusion: sidebar 1000 /
   overlay 999). Mantém o escurecimento do fundo sem cobrir a sidebar aberta. */
.e-sidebar-overlay {
    z-index: 999 !important;
}

/* Armadilha de contexto de empilhamento: o Syncfusion põe a classe
   e-content-animation + um transform (identidade) no .container-page para animar
   o deslocamento do conteúdo. Qualquer transform != none torna o .container-page
   o containing block dos position:fixed descendentes E cria um stacking context,
   prendendo o drawer (fixed, z-index 1000) DENTRO dele — enquanto o
   .e-sidebar-overlay é filho do <body> (contexto raiz, z-index 999). Resultado:
   o overlay cobre TODO o .container-page (grid + drawer), não só o fundo.
   Enquanto um drawer Over (modal de edição/cadastro) estiver aberto, removemos o
   transform: o drawer position:fixed escapa para o contexto raiz e o z-index 1000
   passa a vencer o overlay 999. O transform é identidade (Type=Over não desloca o
   conteúdo), então não há salto visual nem perda de animação. */
.container-page:has(> .e-sidebar.e-over.e-open),
.container-page:has(.e-sidebar.e-over.e-open) {
    transform: none !important;
}

/* Sprint 064 — visualizador de relatórios em tela cheia nas telas de manutenção (paridade com a
   manutenção de Relatórios, Variação C). Quando uma página de manutenção está exibindo um relatório
   (IsViewingReport), o container vira uma coluna flex de altura fixa: a action bar (flex-shrink:0)
   fica fixa no topo e o SfTab com o viewer ocupa o restante. overflow:hidden impede que a página
   role — quem rola é só o painel do relatório dentro do StiBlazorViewer (ScrollbarsMode). Regras
   globais (não scoped) para servir todas as páginas que adicionam a classe. */
.container-page-relatorio-viewer {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container-page-relatorio-viewer .drag-drop-tab {
    flex: 1 1 auto;
    min-height: 0;
}

.proplanti-help-sidebar {
    z-index: 1001 !important;
    height: 100% !important;
    width: 60% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-autocomplete-sidebar {
    z-index: 1004 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-logs-sidebar {
    z-index: 1003 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-logs-item-sidebar {
    z-index: 1004 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

/* Sidebar de comparação (diff) aberta pelo "Ver comparação completa" da linha do tempo.
   Sem esta regra a classe não tinha z-index e a diff abria ATRÁS da timeline (1001/1003),
   dando a impressão de que o botão "não fazia nada". Fica acima da timeline e do item (1004),
   no mesmo nível do diff aberto pela sidebar de item (proplanti-logs-item-detail-sidebar 1005). */
.proplanti-logs-diff-sidebar {
    z-index: 1005 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-logs-item-detail-sidebar {
    z-index: 1005 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

/* Sprint 065 Task-08 — exibição legível do conteúdo JSON do log de auditoria (atividade
   cancelada por lote, sprint-117). O conteúdo já vem indentado de ProplantiLogContentDisplayHelper;
   aqui só damos fonte monoespaçada e uma altura com rolagem para payloads grandes. */
.proplanti-log-json textarea,
.proplanti-log-json .e-multi-line-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
    white-space: pre !important;
    max-height: 360px !important;
    overflow: auto !important;
    line-height: 1.4 !important;
}

.proplanti-logs-item-detail-relation-sidebar {
    z-index: 1006 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-logs-item-detail-relation-level-2-sidebar {
    z-index: 1007 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-notificacoes-item-sidebar {
    z-index: 1004 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-jobqueue-item-sidebar {
    z-index: 1004 !important;
    width: 60% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-jobqueue-item-detail-sidebar {
    z-index: 1005 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    display: unset !important;
}

.proplanti-sidebar-shown {
    overflow: unset !important;
    display: block !important;
}

.proplanti-sidebar-hidden {
    overflow: hidden !important;
    display: none !important;
}

.proplanti-logs-sidebar-wrapper {
    height: 100vh !important;
    position: relative;
}

.proplanti-sidebar-div-warpper {
    overflow-x: hidden !important;
}

/* Sprint 165 (Task-06) — ancoragem do ProplantiLoadingOverlay nas sidebars legadas que hospedam um
   SfSidebar próprio e não passam pelo ProplantiFormSideBar (Configurações, parâmetros de relatório,
   Printer App, reserva de lote, seleção manual, gerar programação, contrato de OP).
   Vive aqui, e não em sete .razor.css scoped, porque a regra é a MESMA para os sete componentes:
   CSS scoped não é compartilhável, e sete cópias idênticas é justamente o que apodrece. É a mesma
   família da qual .proplanti-sidebar-div-warpper e .sidebar-main-menu já fazem parte.
   A única propriedade é o position: o scrim do overlay é position:absolute/inset:0 e, sem ancestral
   posicionado, escaparia para o primeiro ancestral posicionado da página. */
.proplanti-sidebar-busy-host {
    position: relative;
}

/* Bloqueio da interação enquanto a operação roda. Acompanha o estado de busy da tela, NÃO a pintura
   do scrim: durante os 250ms da janela anti-flash o scrim ainda não existe e o formulário aceitaria
   um segundo submit. O próprio scrim declara pointer-events: auto, então volta a receber (e barrar)
   o clique assim que pinta. */
.proplanti-sidebar-busy-host--blocked {
    pointer-events: none;
}

/* Sprint 165 (Task-11) — mesmo papel do par acima, agora para o corpo de uma PÁGINA (o
   div.container-page das telas de Produção e equivalentes). Nome próprio, e não a classe de sidebar:
   o host aqui não é o wrapper de um drawer, e reusar aquele nome deixaria uma mentira no DOM.
   Vive no app.css pela mesma razão do par de sidebar — a regra é idêntica em páginas de pastas
   diferentes, e CSS scoped não é compartilhável.

   MUDANÇA DE COMPORTAMENTO REGISTRADA: o spinner legado usava o e-spin-overlay do Syncfusion, que
   cobre a VIEWPORT inteira (daí o padding-left de 80px que o CSS legado dava ao pane, para não
   centralizar o disco por baixo do menu lateral). O scrim do overlay é inset:0 DENTRO deste host, ou
   seja, cobre só o corpo da página: o menu lateral continua clicável durante a operação. */
.proplanti-page-busy-host {
    position: relative;
}

/* Bloqueio da interação enquanto a operação roda. Acompanha o busy da tela, NÃO a pintura do scrim:
   durante os 250ms da janela anti-flash o scrim ainda não existe e a página aceitaria um segundo
   clique na ação em andamento. */
.proplanti-page-busy-host--blocked {
    pointer-events: none;
}

/*@media (min-width: 768px) {*/

/*    .proplanti-sidebar-div-warpper {*/
/*        overflow-y: scroll !important;*/
/*        overflow-x: hidden !important;*/
/*    }*/
/*}*/

.proplanti-sidebar-wrapper {
}

.proplanti-maps-div {
    z-index: 0 !important;
}

/* Linha marcada para exclusão (IDeletedItem.Deleted). Tratamento "será excluída":
   faixa lateral vermelha + tinte claro + texto tachado + selo. A <tr> é position:relative
   para ancorar o selo (::after) ao canto direito da linha. O tratamento completo, com
   prioridade sobre a zebra/hover, está nas regras .proplanti-grid ... .grid-row-deleted
   junto às regras de zebra (mais abaixo). Este fallback vale para grids fora de .proplanti-grid. */
.grid-row-deleted {
    position: relative;
    background-color: #FCEBEB;
}

/**/

.proplanti-grid-settings-button {
    position: absolute;
    z-index: 1 !important;
    right: 0;
    width: 90px;
}

.proplanti-filtros-icon {
    position: absolute;
    right: 0px !important;
    margin-top: 6px !important;
    padding-right: 5px;
    padding-top: 5px;
}

.proplanti-accordion-content-grid {
    padding: 0 !important;
}

.error-boundary-message {
    background-color: darkred;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
}

.proplanti-progress-bar {
    position: absolute;
    z-index: 999;
    width: 100%
}


.proplanti-input-text-full-width {
}

.proplanti-field-row {
    max-width: var(--proplanti-input-text-width)
}


.mp-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 40px;
    min-width: 77px;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(32, 47, 47, 0.12);
    border: unset;
    box-sizing: unset;
    margin-left: 5px;
    margin-right: 5px;
}

.mp-rounded-button {
    display: flex;
    align-items: center;
    height: 32px;
    width: 32px;
    border-radius: 16px;
    box-shadow: 0px 4px 8px rgba(32, 47, 47, 0.12);
    border: unset;
    box-sizing: unset;
}

.mp-rounded-button-small {
    display: flex;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    box-shadow: 0px 2px 4px rgba(32, 47, 47, 0.12);
    border: unset;
    box-sizing: unset;
}

/* Sprint 041 — botão de ícone pequeno, quadrado e com cantos arredondados (flag IsSquareIcon).
   Fiel ao mockup das ações do header da sidebar (duplicar/arquivar/…): 34x34, borda suave,
   radius 6px, fundo branco e hover claro. */
.mp-square-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--proplanti-border-box, #BFD5DF);
    background: #fff;
    color: #516470;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}

.mp-square-button-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--proplanti-border-box, #BFD5DF);
    background: #fff;
    color: #516470;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}

.mp-square-button:hover,
.mp-square-button-small:hover {
    background: #F3F7F7;
    border-color: #a9c2cf;
}

/* Centraliza o ícone perfeitamente: o markup envolve o <i> num <div>; sem isso a métrica
   do glyph (line-height/baseline) desloca o ícone para o canto. */
.mp-square-button > div,
.mp-square-button-small > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.mp-square-button i,
.mp-square-button-small i {
    line-height: 1;
    margin: 0;
}

/* O glyph dos boxicons tem advance de ~0.78em, mas com `d-flex` o <i> vira flex e ancora o
   glyph no flex-start, deixando a folga do advance à direita e deslocando o ícone ~2-3px para
   a esquerda dentro do botão. Faz o <i> preencher a zona e centralizar o glyph de fato (o <div>
   acima já centraliza a CAIXA do <i>; isto centraliza o GLYPH dentro dela). */
.mp-square-button > div > i,
.mp-square-button-small > div > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================================================================
   Sprint 127 — Toolbar: padrão híbrido de botões (opção 1f do design handoff).
   Elimina o layout shift do antigo expand-on-hover: a ação principal
   (Filtros) fica SEMPRE rotulada e de largura FIXA; as secundárias ficam só-ícone (largura fixa)
   com o rótulo num tooltip CSS (.mp-tooltip). Cantos retos (border-radius: 0) e cores via tokens
   --proplanti-* (os hex/radius do handoff são só fallback).
   Aplicado nos markups das Tasks 01–05 (CssClass + estrutura).
   ============================================================================================ */

/* Ação principal (Filtros): ícone + rótulo sempre visível, largura fluida do conteúdo mas
   constante em todos os estados (não cresce no hover). Aplicada sobre um ProplantiButton
   IsSquareIcon com um <span class="toolbar-action-label">. Só a borda muda no hover.
   Cantos 6px = mesma borda dos botões padrão do sistema (.mp-button/.mp-button-small do header:
   "Novo planejamento", "Apontar atividade", "Mais"), com que estes convivem na mesma tela. */
.toolbar-action-principal.mp-square-button {
    width: auto;
    min-width: 0;
    height: var(--proplanti-input-text-height, 40px);
    padding: 0 12px;
    gap: 6px;
    border-radius: 6px;
    border: 1px solid var(--proplanti-border-box, #C9D6DE);
    background: var(--proplanti-secondary, #fff);
    color: var(--proplanti-text-dark, #22333B);
    /* Largura constante — só a cor da borda transiciona (anti layout shift). */
    transition: border-color .15s ease;
}

.toolbar-action-principal.mp-square-button:hover {
    background: var(--proplanti-secondary, #fff);
    border-color: var(--proplanti-border-box-hover, #9FB4BF);
}

/* A zona do ícone não pode esticar para 100% (herdaria de .mp-square-button > div) — senão
   empurra o rótulo para fora. Fica no tamanho natural do glyph. */
.toolbar-action-principal.mp-square-button > div {
    width: auto;
    flex: 0 0 auto;
    height: 100%;
}

/* Rótulo SEMPRE visível — sem max-width/opacity animados (essa é a diferença central em relação
   ao antigo padrão expand-on-hover, que expandia o rótulo no hover e deslocava os vizinhos). */
.toolbar-action-principal .toolbar-action-label {
    display: inline-block;
    white-space: nowrap;
    font-family: Inter, serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    color: inherit;
}

/* Divisor vertical entre a principal e as secundárias. */
.toolbar-action-divider {
    width: 1px;
    height: 20px;
    background: var(--proplanti-border-box, #DAE4E9);
    margin: 0 2px;
    flex: 0 0 auto;
}

/* Ação secundária (Expandir/Histórico/Colunas/Ajuda): SÓ ícone, tamanho FIXO 40x40 (paridade com
   a faixa de 40px das toolbars). Estado normal transparente/sem borda; no hover muda só o fundo —
   a largura nunca muda. O rótulo aparece pelo .mp-tooltip. Cantos 6px como os botões padrão do
   sistema (.mp-button/.mp-button-small): o fundo do hover arredonda igual aos vizinhos. */
.toolbar-action-icon.mp-square-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: background-color .15s ease;
}

.toolbar-action-icon.mp-square-button:hover {
    background: var(--proplanti-secondary-hover, #E6EDF1);
    border-color: transparent;
}

/* Variante 34x34 para os headers de sidebar (contexto sem ação principal — todas viram ícone). */
.toolbar-action-icon-34.mp-square-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: background-color .15s ease;
}

.toolbar-action-icon-34.mp-square-button:hover {
    background: var(--proplanti-secondary-hover, #E6EDF1);
    border-color: transparent;
}

/* Tooltip CSS-only (o design system não tem componente de tooltip): o rótulo vem do atributo
   data-tooltip (emitido pelo ProplantiButton quando UseStyledTooltip). Aparece no :hover E no
   :focus-visible (navegação por teclado), com fade + translateY(4px→0). O botão precisa de
   position:relative para ancorar o ::after e z-index alto para vencer os vizinhos.
   ATENÇÃO: um ancestral com overflow:hidden recorta o tooltip — usar em toolbars sem overflow
   (ex.: lado direito da faixa / headers de sidebar). ATENÇÃO 2: o z-index abaixo só vale DENTRO do
   stacking context do ancestral mais próximo com position+z-index; se um irmão desse ancestral
   pintar por cima (mesmo z-index e depois no DOM), o tooltip some atrás dele — é o próprio
   ancestral que precisa subir, não este z-index. Canto reto (ignora o radius 6px do handoff). */
.mp-tooltip {
    position: relative;
}

.mp-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translate(-50%, 4px);
    background: var(--proplanti-text-dark, #22333B);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 0;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 20;
    transition: opacity .15s ease, transform .15s ease;
}

.mp-tooltip:hover::after,
.mp-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Sprint 127 Task-05 — modificadora para os headers de sidebar. A sidebar é ancorada à borda
   DIREITA do viewport, então um tooltip centralizado (.mp-tooltip, left:50%) no botão mais à direita
   estouraria para fora da tela (e seria recortado por qualquer container de largura limitada). A
   modificadora ancora o tooltip pela borda DIREITA do botão e o faz crescer para a ESQUERDA (para
   dentro), mantendo-o sempre visível. Aplicada em conjunto com .mp-tooltip nos botões ícone+tooltip
   dos headers de sidebar (variante 34px). */
.mp-tooltip--end::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}

.mp-tooltip--end:hover::after,
.mp-tooltip--end:focus-visible::after {
    transform: translate(0, 0);
}

/* Modificadora para rótulo de comprimento ILIMITADO (ex.: a lista de filtros informados, que
   concatena um nome por filtro ativo). O .mp-tooltip base é nowrap — certo para rótulo curto e
   fixo ("Logs", "Ajuda"), mas com uma lista a caixa cresceria indefinidamente e escaparia da
   gaveta mesmo ancorada pela direita. Aqui a largura é limitada e o texto quebra em várias
   linhas. Usar SEMPRE junto de .mp-tooltip (e de .mp-tooltip--end nos headers de sidebar). */
.mp-tooltip--wrap::after {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 280px;
    width: max-content;
    text-align: left;
}

/* Ícone-indicador: só comunica estado, não é ação. Sem a caixa do botão — nem no hover — e sem
   cursor de clique, para não prometer uma interação que não existe; sobra só o ícone e o seu
   tooltip. Especificidade acima da do hover de .toolbar-action-icon-34 (que pinta o fundo),
   então independe da ordem no arquivo. */
.toolbar-action-icon-34.mp-square-button.mp-icon-indicador,
.toolbar-action-icon-34.mp-square-button.mp-icon-indicador:hover {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.mp-primary {
    background: var(--proplanti-primary) !important;
    color: white;
}

.mp-warning {
    background: var(--proplanti-primary) !important;
    color: white;
}

.mp-danger {
    color: var(--mp-danger) !important;
    background: var(--proplanti-secondary);
    box-shadow: none;
    border: 1px solid var(--mp-danger-border);
}

.mp-secondary {
    color: var(--proplanti-text-dark) !important;
    background: white;
    box-shadow: none;
    border: 1px solid #BFD5DF;
}

/* A variante IsOutlined usa fundo branco, contorno da cor dos campos e ícone à esquerda do rótulo.
   Declarada após .mp-button/.mp-secondary para vencer os estilos herdados. */
.mp-outlined-primary {
    flex-direction: row-reverse;
    gap: 6px;
    margin: 0;
    box-sizing: border-box;
    color: var(--proplanti-text-dark) !important;
    background: var(--proplanti-secondary);
    border: 1px solid var(--proplanti-border-box);
    box-shadow: none;
}

.mp-outlined-primary:hover {
    background: var(--proplanti-secondary-hover);
    border-color: var(--proplanti-border-box-hover);
    color: var(--proplanti-text-dark) !important;
    box-shadow: none;
}

.mp-outlined-primary:focus:not(:focus-visible):not(:active) {
    background: var(--proplanti-secondary);
    box-shadow: none;
}

.mp-outlined-primary:focus-visible {
    background: var(--proplanti-secondary);
    outline: 2px solid var(--proplanti-text-dark);
    outline-offset: 2px;
    box-shadow: none;
}

.mp-outlined-primary:active {
    background: var(--proplanti-secondary-active);
    box-shadow: none;
}

/* Novo e Editar do autocomplete usam a aparência secundária e mantêm a altura do campo.
   As dimensões explícitas preservam o alinhamento também quando .mp-disabled altera box-sizing. */
.proplanti-autocomplete-action {
    height: var(--proplanti-input-text-height) !important;
    width: 104px !important;
    min-width: 104px !important;
    box-sizing: border-box !important;
    flex-direction: row-reverse;
    gap: 6px;
    margin: 0;
    padding: 0 12px;
    box-shadow: none;
}

/* Sprint 041 — botão de texto com ícone à esquerda (header do cadastro: "Novo" verde
   preenchido e "Filtros" com borda). O markup do ProplantiButton emite o texto antes do
   ícone, então invertemos a direção do flex e aplicamos o gap do mockup. Declarado após
   .mp-button para vencer o flex-direction:row herdado (mesma especificidade). */
.mp-button-icon-left {
    flex-direction: row-reverse;
    gap: 7px;
}

/* Botões "Filtros"/"Colunas" padronizados em todo o app (cadastros + manutenções): ícone à
   ESQUERDA seguido do texto (igual ao botão "Novo"), 40px de altura, largura automática,
   padding compacto e sem o min-width/sombra do .mp-button padrão. Mantemos o row-reverse
   herdado de .mp-button-icon-left (ícone à esquerda); os 3 seletores de classe vencem o
   .mp-button-small com escopo (especificidade 0,3,0). */
.mp-button-filtros.mp-button-icon-left.mp-button-small,
.mp-button-filtros.mp-button-icon-left.mp-button {
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    margin: 0;
    border-radius: 6px;
    box-shadow: none;
    flex-direction: row-reverse;
    gap: 7px;
}

/* Sprint 041 — botão quadrado de "selecionar colunas" no header do cadastro: mesma altura
   (40px) e mesmo raio de borda (6px) do botão "Filtros", para a toolbar ficar alinhada e
   com a mesma linguagem de bordas. Declarado após .mp-square-button para vencer height/
   width/border-radius herdados (mesma especificidade). */
.mp-square-button-toolbar {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 6px;
}

.mp-text {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 125%;
}

.mp-icon {
    display: flex;
}

.mp-span-primary {
    color: white;
}

.mp-span-secondary {
    color: var(--proplanti-text-dark) !important;
}

.mp-span-icon {
}

.mp-disabled {
    background: #E2E7EA !important;
    box-shadow: none;
    border: #E2E7EA;
    box-sizing: unset;
    pointer-events: none;
}

.mp-primary:hover {
    background-color: var(--proplanti-primary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.mp-primary:focus {
    background-color: var(--proplanti-primary-focus);
    box-shadow: 3px 3px 12px rgba(128, 221, 59, 0.9);
}

.mp-primary:active {
    background-color: var(--proplanti-primary-active);
    box-shadow: none;
}

.mp-warning:hover {
    background-color: var(--proplanti-primary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.mp-warning:focus {
    background-color: var(--proplanti-primary-focus);
    box-shadow: 3px 3px 12px rgba(128, 221, 59, 0.9);
}

.mp-warning:active {
    background-color: var(--proplanti-primary-active);
    box-shadow: none;
}

.mp-secondary:hover {
    background-color: var(--proplanti-secondary-hover);
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16);
}

.mp-secondary:focus {
    background-color: var(--proplanti-secondary-focus);
    box-shadow: 0px 0px 12px rgba(46, 169, 221, 0.6);
}

.mp-secondary:active {
    background-color: var(--proplanti-secondary-active);
    box-shadow: none;
}

.mp-danger:hover {
    background-color: red;
    color: white !important;
    box-shadow: 0px 6px 8px rgba(255, 0, 0, 0.26);
}

.mp-danger:focus {
    background-color: red;
    border: 1px solid red;
    color: white !important;
    box-shadow: 0px 0px 12px red;
}

.mp-danger:active {
    background-color: red;
    box-shadow: none;
}


.mp-button-login {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 24px !important;
}

.mp-button-recover-password {
    margin-left: 24px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 24px !important;
}

.mp-recover-password {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 24px !important;
}

.mp-text-field-login {
    width: 100% !important
}

.spinner-login {
    margin-left: 15px !important;
}


.loading-container {
    position: fixed;
    background-color: white;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%
}

.toast-icon {
    font-size: 30px !important;
}

.e-dashboardlayout {
    padding: 10px !important;
}

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
    height: 28px !important;
    background-color: white !important;
    border-bottom: unset !important;
}

.dashboard-panel-header {
    display: flex !important;
    background-color: white !important;
    width: auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    padding-top: 6px !important;
    /*padding-bottom: 8px !important;*/
    padding-left: 18px !important;
}

.dashboard-panel-container-visaogeral {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.dashboard-panel-visaogeral-icon {
    font-size: 4vw !important;
}

.dashboard-panel-container {
    overflow: auto !important;
    padding: 20px !important;
    margin: 10px !important;
    height: 100% !important;
    width: 100% !important;
}


.dashboard-panel-container-v2 {
    /*overflow: auto !important;*/
    /*padding: 20px !important;*/
    /*height: 100% !important;*/
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

.dashboard-panel-notifications-icon {
    font-size: 6vw !important;
}

.dashboard-panel-calendar-center {
    max-height: 100% !important;
    overflow-y: hidden !important;
    margin: auto !important;
    width: 50% !important;
    padding: 10px !important;
}

/* Sprint 053 — Task-05. Conteúdo principal (desktop) flui ao lado da nova sidebar colapsável
   (item de flex no contêiner #proplanti-main), em vez de ser posicionado absolutamente sobre a
   largura fixa da régua antiga (~80px). Assim preenche o espaço restante automaticamente quando a
   sidebar expande (248px) ou contrai (78px), sem cravar left/width. Mantém-se relative para ancorar
   descendentes posicionados. Espelha a versão scoped em MainLayout.razor.css. */
.main-content {
    position: relative;
    overflow-x: hidden;
    padding: 0 var(--proplanti-body-padding);
    flex: 1 1 auto;
    min-width: 0;
    background-color: whitesmoke;
    height: 100vh;
}

.main-content-login {
    position: absolute;
    overflow-x: hidden;
    background-color: whitesmoke;
    height: 100%;
    width: 100%;
}

.main-content-custos {
    position: absolute;
    overflow-x: hidden;
    padding: 0 var(--proplanti-body-padding);
    background-color: whitesmoke;
    height: 100vh;
    width: 100vw;
}


.container-dashboard {
    padding-top: var(--proplanti-body-padding) !important;
    /*padding-right: var(--proplanti-body-padding) !important;*/
    padding-bottom: var(--proplanti-body-padding) !important;
    margin-bottom: var(--proplanti-body-padding) !important;
    position: absolute;
    top: 60px;
    height: calc(100% - (2 * var(--proplanti-body-padding))) !important;
    width: calc(100% - 2 * var(--proplanti-body-padding)) !important;
}

.container-dashboard-tab {
    padding-top: var(--proplanti-body-padding) !important;
    /*padding-right: var(--proplanti-body-padding) !important;*/
    padding-bottom: var(--proplanti-body-padding) !important;
    margin-bottom: var(--proplanti-body-padding) !important;
    position: absolute;
    top: -125px;
    height: calc(100% - (2 * var(--proplanti-body-padding))) !important;
    width: calc(100% - 2 * var(--proplanti-body-padding)) !important;
}

.e-calendar.e-week-number {
    min-height: 300px
}

.e-dlg-target.e-scroll-disabled {
    overflow: visible !important;
}

.spinner-message-store {
    margin-left: 5px
}


.container-grid-icon {
    display: flex;
    justify-content: center;
}

.grid-icon {
    font-size: 20px !important;
}

.area-financeiro-icon-warning {
    color: red !important;
}

/*.e-grid .e-groupcaption {*/
/*    overflow: unset !important*/
/*}*/

.e-float-input input[readonly], .e-float-input.e-control-wrapper {
    background: unset;
}

.e-input-group .e-input[readonly], .e-input-group.e-control-wrapper .e-input[readonly], .e-float-input input[readonly], .e-float-input.e-control-wrapper input[readonly], .e-float-input textarea[readonly], .e-float-input.e-control-wrapper textarea[readonly] {
    background: unset;
}

.customTooltipWT {
    color: #006400;
    font-size: 18px;
    z-index: 4000 !important;
}

/* Uniformiza o tamanho da fonte em TODOS os níveis do menu "Mais" (itens-pai e submenus).
   Os itens-pai recebem a classe .proplanti-menu-item (14px), mas os itens filhos dos submenus
   não recebem essa classe e caíam no padrão do tema (maior), deixando o menu desalinhado.
   Esta regra iguala pai e filho independentemente do container renderizado pelo Syncfusion. */
.e-menu-container ul .e-menu-item,
.e-contextmenu-container ul .e-menu-item,
.e-contextmenu-wrapper ul .e-menu-item {
    font-size: 14px !important;
}

.proplanti-menu-item {
    /*margin: 0 12px !important;*/
    font-size: 14px !important;
}

.proplanti-menu-item-disabled {
    color: #7A909A !important;
    /*background: #E2E7EA !important;*/
}

.e-menu-item e-focused {
    background: #F3F7F7;
    /* Campos / Padrão */
    border: 1px solid #BFD5DF;
    /* Botões / Foco - Secundário */
    box-shadow: 0px 0px 12px rgba(46, 169, 221, 0.6);
    border-radius: 4px;
}

.e-control .e-combobox, input {
    text-transform: uppercase !important;
}

.e-label-bottom:first-letter, label:first-letter {
    text-transform: uppercase;
}

/*.e-list-item {*/
/*    text-transform: uppercase;*/
/*}*/

.md-chat-widget-wrapper {
    visibility: hidden;
}

.e-detailindentcell {
    border-top-style: unset !important;
    border-top-width: unset !important;
}

.e-detailrow > .e-detailcell {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.e-toolbar-items {
    height: 50px !important;
}

.e-toolbar-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    /*padding: 0 20px !important;*/
    padding: 0 10px !important;
    height: 40px !important;
    /*min-width: 77px !important;*/
    margin-left: 5px !important;
    margin-right: 5px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: unset !important;
    color: var(--proplanti-text-dark) !important;
    border: 1px solid #BFD5DF !important;
    font-family: Inter, serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 125% !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--proplanti-text-dark) !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
    color: var(--proplanti-text-dark) !important;
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
    height: 40px;
!important;
}

.e-toolbar-item:active {
    /*background-color: var(--proplanti-primary-active);*/
    box-shadow: none;
}

.proplanti-datagrid-load-failed {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    color: red !important;
    position: absolute;
    left: 0;
}

.proplanti-datagrid-load-noitems {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    position: absolute;
    left: 0;
}

/* Sprint 123 — estado vazio centralizado no corpo do grid.
   O Syncfusion renderiza o EmptyRecordTemplate dentro de <tr class="e-emptyrow"><td>, cuja altura é
   a do conteúdo: a mensagem encostava no topo do corpo vazio, à esquerda. Esticar a tabela do corpo
   faz a célula ocupar toda a altura disponível, e aí o flex do .proplanti-relation-empty-state
   centraliza nos dois eixos. O :has() restringe o esticamento ao grid VAZIO — sem ele, um grid com
   poucas linhas distribuiria a altura sobrando entre as linhas, esticando cada uma. */
.e-grid .e-gridcontent .e-table:has(> tbody > .e-emptyrow) {
    height: 100%;
}

.e-grid .e-emptyrow > td {
    height: 100%;
}

/* A célula do e-emptyrow ocupa a largura TOTAL da tabela (a soma das colunas), que num grid com
   muitas colunas é bem maior que a área visível. Centralizar dentro dela jogava a mensagem para o
   meio do SCROLL — fora da tela, obrigando o usuário a rolar para achar o que ele precisava ver
   primeiro. O container query devolve a largura VISÍVEL do corpo (100cqw) e o sticky mantém o bloco
   colado à área visível enquanto o usuário rola na horizontal, então a mensagem fica centralizada
   no que se vê, em qualquer posição do scroll.
   O container vai no .e-content, que é quem ROLA (a árvore é .e-gridcontent > .e-content > .e-table)
   e portanto é quem tem a largura visível. O :has() escopa ao grid VAZIO: nenhum grid com dados vira
   container de consulta, e a contenção implícita do container-type não alcança linha nenhuma.
   ATENÇÃO: se este seletor deixar de casar, o 100cqw abaixo NÃO falha visivelmente — ele cai para a
   VIEWPORT (100vw), e o bloco escapa para fora do grid. Foi exatamente o que aconteceu quando o
   seletor exigia a tabela como filha direta do .e-gridcontent. */
.e-grid .e-gridcontent .e-content:has(.e-emptyrow) {
    container-type: inline-size;
}

.e-grid .e-emptyrow > td .proplanti-relation-empty-state {
    position: sticky;
    left: 0;
    width: 100cqw;
    height: 100%;
}

.auth-image {
    height: 130px;
    padding-right: 70px
}

.logo-top-menu {
    width: var(--proplanti-menu-width);
    background-color: unset;
    padding: 5px;
}

.user-menu-logo-img {
    width: 90px;
    height: 100px;
}


.card-body-main-info {
    font-size: 1.5vw !important;
}

.panel-header-text {
    color: gray;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: bold;
}

.proplanti-button-plain {
    border: unset !important;
    height: 24px !important;
    width: 24px !important;
    color: gray !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: lighter !important;
}

.proplanti-button-plain:hover {
    background-color: unset !important;
    box-shadow: unset !important;
}

.proplanti-button-plain:focus {
    background-color: unset !important;
    box-shadow: unset !important;
}

.proplanti-panel-header-buttons {
    justify-content: center;
}

.e-panel-header {
    padding: 0px !important;
}


textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
    resize: none;
}

.proplanti-text-formula-input {
    height: 350px !important;
}

.proplanti-input-multiline {
    height: 100% !important;
}

/* Multilinha (ProplantiTextInput IsMultiline): a classe cai no MESMO wrapper .e-input-group que
   recebe a CssClass padrão `.proplanti-input-text`, e ali disputava com
   `.proplanti-input-text:not(.e-popup) { height: var(--proplanti-input-text-height) !important }`.
   As duas são 0,2,0 com !important, mas aquela vem antes no arquivo e vencia: o wrapper ficava
   travado em 40px e a textarea de rows=5 sumia dentro dele — uma linha visível em todos os campos
   multilinha do sistema. O `:not(.e-popup)` sobe este seletor a 0,3,0 e desempata por
   especificidade, não por ordem (o Syncfusion copia a CssClass para o popup, que não é multilinha,
   então a exclusão também é semanticamente correta). */
.proplanti-input-text.proplanti-input-multiline:not(.e-popup) {
    height: auto !important;
}

/* A textarea multilinha é a única exceção ao `resize: none` global acima. Seletor 0,2,1 para vencer
   `.e-input-group textarea` (0,1,1) por especificidade. Sem `height`: o rows=5 do componente já dá
   a altura natural, e um height fixo aqui bloquearia o inline style que o browser escreve ao
   arrastar, matando o resize. */
.proplanti-input-multiline textarea.e-input {
    min-height: var(--proplanti-input-multiline-min-height, 110px);
    resize: vertical;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    border-color: unset;
    border-style: unset;
    border-width: unset;
    border-radius: unset;
    color: unset;
    background-color: var(--proplanti-secondary-hover) !important;
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16) !important;;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:active {
    border-color: unset;
    border-style: unset;
    border-width: unset;
    border-radius: unset;
    color: unset;
    background-color: var(--proplanti-secondary-hover) !important;;
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16) !important;;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    border-color: unset;
    border-style: unset;
    border-width: unset;
    border-radius: unset;
    color: unset;
    background-color: var(--proplanti-secondary-hover) !important;;
    box-shadow: 0px 6px 8px rgba(32, 47, 47, 0.16) !important;;
}

/*clipping trough shile scrolling*/
/*.e-grid .e-virtualtable{*/
/*    z-index: unset;*/
/*}*/
/*.e-grid .e-frozenscrollbar{*/
/*    border-top: unset;  */
/*    background-color: whitesmoke;*/
/*}*/

.e-movablescrollbar {
    background-color: whitesmoke;
}

.proplanti-datagrid-loading {
    position: absolute;
    left: 0;
    width: 100%;
    /* Preenche a altura do grid: o nº de linhas-skeleton é calculado para encher a área (com folga),
       e o excedente é cortado aqui em vez de transbordar/criar scroll abaixo do rodapé. */
    overflow: hidden;
}

/* Skeleton estruturado do datagrid: cabeçalho + linhas com colunas-fantasma, em vez de
   barras chapadas de largura cheia. As células usam grid de 5 colunas com larguras
   proporcionais para dar a leitura de uma tabela real durante o carregamento. */
.skeleton-datagrid-header-row,
.skeleton-datagrid-row-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr 0.6fr;
    gap: 14px;
    align-items: center;
    padding: 0 6px;
}

.skeleton-datagrid-header-row {
    height: 38px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 2px;
}

.skeleton-datagrid-row-grid {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.skeleton-datagrid-hcell,
.skeleton-datagrid-cell {
    border-radius: 3px;
}

.margin-row-group {
    /* Linhas agrupadas (GridFormRow/GridFormRowJustified) acompanham a largura total
       da linha, igual aos campos de largura cheia. Sem sobrescrever margens: o .row
       do Bootstrap usa margem negativa de meia-gutter nos dois lados para compensar
       o padding das colunas — qualquer override desalinha a última coluna da borda. */
}

.e-card-header {
    text-align: left;
    display: block !important;
}

.e-card-header-without-chips {
    text-align: left;
    display: block !important;
    top: 0 !important;
    position: absolute;
}


.dashboard-section-title {
    /*color: #757575;*/
    color: var(--proplanti-primary);
    font-weight: 900;
    font-size: 2em;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif !important;
}


.dashboard-comparison-percentage {
    font-size: 2em;
    padding-top: 10px;
    margin-left: 5px
}


@media (max-width: 1800px) {
    .panel-header-text {
        font-size: 1.4vw
    }

    .card-body-info-title.no-display-small-screen {
        display: none;
    }

    .card-body-info-body {
        font-size: 0.9vw
    }


    .secondary .card-body-main-info {
        font-size: 1.5em;
    }

    .secondary .dashboard-comparison-percentage {
        font-size: 0.9em;
    }

    .gradient-positive {

        min-height: 100px;
    }

    .gradient-negative {

        min-height: 100px;
    }
}


@media (max-width: 600px) {
    .panel-header-text {
        font-size: 4vw
    }

    .card-body-info-body {
        font-size: 4vw
    }

    .secondary .card-body-main-info {
        font-size: 2em;
    }

    .card-body-main-info {
        font-size: 4.5em;
        padding-left: 10px
    }

    .e-card .e-card-content {
        font-size: 4vw
    }

    .dashboard-comparison-percentage {
        font-size: 3vw;
        padding-top: 5px
    }
}


.insight-card-body-main-info {
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif !important;
    text-align: left;
    font-weight: lighter;
    color: white
}

.card-body-main-info {
    font-size: 3em;
    font-family: 'Montserrat', sans-serif !important;
    text-align: left;
    font-weight: bold;
    color: black
}


.insight-card-body-text {
    font-size: 0.7em;
    font-family: 'Montserrat', sans-serif !important;
    text-align: left;
    font-weight: bold;
    color: white
}


.e-card-content.no-padding {
    padding: 0 !important
}


.card-body-info-container {
    background-color: #F7F7F7;
    border-radius: 14px;
    padding: 7px;
}

.card-body-info-container.has-next-card-body-info-container {
    margin-right: 15px
}


.dashboard-panel {
    border-radius: 15px;
    border: 0;
    box-shadow: 2px 2px 2px 1px #efefef;
}


.dashboard-panel-tables {
    border-radius: 15px;
    border: 0;
    box-shadow: 2px 2px 2px 1px #efefef;
    height: 100%
}

.dashboard-panel-custo-tiles {
    height: 170px;
}


.dashboard-panel-custo-tiles-without-details {
    height: 120px;
}


.dashboard-panel-custo-graphs {
    height: 100%;
}

.e-card-content {
    height: 100%;
}

.e-control.e-autocomplete.e-lib.e-input {
    height: 32px !important;
}

.e-dialog.e-lib.e-dlg-modal.sf-grid-dlg.e-xlflmenu.e-popup.e-control.e-popup-open {
    height: fit-content !important;
}

.grid-button-context-icon {
    color: white;
}

/* Botão de contexto do grid no formato "Ações ▾" (indica múltiplas ações). */
.proplanti-acoes-btn .e-dropdown-btn {
    gap: 4px;
    padding: 0 12px;
}

.proplanti-grid-column-container-01 .proplanti-acoes-btn.mp-primary {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.proplanti-acoes-label {
    font-family: Inter, serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 125%;
    white-space: nowrap;
}

.proplanti-acoes-chevron {
    font-size: 16px;
    line-height: 1;
}

.e-movablecontent {
    height: unset !important;
}

.e-headercell {
    background: var(--proplanti-text-dark) !important;
    color: white !important;
}

.e-headercontent {
    background: var(--proplanti-text-dark) !important;
    color: white !important;
}

/* Header dark encosta LIMPO no corpo em QUALQUER grid (o header escuro é global —
   .e-headercell/.e-headercontent acima): remove a linha/sombra que o tema Syncfusion
   desenha no rodapé do header (container + wrapper de conteúdo) e no topo do corpo
   (.e-gridcontent/.e-content e a 1ª linha). Global de propósito, para casar com o
   header dark global; mantém só o seam header↔corpo — não apaga divisórias de coluna
   (bordas das células de dados) onde são usadas. */
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercontent,
.e-grid .e-gridcontent,
.e-grid .e-gridcontent > .e-content {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.e-grid .e-gridcontent .e-content .e-table > tbody > tr:first-child > .e-rowcell {
    border-top: none !important;
}

.e-grid th.e-headercell[aria-sort="ascending"] .e-headertext, .e-grid th.e-headercell[aria-sort="descending"] .e-headertext, .e-grid th.e-headercell[aria-sort="ascending"] .e-sortfilterdiv, .e-grid th.e-headercell[aria-sort="descending"] .e-sortfilterdiv {
    color: white !important;
}

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons {
    color: white !important;
}


.proplanti-green {
    color: green
}

.proplanti-red {
    color: #CD3500
}

.proplanti-comparison-percentage {
    font-size: 2em;
    padding-top: 10px;
    margin-left: 5px
}

.e-grid .e-rowdragheader {
    background-color: var(--proplanti-text-dark) !important;
}

.proplanti-custos-modal {
    height: 90% !important;
    width: 80% !important;
}

/* Ícone de mostrar senha */
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    border: none !important;
    font-size: 19px !important;
}

.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: none !important;
    color: black !important;
}

/* */

/* Layout Vertical */
@media (max-width: 768px) {

    .e-sidebar {
        position: fixed !important;
    }

    .e-menu-wrapper ul.e-menu, .e-menu-container ul.e-menu {
        display: grid !important;
    }

    .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {
        display: none !important;
    }

    .e-hscroll.e-scroll-device {
        padding-right: 10px !important;
    }

    .e-virtualtable {
        height: 100% !important;
        width: 100% !important;
    }

    /* Grid */
    .vertical-grid-mobile td {
        padding-top: 0.1em !important;
        padding-bottom: 0.2em !important;
    }

    .vertical-grid-mobile td:first-child {
        padding-top: 0.6em !important;
    }

    .vertical-grid-mobile td:last-child {
        padding-bottom: 0.5em !important;
    }

    .vertical-grid-mobile tr {
        border-bottom: 4px solid #d7d7d7 !important;
    }

    .vertical-grid-mobile .e-grid .e-headercell,
    .vertical-grid-mobile .e-grid .e-rowcell::before {
        display: flex !important;
    }

    /* */
    /* Grid - Headers */
    .e-grid .e-headercell, e-grid, .e-rowcell::before {
        width: auto !important;
        font-size: var(--proplanti-mobile-verticalheader-fontsize) !important;
        display: flex !important;
        position: initial !important;
        font-weight: bolder !important;
    }

    /* Grid - Campos */
    .e-bigger.e-grid.e-row-responsive .e-table td {
        /*padding-top: 10px;*/
        padding-left: 12px !important;
        /*padding-bottom: 10px;*/
        text-align: initial !important;
    }

    .proplanti-grid input {
        font-size: var(--proplanti-mobile-field-fontsize) !important;
        text-align: initial !important;
    }
}

/*Layout responsivo - Login*/
@media (max-width: 768px) {

    /* Imagem */
    .auth-image {
        height: 80px !important;
        width: auto !important;
        padding-right: 15px !important;
        margin-bottom: 20px !important;
    }

    /* */
    /* Estilo do form com relevo */
    .login-form {
        border-radius: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        padding: 20px !important;
        padding-top: 15px !important;
        padding-bottom: 27px !important;
        max-width: 350px !important;
        width: 88% !important;
        margin-bottom: 15% !important;
    }

    /* */
    /* Mensagens de validação */
    .login-form .validation-message {
        margin-top: -7px !important;
    }

    /* Float Label */
    .e-float-input, .e-float-input.e-control-wrapper {
        font-family: Inter, serif !important;
        font-weight: 500;
        font-size: var(--proplanti-mobile-field-fontsize) !important;
    }

    .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text {
        font-weight: 500 !important;
        font-size: 12px !important;
        color: #212529 !important;
    }

    /*.e-float-text {
        margin-top: -3px !important;
        top: 57% !important;
        transition: transform 0.1s linear !important;
    }

    .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text {
        transform: translate3d(-10px, -36px, 0) scale(1) !important;
    }*/
    /* */
    /* Borda dos campos */
    .e-input-focus {
        box-shadow: 0 0 0 2px rgb(46, 169, 221, .95) !important;
        /* border-color: #86b7fe !important;*/
    }

    .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
    .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
        box-shadow: 0 0 0 2px rgb(46, 169, 221, .95) !important;
        position: relative !important;
        z-index: 99999 !important;
        /*border-color: #86b7fe !important;*/
    }

    .mp-text-field-login:not(:focus-within) {
        transition: box-shadow 0.6s ease-out;
    }

    /* */
    /* Borda de erro dos campos */
    .mp-text-field-login-error {
        border-radius: 8px !important;
        border-color: #f23645 !important;
        box-shadow: 0 0 0 1.8px rgb(242, 54, 69, .45) !important;
    }

    /* */
    /* Botão Entrar */
    .loginButtons {
        display: inline-flow !important;
        align-content: center;
    }

    /* */
    .mp-text-field-login {
        border-radius: 8px !important;
    }

    .mp-button-login {
        width: 86% !important;
        max-width: 300px !important;
        border-radius: 8px !important;
        height: 42px !important;
        margin-top: 20px !important;
    }

    /* */
    /* Botão Esqueceu senha */
    .recuperarSenha {
        display: flex !important;
        justify-content: end !important;
    }

    .mp-button-recover-password-mobile button {
        border: none !important;
        background: none !important;
        padding: 0px !important;
        height: 15px !important;
        margin-top: -6px !important;
        font-size: 12px !important;
        font-weight: 550 !important;
    }

    .mp-button-recover-password-mobile-error button {
        display: none !important;
    }

    /* */
    /* Borda do autofill do navegador */
    input:-webkit-autofill {
        border-radius: 8px !important;
    }

    /* */
    /* Alert box */
    .alert {
        font-size: 13px !important;
        font-weight: 500 !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
    }

    /* */
    .hide-label {
        display: none !important;
    }

    /* Ícone de mostrar senha */
    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
        font-size: 19px !important;
        border: none !important;
    }

    .e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
        background: none !important;
        color: black !important;
    }

    /* */
}

@media (max-width: 380px) {

    .login-form {
        margin-bottom: 10% !important;
    }
}

/*Layout Responsivo*/
@media (max-width: 768px) {
    .container-page {
        height: 100%;
    }

    .e-table:not(.horizontal-grid-mobile .e-table) {
        width: auto !important;
        min-width: 100% !important;
    }

    .e-table td[data-colindex="1"]:not(.e-acrdn-content .e-table td) {
        width: 100%;
    }

    .e-bigger.e-grid.e-row-responsive .e-summarycontent td::before {
        position: unset !important;
    }

    /* Mensagens de validação */
    .validation-message {
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* */
    /* Toast */
    #toast_type {
        left: 50% !important;
        transform: translate(-50%, -0%);
        z-index: 999999 !important;
    }

    .e-toast-content {
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .e-toast-title {
        font-weight: 600 !important;
    }

    /* */
    .search-field-atividade-manejo {
        margin-left: .5rem !important;
    }

    .e-menu-container {
        margin-left: 0 !important;
        border-radius: 0px !important;
        background-color: white;
        padding-left: 0 !important;
    }

    /* Sidebar Header */
    .mobile-header-text {
        padding-top: 0 !important;
        font-size: 1.2em !important;
        align-content: center
    }

    .e-menu-title {
        padding-top: 0.3em !important;
        font-size: 1.2em !important;
    }

    /* */
    .e-grid .e-headercell.e-hide {
        display: none !important;
    }

    .e-fab.e-btn {
        z-index: 1 !important;
    }

    .e-grid .e-rowcell {
        font-size: var(--proplanti-mobile-field-fontsize) !important;
        font-weight: 460 !important;
    }

    /* ícone do checkbox */
    .e-checkbox-wrapper .e-frame.e-check {
        color: var(--proplanti-secondary) !important;
    }

    /* Botões flutuante OP/OC */
    .ordensPage-floating-buttons .e-fab.e-btn.e-fab-fixed {
        position: absolute !important;
    }

    /* Ícone de grid */
    .container-grid-icon {
        justify-content: start;
    }

    /* Grid - Horizontal*/
    .horizontal-grid-mobile .e-grid .e-hide {
        display: none !important;
    }

    .horizontal-grid-mobile, .e-grid .e-headercell,
    .horizontal-grid-mobile .e-grid .e-rowcell::before {
        display: revert !important;
    }

    .horizontal-grid-mobile .e-gridheader .e-table {
        display: table !important;
    }

    /* */
    /* Grid - Accordions  */
    .vertical-grid-accordion-mobile .e-bigger.e-grid.e-row-responsive,
    .e-table td:not(:first-child):not(.vertical-grid-mobile td) {
        padding-top: 0.1em !important;
        padding-bottom: 0.2em !important;
    }

    .vertical-grid-accordion-mobile .e-bigger.e-grid.e-row-responsive,
    .e-table td:first-child:not(.vertical-grid-mobile td:first-child) {
        padding-top: 0.7em !important;
    }

    .vertical-grid-accordion-mobile .e-bigger.e-grid.e-row-responsive,
    .e-table td:last-child:not(.vertical-grid-mobile td:last-child) {
        padding-bottom: 0.5em !important;
    }

    .vertical-grid-accordion-mobile .pb-3, .py-3 {
        padding-bottom: 0 !important;
    }

    /* */
    /* Grid sem headers*/
    .hide-gridheaders .e-gridheader .e-table {
        display: none !important;
    }

    .hide-gridheaders .e-gridcontent.e-responsive-header {
        height: calc(100% - 2px) !important;
    }

    /* */
    .is-transition-sidebar.e-sidebar.e-right.e-open {
        transition: transform .5s ease !important;
    }
}

.proplanti-mud-grid {

    margin-top: -10px !important;
}


/*:is(a, button, input, textarea, summary, div, span, table, td, tr):focus {*/
/*    border: 5px solid red !important;*/
/*}*/

/*:focus {*/
/*    background-color: var(--proplanti-primary-focus);*/
/*    box-shadow: 3px 3px 12px rgba(128, 221, 59, 0.9);    */
/*}*/


.proplanti-quantidade-quantidaderecipiente-input-link {
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.e-tooltip-wrap {
    z-index: 10090 !important;
}

.usuario-menu-buttons-container {
    display: flex;
    flex-wrap: wrap;
}

.usuario-menu-button {
    flex-basis: 45%; /* Adjust as needed */
    margin-bottom: 1em; /* Optional: adds space between rows */
}

.grid-column-chooser-grouping {
    background: unset !important;
    border: unset !important;
    width: 40px !important;
    margin: unset !important;
    padding: unset !important;
}

.grid-column-chooser-grouping i {
    color: white;
    font-size: 2rem !important;
}


.grid-column-chooser-grouping button {
    width: 40px !important;
    padding: unset !important;
    margin: unset !important;;
}

.grid-column-chooser-not-grouping {
    background: unset !important;
    border: unset !important;
    width: 40px !important;
    margin: unset !important;
    padding: unset !important;
}

.grid-column-chooser-not-grouping i {
    color: white;
    font-size: 2rem !important;
}

.grid-column-chooser-not-grouping button {
    width: 40px !important;
    padding: unset !important;
    margin: unset !important;
}

.error-list {
    margin-top: 20px;
    padding: 10px 30px;
    background-color: #ffe6e6; /* Light red for error vibe */
    border-left: 3px solid #ff4d4d; /* Bright red border for emphasis */
    border-radius: 3px; /* Subtle rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.error-list li {
    color: #cc0000; /* Dark red text for readability */
    padding: 5px 0; /* Vertical spacing, replaces pt-0 pb-0 */
    width: 100%;
    transition: transform 0.2s ease; /* Smooth hover effect */
}

.error-list li:hover {
    transform: scale(1.02); /* Slight grow on hover for interactivity */
}


#multiple-job-check-printer-config-fields .proplanti-input-text {
    width: 100% !important;
}

#multiple-job-check-printer-config-fields:first-child .pb-3 {
    padding-bottom: 0px !important;
}

.multiple-job-check-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.multiple-job-check-row {
    display: flex;
    flex-direction: row;
    border: 1px solid #dddddd;
    padding: 8px;
}

.multiple-job-check-row:nth-child(even) {
    background-color: #f9f9f9;
}

.multiple-job-check-header {
    background-color: #f2f2f2;
    font-weight: bold;
}

.multiple-job-check-cell {
    flex: 1;
    padding: 8px;
    text-align: left;
}

.multiple-job-check-cell[data-width="90px"] {
    width: 90px;
}

.multiple-job-check-cell[data-width="500px"] {
    width: 500px;
}

.multiple-job-check-cell.multiple-job-check-restricted {
    display: none;
}

.multiple-job-check-error-container {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.multiple-job-check-error-message {
    color: #d32f2f;
    font-size: 1.2em;
    margin-bottom: 20px;
}

.multiple-job-check-div-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    margin: 30px;
    font-family: Arial, sans-serif;
    background-color: #fff;
}

.multiple-job-check-message {
    font-size: 24px;
    margin: 20px;
    color: #333;
}

.multiple-job-check-cross {
    font-size: 100px;
    color: #e63946;
}

.multiple-job-check-checkmark {
    font-size: 100px;
    color: #4CAF50;
}

.multiple-job-check-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: multiple-job-check-spin 1s linear infinite;
}

.multiple-job-check-spinner-accordion-item {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: multiple-job-check-spin 1s linear infinite;
}

.multiple-job-check-message-accordion-item {
    font-size: 16px;
    color: var(--proplanti-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiple-job-check-accordion-header-button-fontsize {
    font-size: 16px;
    margin-left: 10px;
    margin-right: 10px;
}

.multiple-job-check-button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}

.multiple-job-check-main-header-button {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline-block;
}


.proplanti-button-accordion-header-summary-grid {
    margin-top: 10px;
    margin-right: 15px;
}

.proplanti-button-accordion-header-summary-grid .tooltip-text {

    background-color: #007bff;
    color: white;
    border: 2px solid gold;
    font-size: 18px;
    padding: 15px;
}

/* Tooltip por atributo: bloco REMOVIDO. Era um segundo sistema de tooltip, de mesma
   especificidade (0,1,0) que o .mp-tooltip::after e ~1700 linhas ABAIXO dele, então vencia por
   ordem em todas as propriedades compartilhadas — sequestrava TODO botão com UseStyledTooltip.
   Efeito: reimpunha a ancoragem centralizada por cima da modificadora .mp-tooltip--end e, com
   ambos left e right resolvidos, a caixa ficava super-restrita — o navegador descarta o right em
   LTR — e crescia para a DIREITA a partir do centro do botão, para fora da tela. O único emissor
   de data-tooltip é o ProplantiButton (UseStyledTooltip), que sempre acompanha .mp-tooltip; o
   bloco não tinha mais consumidor próprio. Tooltip estilizado: ver .mp-tooltip. */

.proplanti-tooltip-container {
    /*display: inline-flex !important;*/
    /*align-items: flex-end !important;*/
    margin-left: 0 !important;
    padding-left: 0 !important;
    /*vertical-align: bottom;*/
}

/* ============================================================================
   Sprint 041 — Redesign do datagrid (fiel ao mockup claude.ai)
   Paleta já existente: --proplanti-primary #6FB839 · --proplanti-text-dark #243A44
   --proplanti-border-box #BFD5DF · --proplanti-shadow-gray #E2E7EA
   Bloco isolado e reversível: card arredondado, células com respiro, hover de
   linha, paginador restilizado e classes utilitárias de badge (pill) usadas
   pela coluna de tipo/categoria (ver GridBadgeResolver).
   ============================================================================ */

/* O VISUAL do ProplantiGrid mora agora no CSS isolado do componente:
   `Datagrid/ProplantiGrid.razor.css` — moldura do card, cabeçalho dark (inclusive os
   blocos congelados e a `.e-freezeline`), respiro das células, zebra, hover, linha
   marcada para exclusão (faixa + tachado + selo), realce da linha alterada e o
   paginador restilizado. Não redeclare `.proplanti-grid …` aqui: o escopo `[b-…]` do
   arquivo isolado soma especificidade e o bundle carrega DEPOIS deste arquivo, então a
   regra global vira ruído que não pinta nada.

   Ficou neste arquivo, de propósito, só o que NÃO é do componente:
   - as duas regras de coluna congelada por densidade (logo abaixo) — pertencem à escada
     de densidade documentada lá em cima (`.proplanti-grid-density--*`, que segue global)
     e são fixadas por texto pelo DensidadeGlobalCssContractTests;
   - o fallback `.grid-row-changed .e-rowcell`, que vale para grids FORA de `.proplanti-grid`
     (o CSS isolado, por definição, não alcança quem está fora do wrapper);
   - as utilitárias `.proplanti-badge*`, aplicadas por templates de coluna das páginas. */

/* No compacto, a coluna congelada de ações não tem input preenchendo a célula. Se ela ficar
   transparente, revela sozinha a cor aplicada no <tr> por situação e cria uma faixa verde na
   primeira coluna. Mantém hover/seleção livres pelos :not(...) abaixo. */
.proplanti-grid-density--compacto.proplanti-grid .e-grid .e-content .e-row:not(:hover):not(.e-active) .e-rowcell.e-leftfreeze:not(.e-active):has(> .proplanti-grid-column-container-01 .proplanti-dropdown-btn) {
    background-color: var(--proplanti-secondary) !important;
}

.proplanti-grid-density--compacto.proplanti-grid .e-grid .e-content .e-altrow:not(:hover):not(.e-active) .e-rowcell.e-leftfreeze:not(.e-active):has(> .proplanti-grid-column-container-01 .proplanti-dropdown-btn) {
    background-color: #F5F8F4 !important;
}

/* Realce da linha alterada por outro usuário (Sprint 096), FALLBACK para grids fora de
   `.proplanti-grid` — o CSS isolado do componente não alcança quem está fora do wrapper.
   Dentro do wrapper quem vale é a regra do ProplantiGrid.razor.css, mais específica. */
.grid-row-changed .e-rowcell {
    background-image: linear-gradient(rgba(233, 161, 0, 0.16), rgba(233, 161, 0, 0.16));
}

/* ---- Badges (pill) de tipo/categoria — pareiam com GridBadgeResolver ---- */
.proplanti-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}

.proplanti-badge-neutral {
    color: var(--proplanti-icons-gray, #7A909A);
    background: #eef2f3;
}

.proplanti-badge-info {
    color: var(--proplanti-blue-spotlight, #2EA9DD);
    background: #e7f5fb;
}

.proplanti-badge-success {
    color: #3f6a1f;
    background: #eef6e7;
}

.proplanti-badge-warning {
    color: #9a6a00;
    background: #fbf2e0;
}

.proplanti-badge-danger {
    color: #c0392b;
    background: #fbe9e7;
}

/* ============================================================================
   Sprint 041 — Chrome compartilhado das sidebars: label/input fiéis ao mockup.
   Classes utilitárias OPT-IN (aplicadas explicitamente) — não tocam nos inputs
   Syncfusion por padrão, então não quebram o render existente. Cores via vars:
   --proplanti-primary #6FB839 · --proplanti-text-dark #243A44
   --proplanti-border-box #BFD5DF · --proplanti-icons-gray #7A909A
   ============================================================================ */

/* Rótulo: 12px semibold, bloco, com respiro abaixo. */
.proplanti-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--proplanti-text-dark, #243A44);
    line-height: 1.3;
}

/* Input/select/textarea base: h40, borda #BFD5DF, radius 4, texto escuro. */
.proplanti-field-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--proplanti-border-box, #BFD5DF);
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--proplanti-text-dark, #243A44);
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

textarea.proplanti-field-input {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

/* Campo desabilitado/somente-leitura: cinza, fiel ao mockup. */
.proplanti-field-input:disabled,
.proplanti-field-input.proplanti-field-readonly {
    color: var(--proplanti-icons-gray, #7A909A);
    background: #eff3f4;
    border-color: var(--proplanti-shadow-gray, #E2E7EA);
}

/* Obrigatório e foco: borda-esquerda verde 3px (sinaliza campo ativo/required). */
.proplanti-field-input.proplanti-field-required,
.proplanti-field-input:focus {
    border-left: 3px solid var(--proplanti-primary, #6FB839);
    outline: none;
}

.proplanti-field-input:focus {
    box-shadow: 0 0 0 1px rgba(111, 184, 57, 0.20);
}

/* ============================================================================
   Sprint 041 — Section-nav: navegação lateral de seções nos drawers de edição
   (substitui o SfAccordion). Coluna de navegação ~188px à esquerda + painel de
   conteúdo rolável à direita. Fiel ao mockup: item ativo bg #eef6e7 / texto
   #3f6a1f / dot #6FB839. Cores via vars do Proplanti.
   ============================================================================ */

/* Contêiner raiz: 2 colunas (nav + conteúdo), ocupa a altura disponível. */
.proplanti-section-nav {
    display: flex;
    min-height: 0;
    height: 100%;
    width: 100%;
}

/* Coluna de navegação (~188px), com borda à direita e rolagem própria. */
.proplanti-section-nav__list {
    width: 188px;
    flex: none;
    border-right: 1px solid #eef1f2;
    padding: 16px 12px;
    overflow-y: auto;
    background: #fafbfb;
    box-sizing: border-box;
}

/* Item de navegação: linha clicável com dot + ícone + título + badge. */
.proplanti-section-nav__search {
    position: relative;
    margin-bottom: 10px;
}

.proplanti-section-nav__search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #7A909A;
    font-size: 15px;
    pointer-events: none;
}

.proplanti-section-nav__search-input {
    width: 100%;
    height: 36px;
    border: 1px solid #dde6ea;
    border-radius: 6px;
    background: #fff;
    color: #33444d;
    font: inherit;
    font-size: 13px;
    padding: 8px 10px 8px 32px;
    outline: none;
    box-sizing: border-box;
}

.proplanti-section-nav__search-input:focus {
    border-color: var(--proplanti-primary, #6FB839);
    box-shadow: 0 0 0 2px rgba(111, 184, 57, 0.15);
}

.proplanti-section-nav__empty {
    padding: 12px 10px;
    color: #7A909A;
    font-size: 12px;
    line-height: 1.3;
}

.proplanti-section-nav__item {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    color: #516470;
}

.proplanti-section-nav__item:hover:not(.proplanti-section-nav__item--disabled):not(.proplanti-section-nav__item--active) {
    background: #f1f5f0;
}

/* Item ativo: verde-claro fiel ao mockup. */
.proplanti-section-nav__item--active {
    background: #eef6e7;
    color: #3f6a1f;
}

.proplanti-section-nav__item--disabled {
    color: var(--proplanti-icons-gray, #7A909A);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Dot de status: cinza por padrão, verde quando a seção está ativa. */
.proplanti-section-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: #cdd9de;
}

.proplanti-section-nav__item--active .proplanti-section-nav__dot {
    background: var(--proplanti-primary, #6FB839);
}

.proplanti-section-nav__icon {
    font-size: 16px;
    line-height: 1;
    flex: none;
}

/* Título da seção: quebra em várias linhas (word-wrap) em vez de truncar com
   reticências — sobrescreve o nowrap/ellipsis herdado de .proplanti-text-long. */
.proplanti-section-nav__item .proplanti-section-nav__title {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

/* Chip com a quantidade de filtros informados, dentro do botão de Filtros (ProplantiFiltrosButton).
   Mesmo visual dos chips do header das seções e do section-nav — os três blocos são gêmeos de
   propósito, para o contador ler como um componente só onde quer que apareça. Só renderiza quando há
   filtro informado, então não ocupa espaço à toa. No FAB fica sobreposto ao canto do ícone, que é
   redondo por ser do Syncfusion/base. */
.proplanti-filtros-badge {
    flex: none;
    margin-left: 6px;
    /* 6px: mesmo canto dos itens de menu do section-nav (.proplanti-section-nav__item), que é onde o
       chip vive. Num chip de ~17px de altura o pill começaria em ~9px — 6px arredonda sem virar cápsula. */
    border-radius: 6px;
    background: var(--proplanti-primary, #6FB839);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
}

.mp-floating-button .proplanti-filtros-badge,
.floating-button .proplanti-filtros-badge {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
}

/* Badge opcional à direita (contador etc.). */
.proplanti-section-nav__badge {
    flex: none;
    margin-left: auto;
    /* Acompanha o canto do item de menu que o hospeda (.proplanti-section-nav__item, 6px). */
    border-radius: 6px;
    background: var(--proplanti-primary, #6FB839);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
}

/* Modo "exibir tudo": a navegação vira só ícones e o badge com número é escondido (regra abaixo).
   Para não perder o sinal "esta seção tem algo", o item vira um dot no canto do ícone. O cabeçalho
   do accordion continua exibindo o número completo. */
.proplanti-section-nav__list--collapsed .proplanti-section-nav__item--com-badge {
    position: relative;
}

.proplanti-section-nav__list--collapsed .proplanti-section-nav__item--com-badge::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    /* Círculo, igual ao .proplanti-section-nav__dot que aparece ao lado — é o mesmo chip degradado. */
    border-radius: 50%;
    background: var(--proplanti-primary, #6FB839);
}

/* Toolbar de AÇÕES da seção (slot HeaderActions): fica no topo do CONTEÚDO da seção — tanto no
   painel do modo normal (.proplanti-section-nav-pane) quanto no corpo do accordion no modo
   "exibir tudo" (.proplanti-section-accordion__body). Substitui o antigo hack de botões absolutos
   no cabeçalho (.proplanti-accordion-header-button-container), que na coluna estreita da navegação
   sobrepunha o texto do item. Aqui os botões ganham um flex-row alinhado à direita, no fluxo. */
.proplanti-section-nav__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Quando o HeaderActions renderiza vazio (ex.: gateado por nível de acesso), some junto com a
   margem — evita um espaço morto no topo da seção. */
.proplanti-section-nav__toolbar:empty {
    display: none;
}

/* Painel de conteúdo rolável à direita. */
.proplanti-section-nav__content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 26px 30px;
    box-sizing: border-box;
}

/* Painel de uma seção: por padrão escondido; visível só quando ativo. */
.proplanti-section-nav-pane {
    display: none;
}

.proplanti-section-nav-pane--active {
    display: block;
}

/* Reassevera que um pane INATIVO permanece escondido, mesmo aninhado. A regra de altura de
   grid abaixo (.proplanti-section-nav-pane--active:has(.proplanti-grid) *:has(.proplanti-grid))
   usa combinador descendente universal e vaza por section-navs aninhados: num cadastro com
   nav dentro de nav (ex.: ProdutoEstoqueAccordion — unidade de negócio → depósito → lotes),
   o pane ativo externo casa e o `*:has(.proplanti-grid)` desce sem fronteira, forçando
   display:flex nos panes inativos internos (que contêm grid) e sobrepondo o display:none base
   — o conteúdo da unidade anterior não era removido ao trocar de unidade. Este guard tem
   especificidade/!important suficientes para vencer o vazamento e manter o pane inativo oculto. */
.proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  .proplanti-section-nav-pane:not(.proplanti-section-nav-pane--active) {
    display: none !important;
}

/* ── Sub-navegação de grupos (tela de Perfil de Acesso) ───────────────────────
   Section-nav aninhado no painel da seção de um módulo: cada grupo de permissões
   (Ordem comercial, Ordem de produção, ...) vira um item do sub-menu. Separa do
   "Selecionar todos" acima. As permissões não têm grid, então as regras de altura
   de grid do section-nav não se aplicam aqui.

   Altura: o sub-nav PREENCHE a altura disponível e NÃO cresce com o conteúdo
   (min-height:0 permite encolher) — assim a rolagem fica nas colunas internas
   (lista de grupos + painel de permissões), não na sidebar inteira. As regras
   genéricas .e-sidebar *:has(> .proplanti-section-nav) e .e-sidebar
   .proplanti-section-nav (abaixo) já tornam o pane do módulo um flex column e o
   sub-nav um flex:1; falta apenas dar uma altura DEFINIDA ao pane do módulo — feito
   logo abaixo, limitando o __content externo. */
.proplanti-section-nav-grupos {
    margin-top: 16px;
    border-top: 1px solid #eef1f2;
    padding-top: 12px;
    min-height: 0;
}

/* Em "exibir tudo" o accordion do módulo empilha no fluxo natural: o sub-nav de grupos NÃO pode
   herdar height:100% do .proplanti-section-nav (pensado para preencher o pane no modo menu).
   Sem isto, o corpo do módulo reivindica a altura do drawer e, ao filtrar/limpar a busca de
   permissões, sobra um vão enorme atrás do conteúdo. */
.proplanti-section-nav__content--show-all .proplanti-section-nav-grupos {
    height: auto;
}

/* Coluna de navegação do sub-menu: um pouco mais estreita que a do nível externo. */
.proplanti-section-nav-grupos > .proplanti-section-nav__list {
    width: 200px;
    padding: 12px 10px;
}

/* Painel do sub-menu: padding mais enxuto que o do nível externo. */
.proplanti-section-nav-grupos > .proplanti-section-nav__content {
    padding: 6px 18px;
}

/* Quando o painel ATIVO de uma seção contém um section-nav ANINHADO (o sub-nav de
   grupos do Perfil de Acesso, OU qualquer outro nível de navegação aninhado — ex.:
   PlanoSideBar → Permissões → módulo → grupo), o __content externo vira flex column
   e NÃO rola (overflow:hidden): assim o pane externo é limitado à altura visível e a
   rolagem DESCE para as colunas internas do nav aninhado, em vez de rolar o
   conteúdo/sidebar inteiro (que levaria junto as colunas de navegação). A regra se
   aplica recursivamente: cada nível cujo pane ativo ainda contém OUTRO section-nav
   delega para baixo, até o nível mais profundo (sem nav aninhado), cujo __content
   mantém overflow-y:auto e é o único que de fato rola.

   REGRA GERAL para todas as sidebars com section-nav: a rolagem fica SEMPRE no
   conteúdo, nunca na sidebar inteira. Opt-in pelo :has do pane ativo com um
   .proplanti-section-nav descendente — não afeta seções-folha (Detalhes, módulos de
   grupo único, cards de permissão), que continuam rolando o próprio __content quando
   o conteúdo é alto. Generaliza o caso antes restrito a .proplanti-section-nav-grupos
   (que continua coberto, pois o sub-nav de grupos também é um .proplanti-section-nav).

   EXCEÇÃO — .proplanti-section-nav--embutido: a delegação acima pressupõe que o nav
   aninhado É o conteúdo do pane (Perfil de Acesso, PlanoSideBar → Permissões). Quando o
   nav aninhado é apenas um WIDGET no meio/rodapé de um formulário alto (ex.:
   ProdutoEstoqueAccordion — o nav de "Lotes de insumo" vem DEPOIS de Identificação +
   Financeiro e contábil + linha de Depósito), delegar a rolagem para ele deixa o
   formulário acima sem scroll: o __content externo fica overflow:hidden e o conteúdo é
   simplesmente cortado. Navs nessa condição marcam-se com --embutido e são ignorados
   aqui, de modo que o pane volte a ser um painel de formulário comum (rola no próprio
   __content) e o grid interno continue limitado pelo teto de N linhas do modo
   "exibir tudo". */
.proplanti-section-nav__content:has(
    > .proplanti-section-nav-pane--active
      .proplanti-section-nav:not(.proplanti-section-nav--embutido)
) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.proplanti-section-nav__content:has(
    > .proplanti-section-nav-pane--active
      .proplanti-section-nav:not(.proplanti-section-nav--embutido)
) > .proplanti-section-nav-pane--active {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Scroll interno: o conteúdo rola, NÃO a sidebar inteira ───────────────────
   No ProplantiFormSideBar o corpo do formulário já é um flex column com altura
   definida (height:100% encadeado até a .e-sidebar), mas a cadeia até o
   .proplanti-section-nav (o wrapper que a tela coloca em volta dele e, no modo
   relatório, o SfTab interno) não propagava essa altura: o section-nav crescia
   com o conteúdo e quem rolava era a sidebar inteira — levando junto a coluna de
   navegação. As regras abaixo propagam a altura limitada via flex (flex:1 +
   min-height:0) até o section-nav, de modo que o overflow fique nas colunas
   internas (__list / __content, que já são overflow-y:auto) e a navegação
   permaneça fixa. Tudo opt-in por :has(.proplanti-section-nav) para não afetar
   sidebars sem section-nav. */

/* Wrapper que contém diretamente o section-nav (ex.: a <div> da tela): preenche
   a altura disponível em vez de crescer com o conteúdo. */
.e-sidebar *:has(> .proplanti-section-nav) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* O próprio section-nav preenche o wrapper limitado; o overflow vai para as
   colunas internas. */
.e-sidebar .proplanti-section-nav {
    flex: 1 1 auto;
    min-height: 0;
}

/* Modo relatório: o SfTab (cujo header é display:none) e seus contêineres
   internos precisam preencher a altura para o section-nav herdar o limite. */
.e-tab:has(.proplanti-section-nav),
.e-tab:has(.proplanti-section-nav) > .e-content,
.e-tab:has(.proplanti-section-nav) > .e-content > .e-item:has(.proplanti-section-nav) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* ── Drawer de FILTROS com section-nav: rolagem ÚNICA no painel de conteúdo ────
   No FiltrosSideBar a cadeia header → <form> → div interna usa height:100%, que
   transbordava a altura do drawer e criava uma 2ª barra de rolagem (a do drawer
   inteiro) além da barra interna do .proplanti-section-nav__content — visível no
   modo "exibir todas as seções", onde o conteúdo fica alto. Aqui a cadeia é
   constringida por flex (flex-basis 0 ignora o height:100% inline) para que só o
   .__content role. Opt-in por :has(.proplanti-filtros-section-nav) — não afeta
   filtros empilhados nem os drawers de formulário. */
.proplanti-sidebar-div-warpper:has(.proplanti-filtros-section-nav) {
    overflow: hidden;
}

.proplanti-sidebar-div-warpper:has(.proplanti-filtros-section-nav) > form,
.proplanti-sidebar-div-warpper:has(.proplanti-filtros-section-nav) > form > div {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Contrato de OP — menu contraído ("exibir todas"): overflow-x:hidden no warpper faz
   overflow-y computar auto, então o host vira o scrollport e leva a trilha de ícones
   junto (header/footer ficam, pois já são sticky). overflow-y:hidden no host + corpo
   como scrollport + sticky na trilha prendem os ícones abaixo do título. */
.proplanti-sidebar-div-warpper.contrato-op-host {
    overflow-y: hidden;
}

.proplanti-sidebar-div-warpper.contrato-op-host .contrato-op-body:has(.proplanti-section-nav__list--collapsed) {
    overflow-y: auto;
}

.proplanti-sidebar-div-warpper.contrato-op-host .contrato-op-body:has(.proplanti-section-nav__list--collapsed) .contrato-op-content,
.proplanti-sidebar-div-warpper.contrato-op-host .contrato-op-body:has(.proplanti-section-nav__list--collapsed) .proplanti-section-nav {
    flex: none;
    overflow: visible;
    height: auto;
    max-height: none;
}

/* ── "Exibir todas as seções" ────────────────────────────────────────────────
   Botão de alternância no topo da navegação + modo empilhado do painel. */

/* Separa o botão do resto da lista de seções. */
.proplanti-section-nav__showall {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef1f2;
    border-radius: 6px;
}

/* Coluna de navegação CONTRAÍDA: no modo "exibir todas as seções" o menu vira uma trilha
   estreita só de ícones (o conteúdo empilhado já mostra o título de cada seção em seu
   cabeçalho). Ao desligar o modo, a classe sai e o menu reexpande para ícone + texto.
   A transição de largura suaviza a troca. */
.proplanti-section-nav__list {
    transition: width 0.15s ease;
}

.proplanti-section-nav__list--collapsed {
    width: 56px;
    padding: 16px 8px;
}

/* Itens centralizados, sem o rótulo nem o badge — só o ícone. */
.proplanti-section-nav__list--collapsed .proplanti-section-nav__item {
    justify-content: center;
    gap: 0;
    padding: 8px;
}

.proplanti-section-nav__list--collapsed .proplanti-section-nav__title,
.proplanti-section-nav__list--collapsed .proplanti-section-nav__badge {
    display: none;
}

.proplanti-section-nav__list--collapsed .proplanti-section-nav__icon {
    font-size: 18px;
}

/* O dot de status fica escondido quando há ícone (evita dot + ícone apertados); em seções
   SEM ícone ele permanece como marcador visível para a trilha não ficar vazia. */
.proplanti-section-nav__list--collapsed .proplanti-section-nav__item:has(.proplanti-section-nav__icon) .proplanti-section-nav__dot {
    display: none;
}

/* Modo show-all: cada seção é um accordion; o corpo só renderiza quando expandido. */
.proplanti-section-accordion {
    border: 1px solid #eef1f2;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.proplanti-section-accordion:last-child {
    margin-bottom: 0;
}

/* Sprint 154 — o cabeçalho virou uma LINHA: o botão de toggle e, como irmão, o container de ações
   publicadas por um descendente (action bar do grid). O fundo mora na linha, não mais no botão, para
   as duas metades pintarem igual; o botão fica transparente e cresce (flex) ocupando o resto. */
.proplanti-section-accordion__header-row {
    display: flex;
    align-items: center;
    background: #fafbfb;
}

.proplanti-section-accordion--expanded > .proplanti-section-accordion__header-row {
    background: #eef6e7;
}

.proplanti-section-accordion__header-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    /* O padding à esquerda separa os ícones do badge, que o margin-left:auto do título encosta
       na borda direita do botão de toggle. */
    padding-left: 8px;
    padding-right: 10px;
}

.proplanti-section-accordion__header {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #243a44;
    text-align: left;
}

.proplanti-section-accordion__header:hover:not(.proplanti-section-accordion__header--disabled) {
    background: #f1f5f0;
}

.proplanti-section-accordion--expanded > .proplanti-section-accordion__header-row > .proplanti-section-accordion__header {
    color: #3f6a1f;
}

.proplanti-section-accordion__header--disabled {
    color: var(--proplanti-icons-gray, #7A909A);
    cursor: not-allowed;
    opacity: 0.7;
}

.proplanti-section-accordion__chevron {
    font-size: 18px;
    line-height: 1;
    flex: none;
    color: var(--proplanti-icons-gray, #7A909A);
}

.proplanti-section-accordion--expanded > .proplanti-section-accordion__header-row > .proplanti-section-accordion__header .proplanti-section-accordion__chevron {
    color: var(--proplanti-primary, #6FB839);
}

.proplanti-section-accordion__icon {
    font-size: 18px;
    line-height: 1;
    flex: none;
    color: var(--proplanti-primary, #6FB839);
}

.proplanti-section-accordion__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proplanti-section-accordion__badge {
    flex: none;
    margin-left: auto;
    /* Mesmo canto do chip do section-nav (6px) — os dois contadores são o mesmo componente. */
    border-radius: 6px;
    background: var(--proplanti-primary, #6FB839);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
}

.proplanti-section-accordion__body {
    padding: 20px 18px;
    border-top: 1px solid #eef1f2;
}

/* ── Altura do datagrid de RELAÇÃO dentro do section-nav (sprint 047) ──────────
   O ProplantiGrid usa Height="100%", mas nem o pane único (.proplanti-section-nav-pane,
   display:block) nem o corpo do accordion (.proplanti-section-accordion__body, só padding)
   dão altura definida — então o 100% não resolve: o grid renderiza todas as linhas e quem
   rola é o painel inteiro. As regras abaixo dão a altura certa em cada modo. Opt-in por
   :has(.proplanti-grid) — só seções de relação (que contêm um grid); seções de formulário
   ficam intactas.

   IMPORTANTE: dar altura só ao wrapper .proplanti-grid NÃO basta — o SfGrid real (.e-grid) não
   herda automaticamente o Height="100%" e mantém a própria altura (de conteúdo), então o grid
   não muda visualmente. É preciso forçar a altura no .e-grid também — mesmo aprendizado já
   aplicado em .grid-manutencao-de-lotes (ver acima: `.proplanti-grid, .e-grid { height:100% !important }`).

   No modo "exibir todas as seções" a altura é CALCULADA a partir da row height configurada do
   grid — o ProplantiGrid emite `--proplanti-grid-row-height` (= Options.RowHeight px, fallback 42)
   inline no .proplanti-grid; a altura final = (row height × nº de linhas) + chrome (cabeçalho +
   paginador + scrollbar). Chrome, teto e piso ficam em variáveis ajustáveis abaixo.

   O nº de linhas acompanha o CONTEÚDO: o grid também emite `--proplanti-grid-row-count` inline
   (contagem client-side — o CSS não tem como conhecê-la) e a altura usa contagem + 1 linha de
   folga, travada entre o piso e o teto. Sem a var — grid dirigido por adaptor, que não sabe a
   contagem antes do fetch — o fallback estoura o teto e o clamp devolve o teto, que é o
   comportamento fixo anterior.

   Linha EXPANDIDA (DetailTemplate): o detail não é uma linha do grid e não entra no clamp, então a
   seção precisa de uma reserva à parte — o grid emite `--proplanti-grid-detail-expanded` (nº de
   linhas abertas) e a altura soma essa contagem × `--proplanti-section-nav-grid-detail-height`, FORA
   do clamp (o teto de 10 linhas continua valendo só para as linhas). Sem nenhuma linha aberta a var
   não é emitida e o fallback 0 devolve exatamente a altura anterior. */
.proplanti-section-nav {
    /* Teto de linhas no modo "exibir todas as seções". */
    --proplanti-section-nav-grid-rows: 10;
    /* Piso: abaixo disso a seção fica menor que o próprio chrome do grid. */
    --proplanti-section-nav-grid-rows-min: 3;
    /* Altura fixa de cabeçalho + paginador + scrollbar do grid (≈ 35+55+20+10). */
    --proplanti-section-nav-grid-chrome: 120px;
    /* Reserva por linha com o DetailTemplate ABERTO (ex.: painel de descartes do lote na ficha de
       multiplicação). O detail nasce fora do cálculo de linhas — sem esta reserva a seção mantém a
       altura de antes e o painel expandido fica cortado, rolando por dentro do grid. */
    --proplanti-section-nav-grid-detail-height: 300px;
}

/* (1) Modo "exibir todas as seções": o grid de relação acompanha o conteúdo — contagem de linhas
   + 1 de folga, travada entre o piso (3) e o teto (10) —, com a altura derivada da row height REAL
   do grid. O wrapper recebe a altura calculada e o .e-grid é forçado a preenchê-la (rola
   internamente quando passa do teto). As vars --proplanti-grid-row-height e
   --proplanti-grid-row-count são lidas AQUI (no próprio .proplanti-grid, onde são emitidas
   inline); --rows/--rows-min/--chrome herdam do .proplanti-section-nav. */
.proplanti-section-nav__content--show-all
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid {
    height: calc(
        var(--proplanti-grid-row-height, 42px)
        * clamp(
            var(--proplanti-section-nav-grid-rows-min, 3),
            var(--proplanti-grid-row-count, 999) + 1,
            var(--proplanti-section-nav-grid-rows, 10)
        )
        + var(--proplanti-section-nav-grid-chrome, 120px)
        + var(--proplanti-grid-detail-expanded, 0)
        * var(--proplanti-section-nav-grid-detail-height, 300px)
    ) !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.proplanti-section-nav__content--show-all
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid > .e-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

/* (2) Modo seção única: o grid de relação ocupa 100% da altura da página de conteúdo, com
   scroll interno do grid (em vez de rolar o painel). O pane ativo vira flex-column de altura
   cheia e cada wrapper intermediário que contém o grid cresce/propaga como flex-column, de
   modo que o grid preencha o espaço restante independentemente da profundidade do aninhamento.
   Um eventual conteúdo irmão (ex.: form acima do grid) mantém a altura natural; o grid fica
   com o resto. */
/* O :not(:has(.proplanti-section-nav--embutido)) exclui os panes de FORMULÁRIO que apenas
   embutem um nav com grid no rodapé (ex.: Produto → Estoque). Ali o grid não é o conteúdo
   do pane: forçar height:100% no pane e flex:1 1 0 na cadeia até o grid faz os blocos SEM
   grid (Identificação, Financeiro e contábil, rodapé de Estoque mínimo) manterem a altura
   natural e estourarem o container, que — combinado com o overflow:hidden da delegação de
   rolagem acima — cortava o formulário em vez de rolá-lo. Nesses panes a altura volta a ser
   natural e o grid embutido fica com o teto de N linhas do modo "exibir tudo". */
.proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  .proplanti-section-nav-pane--active:has(.proplanti-grid):not(:has(.proplanti-section-nav--embutido)) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  .proplanti-section-nav-pane--active:has(.proplanti-grid):not(:has(.proplanti-section-nav--embutido)) *:has(.proplanti-grid) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
}

.proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  .proplanti-section-nav-pane--active:has(.proplanti-grid):not(:has(.proplanti-section-nav--embutido)) .proplanti-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100% !important;
}
.proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  .proplanti-section-nav-pane--active:has(.proplanti-grid):not(:has(.proplanti-section-nav--embutido)) .proplanti-grid > .e-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

/* ── Seção ÚNICA (section-nav sem coluna de navegação): grid preenche a altura toda ──
   Quando há uma só seção visível, o host esconde a navegação (não renderiza o .__list) e força
   o modo "exibir tudo" — a seção vira um accordion sempre expandido. Aí NÃO há grids empilhados
   para limitar, então o teto de N linhas que o modo "exibir tudo" aplica ao grid deixa um vão
   embaixo: o conteúdo deve ocupar toda a altura do drawer. As regras abaixo propagam a altura via
   flex pelo corpo do accordion até o grid (sobrepondo o teto calc()). Opt-in por
   :not(:has(> .proplanti-section-nav__list)) — só o caso de seção única, sem afetar o "exibir
   tudo" real (várias seções), onde o teto por grid continua valendo. */
.proplanti-section-nav:not(:has(> .proplanti-section-nav__list)) .proplanti-section-nav__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.proplanti-section-nav:not(:has(> .proplanti-section-nav__list)) .proplanti-section-accordion {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.proplanti-section-nav:not(:has(> .proplanti-section-nav__list)) .proplanti-section-accordion__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* PlanoSideBar → Permissões: a busca pode reduzir um módulo a um ÚNICO grupo, forçando o
   sub-nav de grupos ao modo seção-única (show-all sem coluna de navegação). Aí a regra acima dá
   ao corpo do accordion flex:1 1 auto + min-height:0 SEM overflow — pensada para um grid de
   relação, que rola internamente. Os cards de permissão não rolam sozinhos, então o conteúdo
   ficava cortado embaixo sem barra de rolagem. Como o corpo já tem altura limitada (flex), basta
   deixá-lo rolar. Opt-in por .proplanti-section-nav--permissoes (só a árvore de permissões) e
   :not(:has(.proplanti-grid)) para não interferir no caminho do grid. */
.proplanti-section-nav--permissoes
  .proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:not(:has(.proplanti-grid)) {
    overflow-y: auto;
}

/* Generalização do fix acima para QUALQUER seção única (show-all sem coluna de navegação) cujo
   corpo NÃO contém grid: a regra de seção única (flex:1 1 auto + min-height:0) limita a altura do
   corpo, mas conteúdo de cards não rola sozinho — ex.: LINHA DO TEMPO de logs (ProplantiLogsSideBar),
   árvore de permissões. Sem isto, os cards excedentes ficam cortados embaixo, sem barra de rolagem
   (o accordion tem overflow:hidden e encolhe para caber). Deixando o corpo rolar, o cabeçalho do
   accordion fica fixo e os cards rolam. Seguro: sem excesso não aparece barra; o caminho com grid
   (:has(.proplanti-grid)) continua com o grid rolando internamente. */
.proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:not(:has(.proplanti-grid)) {
    overflow-y: auto;
}

/* Wrappers intermediários entre o corpo e o grid (div, <form>) também crescem. */
.proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) *:has(.proplanti-grid) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* O grid preenche a altura, sobrepondo o teto de N linhas do modo "exibir tudo". */
.proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100% !important;
}

.proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid > .e-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

/* ── Section-nav ANINHADO com seção única (ex.: "Lotes de insumo" dentro do bloco de depósito do
   accordion de estoque) ── As regras de seção única acima assumem uma sidebar de TELA CHEIA, onde
   o height:100% resolve contra a altura do drawer. Num section-nav aninhado (dentro do
   .proplanti-section-accordion__body de OUTRO section-nav) a altura dos ancestrais é de conteúdo:
   o flex:1 1 0 + height:100% colapsa a cadeia toda para 0px e o grid (com linhas!) fica invisível.
   Restaura o fluxo natural no caso aninhado: wrappers e .proplanti-grid com altura de conteúdo; o
   .e-grid dimensiona-se sozinho (regra por instância #id do ProplantiGrid: min-height 80px +
   FitHeightRowCount). Especificidade maior (dois .proplanti-section-nav) + posição posterior
   vencem tanto as regras de seção única quanto o teto calc() do modo "exibir tudo". */
.proplanti-section-nav .proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) *:has(.proplanti-grid),
.proplanti-section-nav .proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid {
    display: block;
    flex: none;
    min-height: 0;
    height: auto !important;
}

.proplanti-section-nav .proplanti-section-nav:not(:has(> .proplanti-section-nav__list))
  .proplanti-section-accordion__body:has(.proplanti-grid) .proplanti-grid > .e-grid {
    flex: none;
}

/* ── Section-nav de DETALHES DA ASSINATURA (ClienteSideBar) aninhado no corpo do accordion ──
   Este section-nav aninhado TEM coluna de navegação própria (__list) — então as regras de
   "seção única aninhada" acima (que restauram o fluxo natural) NÃO o alcançam, e a cadeia de
   flex forçado das regras gerais (:has(.proplanti-grid) → grid height:100%) cortava o conteúdo
   sem criar rolagem. Aplica aqui o MESMO padrão de fluxo natural: o painel de conteúdo e o grid
   da seção ativa crescem na altura de conteúdo (sem rolagem interna própria), e o painel rolável
   do drawer (ancestral, overflow-y:auto) rola tudo — em vez de cortar. */
.proplanti-section-nav--assinatura-detalhes {
    height: auto;
    min-height: 0;
}

.proplanti-section-nav--assinatura-detalhes > .proplanti-section-nav__content {
    overflow: visible;
    height: auto;
}

.proplanti-section-nav--assinatura-detalhes
  .proplanti-section-nav-pane--active:has(.proplanti-grid) *:has(.proplanti-grid),
.proplanti-section-nav--assinatura-detalhes
  .proplanti-section-nav-pane--active:has(.proplanti-grid) .proplanti-grid {
    display: block;
    flex: none;
    min-height: 0;
    height: auto !important;
}

.proplanti-section-nav--assinatura-detalhes
  .proplanti-section-nav-pane--active:has(.proplanti-grid) .proplanti-grid > .e-grid {
    flex: none;
    height: auto !important;
}

/* …mas fluir em altura natural NÃO basta. Com a assinatura já como seção de 1º nível (flatten do
   ClienteSideBar), no modo normal ela é um PANE e no "exibir tudo" um corpo de accordion; em ambos
   o conteúdo (campos + nav aninhado inteiro) excede a área e NENHUM ancestral rolava — a regra que
   delega rolagem ao conteúdo mais profundo (:has(pane .section-nav)) assume que o filho rola, mas
   o nav aninhado flui em altura natural. Pior: as regras de "grid-fill"
   (.pane--active:has(.proplanti-grid) *:has(.proplanti-grid) → flex:1 1 0 + column) VAZAM sobre o
   nav aninhado inteiro (que contém um grid lá no fundo) e o COLAPSAM (altura 0). Reconciliação:
   (a) o container da assinatura (pane OU corpo do accordion) que abriga um nav aninhado COM coluna
   própria vira o container de rolagem; (b) o nav aninhado é forçado a fluir em altura natural, como
   linha (coluna de nav | conteúdo), desfazendo o grid-fill vazado. Opt-in por :has de nav aninhado
   multi-seção — não afeta o caso de seção única aninhada (ex.: "Lotes de insumo"), cujo grid rola
   sozinho. (sprint 095) */
.proplanti-section-nav-pane--active:has(.proplanti-section-nav > .proplanti-section-nav__list),
.proplanti-section-accordion__body:has(.proplanti-section-nav > .proplanti-section-nav__list) {
    overflow-y: auto;
}

.proplanti-section-nav-pane--active:has(.proplanti-section-nav > .proplanti-section-nav__list) .proplanti-section-nav--assinatura-detalhes,
.proplanti-section-accordion__body:has(.proplanti-section-nav > .proplanti-section-nav__list) .proplanti-section-nav--assinatura-detalhes {
    flex: none !important;
    height: auto !important;
    min-height: 0;
    display: flex !important;
    flex-direction: row !important;
}

/* …e a reconciliação acima ainda não basta quando esse nav aninhado está em "exibir todas as
   seções". O grid-fill do pane ativo desce por `*:has(.proplanti-grid)` sem fronteira de nav e
   alcança cada accordion do nav interno: os que contêm grid viram itens flex de base zero e, numa
   coluna de altura de conteúdo, colapsam — com o overflow escondido do card sobra só a linha das
   bordas. Era o que fazia sumir Produtos/CNPJs/Usuários ao expandi-las na assinatura do
   ClienteSideBar. Aqui as seções aninhadas voltam ao fluxo natural (crescem com o conteúdo; quem
   rola é o painel do drawer). O `!important` é obrigatório: o seletor vazado tem seis classes e
   vence este por especificidade. O guard restaura só os containers da seção, nunca o próprio
   .proplanti-grid: a altura dele segue com as regras de grid do section-nav. Opt-in por nav
   aninhado COM coluna própria — o caso de seção única já é tratado acima. */
.proplanti-section-nav-pane--active
  .proplanti-section-nav:has(> .proplanti-section-nav__list) > .proplanti-section-nav__content--show-all
  .proplanti-section-accordion,
.proplanti-section-nav-pane--active
  .proplanti-section-nav:has(> .proplanti-section-nav__list) > .proplanti-section-nav__content--show-all
  .proplanti-section-accordion__body,
.proplanti-section-nav-pane--active
  .proplanti-section-nav:has(> .proplanti-section-nav__list) > .proplanti-section-nav__content--show-all
  .proplanti-section-accordion__body *:has(.proplanti-grid) {
    display: block !important;
    flex: none !important;
    min-height: 0;
    height: auto !important;
}

/* ── Nav ANINHADO da assinatura: seção de GRID ativa em modo menu preenche a página ──
   O fluxo natural da reconciliação acima acerta o pane de formulário (Detalhes) e o "exibir
   tudo": quem rola é o pane externo. Mas numa seção de RELAÇÃO (Produtos, CNPJs, Usuários, …)
   o grid — que emite height:100% (IsInsideAccordion) — degrada para a altura de conteúdo e
   deixa um vão até o rodapé. Só quando a seção ativa do nav interno contém um grid (e o nav
   interno não está em "exibir tudo"), a cadeia de altura é restabelecida de ponta a ponta:
   o pane externo deixa de rolar e vira coluna flex de altura cheia; o nav interno volta a
   flex:1 (a linha coluna-de-nav | conteúdo da reconciliação permanece); o __content interno
   prende o overflow; e o pane interno + wrappers até o grid re-entram na cadeia flex (mesmo
   padrão da regra geral de pane com grid), com o grid rolando por dentro. Os !important e a
   posição APÓS a reconciliação são obrigatórios: as regras acima também usam !important e o
   empate se decide por ordem. */
/* ATENÇÃO: dentro dos :has() abaixo a condição "pane ativo com grid" é expressa como
   DESCENDENTE (`.proplanti-section-nav-pane--active .proplanti-grid`) — `:has()` aninhado em
   `:has()` é inválido pela spec e o navegador descarta o seletor inteiro em silêncio. */
.proplanti-section-nav-pane--active:has(
    > .proplanti-section-nav--assinatura-detalhes
    > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
    > .proplanti-section-nav-pane--active .proplanti-grid
) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: hidden;
}

.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes:has(
    > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
    > .proplanti-section-nav-pane--active .proplanti-grid
) {
    flex: 1 1 auto !important;
    min-height: 0;
}

.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes
  > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all):has(
    > .proplanti-section-nav-pane--active .proplanti-grid
) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes
  > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  > .proplanti-section-nav-pane--active:has(.proplanti-grid) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* Wrappers entre o pane interno e o grid (a <div> da seção); a toolbar de ações da seção não
   contém grid e mantém a altura natural. */
.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes
  > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  > .proplanti-section-nav-pane--active:has(.proplanti-grid) *:has(.proplanti-grid) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0;
    height: auto !important;
}

.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes
  > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  > .proplanti-section-nav-pane--active:has(.proplanti-grid) .proplanti-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0;
    height: 100% !important;
}

.proplanti-section-nav-pane--active
  > .proplanti-section-nav--assinatura-detalhes
  > .proplanti-section-nav__content:not(.proplanti-section-nav__content--show-all)
  > .proplanti-section-nav-pane--active:has(.proplanti-grid) .proplanti-grid > .e-grid {
    flex: 1 1 auto !important;
    min-height: 0;
    height: 100% !important;
}

/* Barra de ações no topo do conteúdo de uma seção: o botão "Novo" (ícone+texto) fica aqui,
   dentro do conteúdo, em vez de sobreposto ao item do menu lateral. */
.proplanti-section-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* ============================================================================
   Sprint 041 — Drawer de filtros: chips de filtro ativo, label de seção
   uppercase e seletor pill. Classes utilitárias OPT-IN (aplicadas pelos
   componentes/telas de filtro). Cores do chip fiéis ao mockup:
   verde-claro #eef6e7 · borda #d4e8c2 · texto #3f6a1f.
   ============================================================================ */

/* Linha de chips de filtro ativo, exibida acima do grid. */
.proplanti-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0 10px;
}

/* Rótulo "Ativos:". */
.proplanti-filter-chips-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--proplanti-icons-gray, #7A909A);
}

/* Pill de um filtro ativo. */
.proplanti-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 10px;
    border: 1px solid #d4e8c2;
    border-radius: 13px;
    background: #eef6e7;
    color: #3f6a1f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.proplanti-filter-chip-text {
    display: inline-block;
}

/* Botão "×" de remover o chip. */
.proplanti-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #3f6a1f;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.proplanti-filter-chip-remove:hover {
    background: #d4e8c2;
}

/* Link "Limpar tudo". */
.proplanti-filter-chips-clear {
    border: none;
    background: transparent;
    padding: 0 4px;
    color: var(--proplanti-blue-spotlight, #2EA9DD);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.proplanti-filter-chips-clear:hover {
    text-decoration: underline;
}

/* Label de seção do drawer de filtros, em CAIXA ALTA. */
.proplanti-filter-section-label {
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--proplanti-icons-gray, #7A909A);
}

/* Seletor estilo pill (ex.: tipo/multisseleção): pill clicável. */
.proplanti-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--proplanti-border-box, #BFD5DF);
    border-radius: 15px;
    background: #fff;
    color: var(--proplanti-text-dark, #243A44);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.proplanti-filter-pill:hover {
    border-color: var(--proplanti-primary, #6FB839);
}

/* Pill selecionado/ativo: fundo verde-claro, borda e texto verdes. */
.proplanti-filter-pill--active {
    border-color: #d4e8c2;
    background: #eef6e7;
    color: #3f6a1f;
    font-weight: 600;
}

/* Corpo do drawer de filtros: respiro próprio (o accordion antigo trazia o seu;
   agora a seção precisa do dela para os campos não colarem nas bordas). */
.proplanti-sidebar-filtros .proplanti-filtros-section {
    padding: 16px 20px;
}

/* Rodapé do drawer de filtros, fiel ao mockup: Aplicar (verde) ocupa a maior
   parte da largura, Limpar fica ao lado como secundário, ambos com respiro das
   bordas. Estilos globais (não isolados) porque o footer é renderizado por um
   componente-filho; o ancestral `.proplanti-sidebar-filtros` é a raiz do drawer. */
.proplanti-sidebar-filtros .sideBarFooter {
    gap: 10px;
    padding: 16px 20px;
}

.proplanti-sidebar-filtros .sideBarFooter .mp-button {
    flex: 1 1 0;
    justify-content: center;
    margin: 0;
}

.proplanti-sidebar-filtros .sideBarFooter .mp-primary {
    flex: 2 1 0;
}

/* =====================================================================
   Dashboard V3 (sprint 054) — base de widgets do zero (sem lib de UI).
   CSS estrutural no app.css GLOBAL: o scoped do componente-filho não
   alcança os filhos renderizados pelos hosts. Cores via tokens --dashv3-*.
   ===================================================================== */

.dashv3-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--dashv3-page-bg);
    font-family: Inter, Helvetica, Arial, sans-serif;
    color: var(--dashv3-text-strong);
    -webkit-font-smoothing: antialiased;
}

/* Empty state: usuário sem permissão de dashboard — logo completa (ícone + texto) no centro. */
.dashv3-empty-permissions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 120px);
    height: 100%;
    padding: 32px;
    background: var(--dashv3-page-bg, #F4F6F6);
}

/* Variante usada quando o card "Funcionalidades para explorar" divide a página com a logo: sem os
   100vh, o card fica visível sem rolagem. */
.dashv3-empty-permissions--compacta {
    min-height: 0;
    height: auto;
    padding: 48px 32px;
}

.dashv3-empty-permissions__logo {
    display: block;
    width: min(420px, 70vw);
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.dashv3-num {
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    white-space: nowrap;
}

/* Sprint 076 — Task-04: valor das barras horizontais (ex.: "Estoque por grupo de produto"). Mesmo com o
   texto abreviado ("2,04 bi"), o valor nunca encolhe nem quebra a linha: ocupa só o espaço necessário,
   alinhado à direita, com um mínimo reservado; a trilha da barra fica com o flex restante (min-width:0). */
.dashv3-horizontal-bar__value {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: right;
    white-space: nowrap;
}

/* ---- header escuro ---- */
.dashv3-header {
    flex: none;
    background: var(--dashv3-header-bg);
    z-index: 5;
    /* Sangra para fora do padding horizontal do .main-content (--proplanti-body-padding),
       encostando na sidebar à esquerda e na borda da viewport à direita — sem o vão claro
       que sobrava dos dois lados entre o menu e o header. O conteúdo abaixo mantém seu
       próprio respiro interno. */
    margin-left: calc(-1 * var(--proplanti-body-padding));
    margin-right: calc(-1 * var(--proplanti-body-padding));
}

.dashv3-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 28px 9px 28px;
    flex-wrap: wrap;
}

.dashv3-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dashv3-brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--dashv3-green), var(--dashv3-green-darkest));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(111, 184, 57, .35);
    color: #fff;
    font-size: 18px;
}

.dashv3-brand__name {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.dashv3-brand__title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

.dashv3-brand__subtitle {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--dashv3-green);
    text-transform: uppercase;
}

.dashv3-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashv3-period {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    padding: 8px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #EAF1F2;
    cursor: pointer;
}

.dashv3-period:hover {
    background: rgba(255, 255, 255, .16);
}

/* Sprint 054 — Task-08: seletor de período (dropdown próprio). O botão reusa .dashv3-period; o menu é
   posicionado abaixo do botão, ancorado pelo wrapper relativo. */
.dashv3-period-selector {
    position: relative;
}

.dashv3-period-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.dashv3-period-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 180px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #E1E7E9;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 30, 36, .22);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashv3-period-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #243A44;
    text-align: left;
    cursor: pointer;
}

.dashv3-period-menu__item:hover {
    background: #F4F6F6;
}

.dashv3-period-menu__item--active {
    color: #59932E;
    background: #EFF6E8;
}

.dashv3-period-menu__item--active:hover {
    background: #E7F1DB;
}

.dashv3-period-menu__item .bx-check {
    font-size: 16px;
}

.dashv3-personalizar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #EAF1F2;
    cursor: pointer;
}

.dashv3-personalizar:hover {
    background: rgba(255, 255, 255, .16);
}

.dashv3-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dashv3-green), var(--dashv3-green-darkest));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    margin-left: 2px;
}

/* ---- abas próprias ---- */
.dashv3-tabs {
    display: flex;
    gap: 0;
    padding: 0 28px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.dashv3-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 22px;
    padding: 9px 2px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dashv3-tab-text);
    cursor: pointer;
    white-space: nowrap;
}

.dashv3-tab:hover {
    color: #DCE7EA;
}

.dashv3-tab.dashv3-tab--active {
    color: var(--dashv3-tab-active);
    border-bottom-color: var(--dashv3-tab-active-border);
}

/* ---- área de conteúdo ---- */
/* Sprint 076 — Task-05: coluna flex com gap uniforme entre TODAS as seções do dashboard V3 (fileiras
   `*-row` E cards full-width soltos). Antes o respiro vertical vinha só do `margin-bottom` das fileiras,
   então os cards full-width emitidos direto no ChildContent (ex.: "Produtos abaixo do estoque mínimo",
   "Lotes em atraso") encostavam no bloco seguinte. O gap do container cobre qualquer filho direto, sem
   regra por-card e sem reintroduzir o problema ao adicionar novos cards full-width. */
.dashv3-content {
    flex: 1;
    overflow-y: auto;
    padding: 26px 28px 60px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashv3-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Sprint 076 — Task-05: o respiro entre as seções agora é o `gap` do `.dashv3-content` (flex column);
       um pouco de margem extra aqui mantém o título mais distante da primeira fileira de KPIs. */
    margin-bottom: 2px;
}

.dashv3-page-head__titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 160px;
}

.dashv3-page-title {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dashv3-text-strong);
    margin: 0;
}

.dashv3-page-subtitle {
    font-size: 13px;
    color: var(--dashv3-text-muted);
    font-weight: 500;
}

/* ---- card base ---- */
.dashv3-card {
    background: var(--dashv3-card-bg);
    border: 1px solid var(--dashv3-card-border);
    border-radius: var(--dashv3-card-radius);
    padding: 20px 22px;
    box-shadow: var(--dashv3-card-shadow);
}

.dashv3-card--amber {
    border-color: var(--dashv3-amber-card-border);
}

.dashv3-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dashv3-card__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashv3-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dashv3-text-strong);
}

.dashv3-card__subtitle {
    font-size: 12px;
    color: var(--dashv3-text-muted-2);
}

.dashv3-card__badge {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--dashv3-amber);
    background: var(--dashv3-amber-bg);
    padding: 3px 9px;
    border-radius: 20px;
}

/* ---- Sprint 067 — botão (i) de informações do card ---- */
.dashv3-card__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.dashv3-kpi__head-actions {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex: none;
}

.dashv3-card__info-btn,
.dashv3-card__close-btn {
    flex: none;
    background: transparent;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--dashv3-text-muted-2);
    transition: background .15s ease, color .15s ease;
}

.dashv3-card__info-btn:hover,
.dashv3-card__close-btn:hover {
    background: #F1F4F4;
    color: var(--dashv3-text-strong);
}

/* ---- Sprint 067 — corpo da sidebar de informações do card ---- */
.dashv3-card-info__desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dashv3-text-muted);
}

.dashv3-card-info__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashv3-card-info__line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dashv3-text-strong);
}

.dashv3-card-info__line > i {
    flex: none;
    font-size: 16px;
    line-height: 1.3;
    color: #59932E;
}

.dashv3-card-info__broaden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* ---- KPI card ---- */
.dashv3-kpi {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 124px;
    padding: 19px 21px;
}

.dashv3-kpi__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dashv3-kpi__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dashv3-text-muted);
}

.dashv3-kpi__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}

.dashv3-kpi__value {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dashv3-text-strong);
}

.dashv3-kpi__foot {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
}

.dashv3-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
}

.dashv3-kpi__delta--pill {
    background: var(--dashv3-amber-bg);
    padding: 2px 8px;
    border-radius: 20px;
}

.dashv3-kpi__sub {
    color: var(--dashv3-text-muted-2);
}

/* ---- Sprint 068 — skeleton de carregamento dos cards/KPIs V3 ---- */
/* Blocos-fantasma com shimmer no lugar do conteúdo enquanto o ViewModel carrega (primeira carga). */
.dashv3-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashv3-skeleton__bar {
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--dashv3-track) 25%, #F6F8F9 37%, var(--dashv3-track) 63%);
    background-size: 400% 100%;
    animation: dashv3-skeleton-shimmer 1.4s ease infinite;
}

.dashv3-skeleton__bar--title { width: 42%; height: 15px; }
.dashv3-skeleton__bar--value { width: 55%; height: 30px; border-radius: 8px; }
.dashv3-skeleton__bar--line { width: 100%; }
.dashv3-skeleton__bar--short { width: 70%; }

/* KPI: rótulo curto + valor grande + rodapé curto, espelhando a estrutura do card. */
.dashv3-kpi .dashv3-skeleton { gap: 9px; }

@keyframes dashv3-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ---- Sprint 076 — Task-01: empty-state dos cards/KPIs V3 (sem dados após carregar) ---- */
/* Mensagem explicativa centralizada no lugar do conteúdo quando a coleção/valor vem vazio. */
.dashv3-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 26px 16px;
    min-height: 96px;
}

.dashv3-empty__icon {
    font-size: 30px;
    line-height: 1;
    color: var(--dashv3-text-muted-2);
    margin-bottom: 2px;
}

.dashv3-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dashv3-text-strong);
}

.dashv3-empty__desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dashv3-text-muted);
    max-width: 280px;
}

/* KPI é mais compacto: ícone/título menores e padding reduzido para caber no card de KPI. */
.dashv3-empty--kpi {
    padding: 6px 4px;
    min-height: 0;
    gap: 4px;
}

.dashv3-empty--kpi .dashv3-empty__icon { font-size: 24px; }
.dashv3-empty--kpi .dashv3-empty__title { font-size: 13px; }
.dashv3-empty--kpi .dashv3-empty__desc { font-size: 11.5px; }

/* ---- tabela própria ---- */
.dashv3-table {
    width: 100%;
    border-collapse: collapse;
}

.dashv3-table thead tr {
    font-size: 11.5px;
    color: var(--dashv3-text-muted-2);
    text-align: left;
    font-weight: 600;
}

.dashv3-table th {
    padding: 0 0 10px 0;
    font-weight: 600;
}

.dashv3-table tbody {
    font-size: 13.5px;
    color: var(--dashv3-text-secondary);
}

.dashv3-table tbody tr {
    border-top: 1px solid var(--dashv3-track);
}

.dashv3-table td {
    padding: 12px 0;
}

.dashv3-table .dashv3-table__name {
    font-weight: 600;
}

.dashv3-table .dashv3-num-cell {
    text-align: right;
}

.dashv3-table .dashv3-cell-muted {
    color: var(--dashv3-text-muted-2);
}

.dashv3-table .dashv3-cell-error {
    color: var(--dashv3-error);
    font-weight: 700;
}

.dashv3-table .dashv3-cell-amber {
    color: var(--dashv3-amber);
    font-weight: 700;
}

/* barra de cobertura/severidade na célula */
.dashv3-coverage {
    height: 7px;
    background: var(--dashv3-track);
    border-radius: 4px;
    overflow: hidden;
}

.dashv3-coverage__fill {
    height: 100%;
    border-radius: 4px;
}

/* badges de status na tabela */
.dashv3-status {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}

.dashv3-status--success {
    color: var(--dashv3-green-dark);
    background: var(--dashv3-success-bg);
}

.dashv3-status--amber {
    color: var(--dashv3-amber);
    background: var(--dashv3-amber-bg);
}

.dashv3-status--error {
    color: var(--dashv3-error);
    background: var(--dashv3-error-bg);
}

.dashv3-status--neutral {
    color: var(--dashv3-text-neutral-dark);
    background: var(--dashv3-page-bg);
}

/* ---- switch (toggle) ---- */
.dashv3-switch {
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    position: relative;
    background: var(--dashv3-switch-off);
    transition: background .15s;
    padding: 0;
}

.dashv3-switch.dashv3-switch--on {
    background: var(--dashv3-switch-on);
}

.dashv3-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s;
}

.dashv3-switch.dashv3-switch--on .dashv3-switch__knob {
    transform: translateX(16px);
}

/* ---- chart card legenda ---- */
.dashv3-legend {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--dashv3-text-muted);
    font-weight: 600;
    flex-wrap: wrap;
}

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

.dashv3-legend__swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.dashv3-legend__swatch--dotted {
    height: 0;
    border-top: 3px dotted var(--dashv3-blue);
}

.dashv3-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.dashv3-chart-svg {
    display: block;
    width: 100%;
    overflow: visible;
}

/* ---- dashboard Início (Task-01): grids de layout e elementos da tela ---- */

/* Sprint 076 — Task-05: o respiro vertical entre seções vem agora do `gap` do `.dashv3-content`
   (flex column), que cobre qualquer filho direto — fileiras `*-row` E cards full-width soltos. Por isso as
   fileiras NÃO declaram mais `margin-bottom`: sob flex a margem SOMARIA ao gap (margens não colapsam em
   flex) e dobraria o respiro para 36px. O gap do container é a única fonte de espaçamento. */

/* linha de KPIs: auto-fit minmax(216px, 1fr) */
.dashv3-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 18px;
}

/* linha de gráficos: 1.5fr / 1fr (colapsa em 1 coluna em telas estreitas) */
.dashv3-chart-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}

@media (max-width: 880px) {
    .dashv3-chart-row {
        grid-template-columns: 1fr;
    }
}

/* Sprint 054 — Task-03: dashboard Produção de lotes
   linha de KPIs em 4 colunas fixas (repeat(4,1fr)); colapsa em telas estreitas */
.dashv3-kpi-row--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Sprint 066 — Task-05: linha de KPIs do Estoque em 3 colunas (Giro de estoque removido) */
.dashv3-kpi-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Sprint 066 — Task-02: linha de KPIs da Produção em 5 colunas (atraso desdobrado em estágio + plantio) */
.dashv3-kpi-row--5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Sprint 076 — Task-03: linha de KPIs da Produção em 6 colunas (+ "Lotes/produtos p/ venda") */
.dashv3-kpi-row--6 {
    grid-template-columns: repeat(6, 1fr);
}

/* linhas de gráficos da Produção: 1.4fr/1fr (ocupação+funil) e 1fr/1.2fr (descarte+tabela) */
/* Sprint 076 — Task-05: sem `margin-bottom` (respiro = gap do `.dashv3-content`). */
.dashv3-prod-row {
    display: grid;
    gap: 18px;
}

.dashv3-prod-row--occ {
    grid-template-columns: 1.4fr 1fr;
}

.dashv3-prod-row--desc {
    grid-template-columns: 1fr 1.2fr;
}

@media (max-width: 1024px) {
    .dashv3-kpi-row--4,
    .dashv3-kpi-row--3,
    .dashv3-kpi-row--5,
    .dashv3-kpi-row--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    .dashv3-prod-row--occ,
    .dashv3-prod-row--desc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .dashv3-kpi-row--4,
    .dashv3-kpi-row--3,
    .dashv3-kpi-row--5,
    .dashv3-kpi-row--6 {
        grid-template-columns: 1fr;
    }
}

/* KPI card de alerta (âmbar): borda âmbar + valor âmbar (ex.: "Lotes em atraso") */
.dashv3-kpi--amber {
    border-color: var(--dashv3-amber-card-border);
}

.dashv3-kpi--amber .dashv3-kpi__value {
    color: var(--dashv3-amber);
}

.dashv3-kpi--amber .dashv3-kpi__icon {
    background: var(--dashv3-amber-bg);
    color: var(--dashv3-amber);
}

/* Sprint 054 — Task-04: dashboard Comercial
   linha 1.3fr/1fr (vendas por produto + funil); colapsa em coluna única em telas estreitas */
/* Sprint 076 — Task-05: sem `margin-bottom` (respiro = gap do `.dashv3-content`). */
.dashv3-com-row {
    display: grid;
    gap: 18px;
}

.dashv3-com-row--vendas {
    grid-template-columns: 1.3fr 1fr;
}

@media (max-width: 880px) {
    .dashv3-com-row--vendas {
        grid-template-columns: 1fr;
    }
}

/* Sprint 054 — Task-06: dashboard Estoque
   linha 1fr/1fr (estoque por categoria + entradas vs. saídas); colapsa em coluna única em telas estreitas */
/* Sprint 076 — Task-05: sem `margin-bottom` (respiro = gap do `.dashv3-content`). */
.dashv3-est-row {
    display: grid;
    gap: 18px;
}

.dashv3-est-row--charts {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 880px) {
    .dashv3-est-row--charts {
        grid-template-columns: 1fr;
    }
}

/* Funil de vendas (barras afuniladas centralizadas) — barra centralizada de largura variável,
   rótulo + valor sobre a barra (HTML/CSS, sem lib de chart) */
.dashv3-funnel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashv3-funnel__row {
    display: flex;
    justify-content: center;
}

.dashv3-funnel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    box-sizing: border-box;
    min-width: 0;
}

.dashv3-funnel__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashv3-funnel__value {
    font-weight: 700;
}

/* Badge de status da tabela "Pedidos recentes" (texto + fundo claro por situação) */
.dashv3-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Sprint 066 — badge neutro: situação dos pedidos recentes vem como descrição do backend (D9),
   sem mapeamento de cor por enum; usa o cinza padrão dos tokens. */
.dashv3-status-badge--neutral {
    color: var(--dashv3-text-secondary);
    background: var(--dashv3-track);
}

/* swatch sólido (linha do realizado) da legenda */
.dashv3-legend__swatch--line {
    background: var(--dashv3-green-darkest);
}

/* link de ação no header do card (ex.: "Ver estoque →") */
.dashv3-card-link {
    background: none;
    border: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dashv3-green);
    cursor: pointer;
    padding: 0;
}

.dashv3-card-link:hover {
    text-decoration: underline;
}

/* ---- card "Funcionalidades para explorar": grade de tiles (RF-014/RF-024) ---- */
.dashv3-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.dashv3-feature-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--dashv3-card-border);
    border-radius: var(--dashv3-card-radius);
    padding: 16px;
}

.dashv3-feature-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashv3-feature-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dashv3-green-icon-bg);
    flex: none;
}

.dashv3-feature-tile__icon > i {
    font-size: 20px;
    color: var(--dashv3-green-darkest);
}

.dashv3-feature-tile__pill {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--dashv3-amber);
    background: var(--dashv3-amber-bg);
    padding: 3px 9px;
    border-radius: 20px;
}

.dashv3-feature-tile__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
}

.dashv3-feature-tile__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dashv3-text-strong);
}

.dashv3-feature-tile__desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dashv3-text-muted);
}

.dashv3-feature-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
}

.dashv3-feature-tile__cta > i {
    font-size: 16px;
    line-height: 1;
}

/* tile informativo de upgrade: só quando o card "Amplie seu plano" não está ao lado */
.dashv3-feature-tile--upgrade {
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    border-style: dashed;
}

.dashv3-feature-tile--upgrade > i {
    font-size: 24px;
    color: var(--dashv3-text-muted-2);
}

/* déficit colorido por severidade (cor vem inline do builder) */
.dashv3-table .dashv3-cell-deficit {
    font-weight: 700;
}

/* Sprint 054 — Task-05: dashboard Faturamento
   linha 1.5fr/1fr (realizado×meta + donut) e 1fr/1.3fr (a receber + tabela vencidas);
   colapsam em coluna única em telas estreitas */
/* Sprint 076 — Task-05: sem `margin-bottom` (respiro = gap do `.dashv3-content`). */
.dashv3-fat-row {
    display: grid;
    gap: 18px;
}

.dashv3-fat-row--meta {
    grid-template-columns: 1.5fr 1fr;
}

.dashv3-fat-row--receber {
    grid-template-columns: 1fr 1.3fr;
}

@media (max-width: 880px) {
    .dashv3-fat-row--meta,
    .dashv3-fat-row--receber {
        grid-template-columns: 1fr;
    }
}

/* KPI "Inadimplência": borda âmbar (atenção do card) + valor VERMELHO (severidade) + ícone vermelho.
   Diferente do --amber (valor âmbar): aqui o card alerta com a moldura mas o número é de erro. */
.dashv3-kpi--amber-red {
    border-color: var(--dashv3-amber-card-border);
}

.dashv3-kpi--amber-red .dashv3-kpi__value {
    color: var(--dashv3-error);
}

.dashv3-kpi--amber-red .dashv3-kpi__icon {
    background: var(--dashv3-error-bg);
    color: var(--dashv3-error);
}

/* KPI "Faturamento (mês)" com a barra de progresso da meta embaixo do card.
   O wrapper mantém o card e a barra alinhados na mesma célula do grid de KPIs. */
.dashv3-kpi-with-bar {
    display: flex;
    flex-direction: column;
}

.dashv3-kpi-with-bar > .dashv3-kpi {
    flex: 1;
}

.dashv3-kpi-meta-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 6px;
    background: var(--dashv3-track, #EEF1F3);
    overflow: hidden;
}

.dashv3-kpi-meta-bar__fill {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--dashv3-green-darkest, #59932E), var(--dashv3-green, #6FB839));
    transition: width .3s ease;
}

/* ===================================================================== */
/* Drawer Personalizar (Task-02) — overlay + painel 380px + linhas (PersRow) */
/* Sempre montado: a abertura só alterna a classe --open (sem corrida de mount). */
/* ===================================================================== */

.dashv3-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 40;
    visibility: hidden;
    pointer-events: none;
}

.dashv3-drawer-root.dashv3-drawer-root--open {
    visibility: visible;
    pointer-events: auto;
}

.dashv3-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 34, 30, .32);
    opacity: 0;
    transition: opacity .18s ease;
}

.dashv3-drawer-root--open .dashv3-drawer-overlay {
    opacity: 1;
}

.dashv3-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: var(--dashv3-card-bg);
    box-shadow: -12px 0 40px rgba(16, 40, 36, .16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}

.dashv3-drawer-root--open .dashv3-drawer {
    transform: translateX(0);
}

.dashv3-drawer__head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--dashv3-card-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dashv3-drawer__titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dashv3-drawer__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dashv3-text-strong);
}

.dashv3-drawer__subtitle {
    font-size: 12.5px;
    color: var(--dashv3-text-muted);
}

.dashv3-drawer__close {
    flex: none;
    background: #F1F4F4;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #34474F;
}

.dashv3-drawer__close:hover {
    background: #E6EBEB;
}

.dashv3-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}

.dashv3-drawer__section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dashv3-text-muted-3);
    margin-bottom: 10px;
}

.dashv3-drawer__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 22px;
}

.dashv3-drawer__rows:last-child {
    margin-bottom: 0;
}

.dashv3-drawer__foot {
    padding: 16px 22px;
    border-top: 1px solid var(--dashv3-card-border);
    display: flex;
    gap: 10px;
}

.dashv3-drawer__done {
    flex: 1;
    background: var(--dashv3-header-bg);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.dashv3-drawer__done:hover {
    background: #1C2E36;
}

.dashv3-drawer__restore {
    background: #fff;
    color: var(--dashv3-text-muted);
    border: 1px solid #DDE5DA;
    border-radius: 10px;
    padding: 11px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.dashv3-drawer__restore:hover {
    background: #F4F6F6;
}

/* ---- linha do drawer (PersRow) ---- */
.dashv3-pers-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid #EEF2EC;
    background: #FBFCFA;
}

.dashv3-pers-row--dragging {
    opacity: .5;
}

.dashv3-pers-row--dragover {
    border-color: var(--dashv3-green);
    box-shadow: 0 0 0 2px rgba(111, 184, 57, .18);
}

.dashv3-pers-row__handle {
    color: #C3CEC6;
    cursor: grab;
    display: flex;
    flex: none;
}

.dashv3-pers-row__handle:active {
    cursor: grabbing;
}

.dashv3-pers-row__label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: #33433D;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashv3-pers-row__tag {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    color: #5C6B64;
    background: #EEF2EC;
    padding: 3px 9px;
    border-radius: 20px;
}

/* =========================================================================
   Sprint 053 — Central de módulos (Task-02). Tela Início + topbar + casca de
   grupos. Classes compartilhadas por 3 componentes (Início, Topbar, Grupos),
   por isso o CSS estrutural vai no app.css GLOBAL (não no scoped .razor.css).
   Usa os tokens --mp-* do :root; nada hardcoded além do que falta de token.
   ========================================================================= */

.mp-central {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mp-bg-app);
}

/* ---- Topbar ---- */
.mp-central-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 30px;
    background: var(--mp-surface-card);
    border-bottom: 1px solid var(--mp-border-card);
}

.mp-central-topbar-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mp-central-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mp-text-kicker);
}

.mp-central-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--mp-text-strong);
}

.mp-central-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-central-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    width: 260px;
    max-width: 40vw;
    padding: 0 12px;
    border: 1px solid var(--mp-border-subtle);
    border-radius: 10px;
    background: var(--mp-surface-card);
    color: var(--mp-text-muted);
    transition: border-color .15s, background .15s;
}

.mp-central-search:focus-within {
    border-color: var(--mp-tint-green-fg);
    background: #f7faf6;
}

.mp-central-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mp-text-body);
    font-size: 13px;
}

.mp-central-search-input::placeholder {
    color: var(--mp-text-muted);
}

/* Esconde o "x" nativo do input[type=search] (usamos o nosso layout) */
.mp-central-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.mp-central-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mp-border-subtle);
    border-radius: 10px;
    background: var(--mp-surface-card);
    color: var(--mp-text-body);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mp-central-bell:hover:not(:disabled) {
    border-color: var(--mp-tint-green-fg);
    background: #f7faf6;
}

/* Sprint 064: sino de notificações desabilitado no menu de navegação principal. */
.mp-central-bell:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* Botão X das telas de grupo de módulo: fecha a tela voltando à página anterior. */
.mp-central-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mp-border-subtle);
    border-radius: 10px;
    background: var(--mp-surface-card);
    color: var(--mp-text-body);
    font-size: 20px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mp-central-close:hover {
    border-color: var(--mp-tint-green-fg);
    background: #f7faf6;
}

/* ---- Conteúdo ---- */
.mp-central-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 26px 30px 40px;
    overflow: auto;
}

.mp-central-section + .mp-central-section {
    margin-top: 30px;
}

.mp-central-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mp-central-star-amber {
    color: var(--mp-star-amber);
    font-size: 18px;
}

.mp-central-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text-strong);
}

.mp-central-section-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mp-sidebar-group);
}

.mp-central-empty {
    margin: 0;
    font-size: 13px;
    color: var(--mp-text-muted);
}

.mp-central-grid {
    display: grid;
    gap: 14px;
}

.mp-central-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mp-central-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- modtile (Fixados) ---- */
/* O tile de fixado é uma âncora (abre em nova aba com clique do meio / Ctrl+clique) e o botão de
   fixar não pode viver dentro dela; este wrapper é a caixa posicionada que ancora a estrela e mantém
   o tile esticado na altura da linha do grid. */
.mp-modtile-wrap {
    position: relative;
    display: flex;
}

.mp-modtile-wrap > .mp-modtile {
    flex: 1 1 auto;
    height: 100%;
}

.mp-modtile {
    /* box-sizing/text-decoration: o tile agora é <a href>; normaliza a caixa (border + padding) e
       remove o sublinhado de link. */
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--mp-border-card);
    border-radius: 14px;
    background: var(--mp-surface-card);
    box-shadow: 0 1px 2px rgba(36, 58, 68, .04);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.mp-modtile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(36, 58, 68, .14);
    border-color: #cfe3c0;
}

.mp-modtile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    font-size: 22px;
    background: var(--mp-tile-bg, var(--mp-tint-slate-bg));
    color: var(--mp-tile-fg, var(--mp-tint-slate-fg));
}

.mp-modtile-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text-strong);
}

.mp-modtile-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--mp-text-muted);
}

.mp-modtile-star {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    color: var(--mp-star-amber);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    transition: transform .15s;
}

.mp-modtile-star:hover {
    transform: scale(1.15);
}

/* ---- pills (Recentes) ---- */
.mp-central-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-chip {
    /* box-sizing/text-decoration: a pílula agora é <a href>; sem border-box a altura fixa de 34px
       somaria padding + border e estouraria a caixa. */
    box-sizing: border-box;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #e0e7ea;
    border-radius: 100px;
    background: var(--mp-surface-card);
    color: var(--mp-text-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.mp-chip:hover {
    background: #eef4ef;
    border-color: #cfe0d2;
    color: #2f6b16;
}

/* ---- areacard (Áreas) ---- */
.mp-areacard {
    /* box-sizing/text-decoration: o card agora é <a href>; normaliza a caixa e remove o sublinhado. */
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--mp-border-card);
    border-radius: 14px;
    background: var(--mp-surface-card);
    box-shadow: 0 1px 2px rgba(36, 58, 68, .04);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.mp-areacard:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(36, 58, 68, .14);
    border-color: #cfe3c0;
}

.mp-areacard-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-areacard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 20px;
    background: var(--mp-tile-bg, var(--mp-tint-slate-bg));
    color: var(--mp-tile-fg, var(--mp-tint-slate-fg));
}

.mp-areacard-name {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text-strong);
}

.mp-areacard-chevron {
    color: var(--mp-text-muted);
    font-size: 20px;
}

.mp-areacard-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mp-text-muted);
}

/* ---- tints por área (definem os tokens locais do chip) ---- */
.mp-tint-green {
    --mp-tile-bg: var(--mp-tint-green-bg);
    --mp-tile-fg: var(--mp-tint-green-fg);
}

.mp-tint-blue {
    --mp-tile-bg: var(--mp-tint-blue-bg);
    --mp-tile-fg: var(--mp-tint-blue-fg);
}

.mp-tint-teal {
    --mp-tile-bg: var(--mp-tint-teal-bg);
    --mp-tile-fg: var(--mp-tint-teal-fg);
}

.mp-tint-amber {
    --mp-tile-bg: var(--mp-tint-amber-bg);
    --mp-tile-fg: var(--mp-tint-amber-fg);
}

.mp-tint-slate {
    --mp-tile-bg: var(--mp-tint-slate-bg);
    --mp-tile-fg: var(--mp-tint-slate-fg);
}

/* ---- groupcard (Cadastros / Produção — Task-03) ----
   Card de grupo: chip de ícone 40×40 (tint da área) + nome 700 15px + badge de contagem (tint da
   área) + lista de linhas clicáveis (optrow). Reusa os tokens --mp-tile-bg/-fg definidos pelas
   classes .mp-tint-* (mesma mecânica dos cards de Início). */
.mp-groupcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--mp-border-card);
    border-radius: 14px;
    background: var(--mp-surface-card);
    box-shadow: 0 1px 2px rgba(36, 58, 68, .04);
    transition: box-shadow .15s, border-color .15s;
}

.mp-groupcard:hover {
    box-shadow: 0 12px 26px rgba(36, 58, 68, .14);
    border-color: #cfe3c0;
}

.mp-groupcard-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-groupcard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 20px;
    background: var(--mp-tile-bg, var(--mp-tint-slate-bg));
    color: var(--mp-tile-fg, var(--mp-tint-slate-fg));
}

.mp-groupcard-name {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text-strong);
}

/* Sprint 064: o badge de quantidade de menus do card de grupo foi removido (.mp-groupcard-badge). */

.mp-groupcard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mp-optrow {
    /* box-sizing/text-decoration: a linha de opção agora é <a href> (abre em nova aba com clique do
       meio / Ctrl+clique); normaliza a caixa (border + padding + width:100%) e remove o sublinhado.
       Seguro para os <button>/<span> que ainda usam .mp-optrow (drawer) — em ambos é no-op. */
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--mp-text-body);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.mp-optrow:hover {
    background: #f7faf6;
    border-color: #cfe3c0;
}

.mp-optrow-bullet {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mp-text-muted);
}

.mp-optrow-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sprint 053 — Task-04. Tela Conta (UsuarioSideBar redesenhado) + estado-base/placeholder.
   Tokens --mp-* já no :root (marca, danger, tints). Classes globais porque o conteúdo do
   UsuarioSideBar e o placeholder são compartilhados (CSS scoped não alcançaria). */

/* ---- Cartão de perfil ---- */
.mp-account {
    gap: 22px;
    padding: 26px 24px 32px;
}

.mp-account-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mp-account-profile-chip {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--mp-brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-account-profile-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.mp-account-profile-info {
    min-width: 0;
    flex: 1 1 auto;
}

.mp-account-profile-name {
    font-weight: 800;
    font-size: 20px;
    color: var(--mp-text-strong, var(--mp-brand-dark));
    line-height: 1.15;
}

.mp-account-profile-email {
    font-weight: 500;
    font-size: 13px;
    color: var(--mp-brand-blue);
    margin-top: 2px;
}

.mp-account-impersonating {
    color: var(--mp-danger);
    font-weight: 700;
    font-size: 13px;
    word-break: break-all;
    margin-top: 4px;
}

.mp-account-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.mp-account-version-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--mp-tint-slate-fg);
    background: var(--mp-tint-slate-bg);
    border-radius: 100px;
    padding: 3px 9px;
    white-space: nowrap;
}

.mp-account-version-badge b {
    font-weight: 700;
}

/* ---- Seções ---- */
.mp-account-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-account-section-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mp-text-kicker, #9aabb2);
}

/* ---- Grid CONTA (2 colunas de optrows) ---- */
.mp-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mp-account-optrow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--mp-border-card, #e4e9eb);
    border-radius: 12px;
    background: var(--mp-surface-card, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.mp-account-optrow:hover {
    border-color: #cfe3c0;
    box-shadow: 0 8px 18px rgba(36, 58, 68, .1);
    transform: translateY(-1px);
}

.mp-account-optrow-chip {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--mp-tile-bg, var(--mp-tint-slate-bg));
    color: var(--mp-tile-fg, var(--mp-tint-slate-fg));
}

.mp-account-optrow-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--mp-text-body, #3f5763);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-account-optrow-chevron {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--mp-text-muted, #9aa9b0);
}

/* ---- Aplicativo móvel ---- */
.mp-account-apps {
    display: flex;
    gap: 12px;
}

.mp-account-app-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #1c2b32;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}

.mp-account-app-btn:hover {
    background: var(--mp-brand-dark-2, #1b2a31);
}

.mp-account-app-btn i {
    font-size: 18px;
}

/* ---- Sair da conta ---- */
.mp-account-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--mp-danger-border);
    border-radius: 10px;
    background: transparent;
    color: var(--mp-danger);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}

.mp-account-signout:hover {
    background: var(--mp-danger-bg);
}

.mp-account-signout i {
    font-size: 18px;
}

/* ---- Reabrir onboarding (Sprint 028) ---- */
.mp-account-onboarding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--mp-border-subtle, #e7ecec);
    border-radius: 10px;
    background: transparent;
    color: var(--mp-tint-green-fg, #5a9a2f);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}

.mp-account-onboarding:hover {
    background: var(--mp-tint-green-bg, #eef6e6);
}

.mp-account-onboarding i {
    font-size: 18px;
}

/* ---- Estado-base / placeholder de módulo ---- */
.mp-central-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    max-width: 420px;
    margin: auto;
    padding: 48px 24px;
}

.mp-placeholder-chip {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    background: var(--mp-tint-green-bg);
    color: var(--mp-tint-green-fg);
}

.mp-placeholder-name {
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    color: var(--mp-text-strong, var(--mp-brand-dark));
}

.mp-placeholder-text {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mp-text-muted, #8a98a0);
}

/* Rastreabilidade do lote (sprint 195 — Task-13): a raiz da sidebar (.rastreabilidade-sidebar) é o
   PRÓPRIO SfSidebar — fora do escopo do CSS isolado do componente, então as regras da raiz vivem
   aqui, no mesmo padrão dos demais sidebars (.proplanti-sidebar-*), incluindo o empilhamento: sem
   z-index próprio o .e-sidebar-overlay (999, filho do <body>) pintava por cima da gaveta inteira.
   O override mobile precisa de !important para vencer o width inline do Syncfusion. */
.rastreabilidade-sidebar.e-sidebar {
    z-index: 1001 !important;
    height: 100% !important;
    position: fixed !important;
    overscroll-behavior: contain !important;
    max-width: 1440px;
    border-radius: 0;
    font-family: Inter, sans-serif;
}

@media (max-width: 699px) {
    .rastreabilidade-sidebar.e-sidebar {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rastreabilidade-sidebar.e-sidebar {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ─── Central de decisões (sprint 256) ───────────────────────────────────────
   Só layout: as cores de estado vêm dos tokens --dashv3-* já usados pelos demais
   cards do V3, para a Central não virar uma ilha visual dentro do dashboard. */
.dashv3-decisoes-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
}

@media (max-width: 1080px) {
    .dashv3-decisoes-row {
        grid-template-columns: 1fr;
    }
}

.dashv3-central__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashv3-central__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--dashv3-card-border);
    border-radius: var(--dashv3-card-radius);
    background: var(--dashv3-card-bg);
}

.dashv3-central__item.dashv3-dado--desatualizado {
    border-color: var(--dashv3-amber-card-border);
}

.dashv3-central__item.dashv3-dado--indisponivel {
    background: var(--dashv3-track);
}

.dashv3-central__alvo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.dashv3-central__descricao {
    color: var(--dashv3-text-strong);
    font-weight: 600;
}

.dashv3-central__origem {
    color: var(--dashv3-text-muted);
    font-size: 12px;
}

.dashv3-central__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--dashv3-text-secondary);
    font-size: 13px;
}

.dashv3-central__confianca {
    color: var(--dashv3-text-muted);
}

.dashv3-central__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashv3-central__acao {
    padding: 5px 12px;
    border: 1px solid var(--dashv3-card-border);
    border-radius: 999px;
    background: var(--dashv3-card-bg);
    color: var(--dashv3-text-strong);
    font-size: 12px;
    cursor: pointer;
}

.dashv3-central__acao:hover:not(:disabled) {
    border-color: var(--dashv3-green);
    color: var(--dashv3-green-darkest);
}

.dashv3-central__acao:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dashv3-central__bloqueado {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dashv3-amber);
    font-size: 12px;
}

.dashv3-central__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dashv3-card-border);
}

.dashv3-central__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--dashv3-text-muted);
}

.dashv3-central__campo input,
.dashv3-central__campo select {
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid var(--dashv3-card-border);
    border-radius: 6px;
    color: var(--dashv3-text-strong);
}

.dashv3-cenarios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 880px) {
    .dashv3-cenarios__grid {
        grid-template-columns: 1fr;
    }
}

.dashv3-cenarios__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--dashv3-card-border);
    border-radius: var(--dashv3-card-radius);
}

.dashv3-cenarios__card--recomendado {
    border-color: var(--dashv3-green);
}

.dashv3-cenarios__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dashv3-text-strong);
    font-weight: 600;
}

.dashv3-cenarios__linha {
    color: var(--dashv3-text-secondary);
    font-size: 13px;
}

.dashv3-cenarios__risco,
.dashv3-cenarios__indisponivel {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dashv3-amber);
    font-size: 12px;
}

.dashv3-previsao__pontos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashv3-previsao__ponto {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--dashv3-text-secondary);
    font-size: 13px;
}

.dashv3-previsao__data {
    color: var(--dashv3-text-muted);
}