@font-face {
    font-family: "SF Pro Text";
    src: url("fonts/SFPRODISPLAYREGULAR.OTF") format('opentype');
}

/* ── Body ── */
body { background-color: var(--bs-white) !important; }
body.e-dark-mode { background-color: var(--color-sf-content-bg-color) !important; }

/* ── Dark mode — paleta de texto suavizada para #adadad ──
   O default do Fluent 2 dark usa branco quase puro (#fff/#f3f2f1) que dá
   contraste agressivo sobre o fundo escuro. Sobrescreve a variável principal
   do Syncfusion + força a cor em containers comuns onde o Fluent 2 hard-codeou
   o branco em vez de usar a variável. */
body.e-dark-mode {
    --color-sf-content-text-color: #adadad;
    --color-sf-content-text-color-alt1: #adadad;
    color: #adadad;
}
body.e-dark-mode .e-control,
body.e-dark-mode .e-control *:not([class*="icon-"]):not(.e-icons),
body.e-dark-mode .e-grid .e-rowcell,
body.e-dark-mode .e-grid .e-headercelldiv,
body.e-dark-mode .e-grid .e-headertext,
body.e-dark-mode .e-grid .e-summarycell,
body.e-dark-mode .e-toolbar .e-tbar-btn-text,
body.e-dark-mode .e-toolbar .e-toolbar-item .e-btn-icon,
body.e-dark-mode .e-menu-item,
body.e-dark-mode .e-list-item,
body.e-dark-mode .e-list-text,
body.e-dark-mode .e-input,
body.e-dark-mode .e-input-group input,
body.e-dark-mode .e-float-text,
body.e-dark-mode .e-tab .e-tab-text,
body.e-dark-mode .e-pager,
body.e-dark-mode .e-appbar,
body.e-dark-mode .e-appbar *:not([class*="icon-"]):not(.e-icons),
body.e-dark-mode .e-treeview .e-list-text,
body.e-dark-mode label {
    color: #adadad;
}

/* ── Navbar — flat: sem border-radius nem box-shadow ──
   Prefixo `body` aumenta especificidade (0,2,1) para vencer regras do fluent2.css
   que também usam !important com especificidade (0,2,0). */
body .e-appbar { border-radius: 0 !important; box-shadow: none !important; }
body .e-appbar.e-light {
    background: var(--color-sf-card-bg-color) !important;
    border-bottom: none !important;
}

/* ── Navbar — logo + system label + separador ── */
.sg-navbar-logo { height: 22px; margin-right: 6px; }
.e-dark-mode .sg-navbar-logo { filter: brightness(0) invert(1); }
/* Logo do estabelecimento: cores próprias, sem filtro de inversão no dark mode */
.sg-navbar-logo--estab { height: 28px; max-width: 140px; object-fit: contain; }
.e-dark-mode .sg-navbar-logo--estab { filter: none; }
.sg-navbar-system { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.sg-navbar-sep { font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2, #9ca3af); margin: 0 2px; font-weight: 300; }

/* ── ChartCard loading placeholder ── */
.sg-chart-loading {
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 120px;
}

/* Spinner duplo estilo Segla (com vela) */
/* Spinner do LogisticaWidget — 3D atômico em 2 anéis (X + Y).
   Versão compacta (64px) sem o terceiro anel de core porque o espaço
   interno é apertado e o widget já é pequeno. */
.sg-chart-spinner {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 180px;
    transform-style: preserve-3d;
}
.sg-chart-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #0891b2;
    border-bottom-color: color-mix(in srgb, #0891b2 30%, transparent);
    animation: sg-spin-3d-x 1.6s linear infinite;
}
.sg-chart-spinner-ring--2 {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-left-color: #06b6d4;
    border-right-color: color-mix(in srgb, #06b6d4 30%, transparent);
    animation: sg-spin-3d-y 1.9s linear infinite;
}
.sg-chart-spinner-vela {
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    opacity: 0.8;
    animation: sg-loader-vela-pulse 2.4s ease-in-out infinite;
}
@keyframes sgexp-spin { to { transform: rotate(360deg); } }

.sg-chart-loading-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
}

/* ── ChartCard empty state ── */
.sg-chart-empty {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 120px; gap: 8px;
}
.sg-chart-empty-icon { font-size: 28px; color: var(--color-sf-content-text-color-alt2, #9ca3af); opacity: 0.4; }
.sg-chart-empty-icon::before { color: var(--color-sf-content-text-color-alt2, #9ca3af) !important; }
.sg-chart-empty-text { font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2, #9ca3af); opacity: 0.6; }

/* Botão excluir no estado vazio — só aparece no hover do card pra não poluir o
   visual padrão. Garante que o usuário consegue remover o card mesmo quando
   o gráfico não consegue renderizar (sem dados, query quebrada etc.). */
.sg-chart-empty-delete {
    position: absolute; top: 8px; right: 8px;
    background: transparent; border: 1px solid transparent;
    width: 28px; height: 28px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, border-color .15s;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
}
.sg-chart-empty:hover .sg-chart-empty-delete { opacity: 0.85; }
.sg-chart-empty-delete:hover {
    background: color-mix(in srgb, #ef4444 10%, transparent);
    border-color: color-mix(in srgb, #ef4444 30%, transparent);
    color: #ef4444; opacity: 1;
}
.sg-chart-empty-delete span[class*="icon-"]::before { color: inherit !important; }

@font-face {
    font-family: 'Open Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Regular'), url('fonts/OpenSans-Regular.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans'), url('fonts/OpenSans-Regular.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Italic'), url('fonts/OpenSans-Italic.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Light';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Light'), url('fonts/OpenSans-Light.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Light Italic'), url('fonts/OpenSans-LightItalic.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans SemiBold'), url('fonts/OpenSans-SemiBold.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans SemiBold Italic'), url('fonts/OpenSans-SemiBoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Bold Italic'), url('fonts/OpenSans-BoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans ExtraBold'), url('fonts/OpenSans-ExtraBold.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans ExtraBold Italic'), url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Light Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Light Regular'), url('fonts/OpenSans-Light-webfont.woff') format('woff');
}


@font-face {
    font-family: 'Open Sans Condensed Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Condensed Bold'), url('fonts/OpenSans-CondBold.woff') format('woff');
}

*, html, body {
    font-family: "Open Sans";
}

a, .btn-link {
    color: #006bb7;
}

.chart-card-title {
    font-size: 10px;
    font-family: 'Open Sans Light';
}

.chart-card-sub-title {
    font-size: 9px;
    font-family: 'Open Sans Light';
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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: "Ocorreu um erro."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/*ADAPTACOES*/

/*.e-toolbar {*/
/*    height: 30px;*/
/*    min-height: 30px !important;*/
/*}*/

.e-menu-item {
    font-size: 12px;
    height: 18px;
}

/* ── Grid — redução de fonte -2px (14 → 12px) ──────────── */
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-headercelldiv {
    font-size: 12px !important;
}

.e-grid .e-summarycell {
    font-size: 12px !important;
}

/* ── Grid — sem bordas, cabeçalho minimalista ──────────── */
.e-grid,
.e-grid .e-gridheader,
.e-grid .e-gridcontent,
.e-grid .e-gridfooter,
.e-grid .e-toolbar,
.e-grid .e-groupdroparea,
.e-grid .e-gridheader .e-headercelldiv,
.e-grid .e-gridheader .e-headercontent,
.e-grid .e-gridheader .e-table {
    border: none !important;
}

/* Drop area "Solte uma coluna aqui para agrupar" — flat sem fundo */
body .e-grid .e-groupdroparea { background-color: transparent !important; }

/* Toolbar — flat (sem background, sem borda, sem sombra) */
body .e-toolbar { background: transparent !important; }

/* ── Combos com link para tabela acessória ──
   Wrapper recebe a classe sg-combo-link-wrap; ícone flutua no topo direito,
   alinhado com a label flutuante do Syncfusion. Não compete com a estrutura
   interna do combo (label/chevron/clear). */
body .sg-combo-link-wrap { position: relative; }

body .sg-combo-link-btn {
    position: relative;
    top: 16px;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    color: var(--color-sf-content-text-color-alt2);
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
    padding-left: 6px;
}

body .sg-combo-link-btn:hover {
    opacity: 1;
    color: var(--color-sf-primary);
}

body .sg-combo-link-btn span[class*="icon-"] {
    font-size: 16px !important;
    color: inherit !important;
}

body .sg-combo-link-btn span[class*="icon-"]::before {
    color: inherit !important;
}

/* Tab — header compacto */
body .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 30px !important;
    padding: 0 10px !important;
    width: 100% !important;
}

/* Tabela, content e footer do grid — sem fundo */
body .e-grid .e-table,
body .e-grid .e-content,
body .e-grid .e-gridcontent,
body .e-grid .e-gridfooter { background-color: transparent !important; }

/* Células freeze precisam de fundo opaco para esconder o scroll horizontal por baixo */
body .e-grid .e-gridfooter .e-leftfreeze,
body .e-grid .e-gridfooter .e-rightfreeze,
body .e-grid .e-gridfooter .e-fixedfreeze,
body .e-grid .e-leftfreeze:not(.e-summarycell,.e-indentcell,.e-updatedtd,.e-selectionbackground,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active),
body .e-grid .e-rightfreeze:not(.e-summarycell,.e-updatedtd,.e-selectionbackground,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active),
body .e-grid .e-fixedfreeze:not(.e-summarycell,.e-selectionbackground,.e-updatedtd,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active) { background-color: var(--bs-white) !important; }

body.e-dark-mode .e-grid .e-gridfooter .e-leftfreeze,
body.e-dark-mode .e-grid .e-gridfooter .e-rightfreeze,
body.e-dark-mode .e-grid .e-gridfooter .e-fixedfreeze,
body.e-dark-mode .e-grid .e-leftfreeze:not(.e-summarycell,.e-indentcell,.e-updatedtd,.e-selectionbackground,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active),
body.e-dark-mode .e-grid .e-rightfreeze:not(.e-summarycell,.e-updatedtd,.e-selectionbackground,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active),
body.e-dark-mode .e-grid .e-fixedfreeze:not(.e-summarycell,.e-selectionbackground,.e-updatedtd,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active) { background-color: var(--color-sf-content-bg-color) !important; }

/* Dark mode — grid e toolbar transparentes (combinam com body) */
body.e-dark-mode .e-grid,
body.e-dark-mode .e-grid .e-gridheader,
body.e-dark-mode .e-grid .e-gridcontent,
body.e-dark-mode .e-grid .e-gridfooter,
body.e-dark-mode .e-grid .e-toolbar {
    background: transparent !important;
}

.e-grid .e-headercell {
    background: rgba(0, 120, 212, 0.04) !important;
    border: none !important;
}

.e-grid .e-rowcell,
.e-grid .e-detailrowcollapse,
.e-grid .e-detailrowexpand,
.e-grid .e-lastrowcell {
    border-color: transparent !important;
}

.e-grid .e-gridcontent,
.e-grid .e-headercontent {
    border-right: none !important;
    border-bottom: none !important;
}

.e-grid .e-gridpager,
.e-grid .e-pagercontainer {
    border: none !important;
}

.e-grid .e-row:hover .e-rowcell {
    background: rgba(0, 120, 212, 0.03) !important;
}

/* Dark mode */
.e-dark-mode .e-grid .e-headercell {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: none !important;
}

.e-dark-mode .e-grid .e-row:hover .e-rowcell {
    background: rgba(255, 255, 255, 0.03) !important;
}

.e-pager .e-pagercontainer,
.e-pager .e-parentmsgbar,
.e-pager .e-pagerdropdown {
    font-size: 12px !important;
}

/* Pager — flat sem fundo, font-size herda do contexto, separador apenas no topo */
body .e-pager {
    background: transparent !important;
    font-size: inherit !important;
    border: none !important;
    border-top: 1px solid var(--color-sf-border-light, #e2e8f0) !important;
}

/* ── Formulários (diálogo) — redução de fonte -2px ──────── */
.e-dialog .e-float-input input,
.e-dialog .e-float-input textarea,
.e-dialog .e-float-input.e-control-wrapper input,
.e-dialog .e-float-input .e-float-text,
.e-dialog .e-float-input label,
.e-dialog .e-input-group input,
.e-dialog .e-dropdownlist,
.e-dialog .e-dropdownbase .e-list-item,
.e-dialog .e-numerictextbox,
.e-dialog .e-datepicker input,
.e-dialog .e-multiselect input {
    font-size: 12px !important;
}

.sg-visao-titulo {
    font-size: 14px !important;
    color: green;
    font-weight: 600;
}

.sg-vision-area {
    background-color: var(--color-sf-content-bg-color-alt1);
}

.sg-kpi-area {
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* Separador entre KPIs */
.sg-kpi-area + .sg-kpi-area::before {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    background: var(--color-sf-border-light);
    flex-shrink: 0;
}

.sg-kpi-area .kpi-container {
    padding: 4px 14px;
    border: none !important;
    border-radius: 0;
    border-left: none !important;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sg-kpi-area .title {
    border: none;
    padding: 0;
    margin-right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sf-content-text-color-alt1);
    opacity: 1;
}

.sg-kpi-area .item {
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 200;
}


/* !important necessário pois o reset do dark mode da Syncfusion
   (`body.e-dark-mode .e-control *:not(...) { color: #adadad }`) tem
   especificidade maior (0,4,1 vs 0,2,0) e sobrescreve esses tons em
   qualquer KPI que renderize dentro de um `.e-control` (ex.: SubGrid
   dentro de SfTab). Sem o !important os KPIs só ganham cor no Grid
   principal — no subgrid ficam cinza. */
.sg-kpi-area .border-color-1 { border-left: none; }
.sg-kpi-area .text-color-1   { color: #168EFF !important; }

.sg-kpi-area .border-color-2 { border-left: none; }
.sg-kpi-area .text-color-2   { color: #C87B00 !important; }

.sg-kpi-area .border-color-3 { border-left: none; }
.sg-kpi-area .text-color-3   { color: #75980B !important; }

.sg-kpi-area .border-color-4 { border-left: none; }
.sg-kpi-area .text-color-4   { color: #DF1278 !important; }

.sg-kpi-area .border-color-5 { border-left: none; }
.sg-kpi-area .text-color-5   { color: #5d36FF !important; }

.sg-kpi-area .border-color-6 { border-left: none; }
.sg-kpi-area .text-color-6   { color: #256F3A !important; }

/* ── Swatch de cor de KPI no dropdown do FormularioCampoForm ── */
.sgkpi-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    line-height: 1;
}
.sgkpi-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.12);
}
.sgkpi-color-swatch.color-1 { background: #168EFF; }
.sgkpi-color-swatch.color-2 { background: #C87B00; }
.sgkpi-color-swatch.color-3 { background: #75980B; }
.sgkpi-color-swatch.color-4 { background: #DF1278; }
.sgkpi-color-swatch.color-5 { background: #5d36FF; }
/* Garante que o ValueTemplate dentro do input do SfDropDownList alinhe vertical */
.e-input-group .e-control-container .sgkpi-color-row,
.e-ddl .e-input-group .sgkpi-color-row {
    height: 100%;
}

/* KPI total de registros */
.sg-kpi-total-value {
    color: var(--color-sf-content-text-color) !important;
    font-weight: 600;
}

/* Referência de devs ao lado do total — COD_FORMULARIO / COD_MENU */
.sg-devref {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    margin-right: 14px;
    padding: 4px 10px;
    border-left: 2px solid var(--color-sf-border-light, #e2e8f0);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--color-sf-content-text-color-alt3, #94a3b8);
    opacity: 0.7;
    user-select: text;
    cursor: help;
}
.sg-devref:hover { opacity: 1; }
.sg-devref-line { display: flex; align-items: center; gap: 4px; }
.sg-devref-key {
    display: inline-block;
    min-width: 10px;
    font-weight: 700;
    color: var(--color-sf-info-bg-color, #4361ee);
    text-align: center;
}

.e-icons {
    cursor: pointer;
}

.sg-kpiarea {
    height: 218px;
    box-sizing: border-box;
    background-color: transparent;
    overflow: hidden;
}

/* ── Scroll horizontal quando há muitos gráficos ────────── */
.sg-kpiarea > div {
    height: 100%;
}

.sg-kpiarea .sg-barramenu {
    height: 100%;
}

.sg-kpiarea .sg-appbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    padding: 0 8px;
    /* scrollbar-width: thin; */
    scrollbar-color: var(--color-sf-border-color) transparent;
}

.sg-kpiarea .sg-appbar::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent !important;
}

.sg-kpiarea .sg-appbar::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sg-kpiarea .sg-appbar::-webkit-scrollbar-corner {
    background: transparent !important;
}

.sg-kpiarea .sg-appbar::-webkit-scrollbar-thumb {
    background: var(--color-sf-icon-color);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sg-kpiarea .sg-appbar li.sg-chart-item {
    float: none;
    flex-shrink: 0;
}

.sg-appbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding-top: 4px 4px 8px 4px;
}

.sg-appbar li {
    font-size: 12px;
    float: left;
    padding: 4px 0px 0px 16px;
}

.sg-chart-item {
    display: flex;
    flex-direction: column;
}

.sg-chart-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-sf-content-text-color-alt1);
    padding: 4px 0 2px 4px;
    text-align: center;
}

.flex-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /* flex-flow: column wrap; */
    flex-direction: column;
    flex-wrap: wrap;
    height: 120px;
    padding: 8px;
    gap: 2px;
}

.flex-container > div {
    border-radius: 5px;
    padding: 8px;
}

.e-dlg-header-title {
    font-size: 18px;
    font-weight: 400;
}

.e-dialog .e-dlg-header {
    display: block;
    font-size: 16px !important;
    font-weight: 100 !important;
    overflow: visible !important;
    width: 100% !important;
    line-height: 32px !important;
}

.e-dialog .e-dlg-header div {
    font-weight: 300 !important;
    line-height: 16px !important;
}

/* Processamento dialog — conteúdo ocupa 100% da altura */
.sg-processamento-dlg .e-dlg-content { padding: 0 !important; overflow: hidden; height: 100%; }
.sg-processamento-dlg .e-dlg-body-content { height: 100%; }

.e-dialog .e-dlg-header-content {
    padding: 10px 20px 5px 24px !important;
}

.e-tbar-btn-text {
    font-size: 12px !important;
    font-weight: 300 !important;
}

.e-dlg-header * {
    font-size: 12px !important;
    font-weight: 300 !important;
}

span[class^="icon-"]::before {
    color: #0099bc !important;
}

.e-grid-col-2.e-form-layout {
    padding: 10px !important;
    align-items: start !important;
    align-content: start !important;
}

.e-grid-col-12.e-form-layout {
    align-content: start !important;
}


.e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label {
    font-size: 12px !important;
}

/* Quando uma célula do form-layout (e-colspan-*) contém um checkbox,
   alinhar verticalmente com os campos vizinhos que têm float label.
   Os campos com FloatLabelType.Always tem ~22px de altura no label antes
   do input — sem esse padding, o checkbox fica colado no topo da linha. */
.e-form-layout div[class*="e-colspan-"]:has(> .e-checkbox-wrapper),
.e-form-layout div[class*="e-colspan-"]:has(> .e-css.e-checkbox-wrapper) {
    padding-top: 22px;
}

/* ── Form Layout responsivo: < 1440px duplica colspan ──
   O formulário foi pensado para 2 colunas naturais em viewports >= 1440px.
   Abaixo disso (notebooks pequenos, monitores secundários, splits), todos
   os colspan são multiplicados por 2 — efetivamente colapsando duas colunas
   em uma. e-colspan-3 vira span-6 (1/2 da largura), e-colspan-6 vira
   span-12 (largura inteira), etc. */
@media (max-width: 1439px) {
    .e-form-layout .e-colspan-1 { grid-column: span 2 / span 2; }
    .e-form-layout .e-colspan-2 { grid-column: span 4 / span 4; }
    .e-form-layout .e-colspan-3 { grid-column: span 6 / span 6; }
    .e-form-layout .e-colspan-4 { grid-column: span 8 / span 8; }
    .e-form-layout .e-colspan-5 { grid-column: span 10 / span 10; }
    .e-form-layout .e-colspan-6,
    .e-form-layout .e-colspan-7,
    .e-form-layout .e-colspan-8,
    .e-form-layout .e-colspan-9,
    .e-form-layout .e-colspan-10,
    .e-form-layout .e-colspan-11,
    .e-form-layout .e-colspan-12 { grid-column: span 12 / span 12; }
}

/*AVATAR*/
.e-avatar.image {
    background-image: url('images/pic01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*ICONES DOS BOTOES ellipse BARRAS*/
.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon,
.e-icon-left,
.e-icon-btn,
.e-btn-icon {
    font-size: 18px !important;
}

/*toast*/
@
@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRkAAAEoAAAAVmNtYXDnM+eRAAABsAAAAEpnbHlmzVnmlwAAAhgAAAZAaGVhZBEYIl8AAADQAAAANmhoZWEHlgN3AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQnUCGIAAAH8AAAAGm1heHABHQBcAAABCAAAACBuYW1lfUUTYwAACFgAAAKpcG9zdAxfTDgAAAsEAAAAggABAAADUv9qAFoEAAAAAAAD6AABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAACcU5MF8PPPUACwPoAAAAANcI7skAAAAA1wjuyQAAAAAD6APoAAAACAACAAAAAAAAAAEAAAAMAFAABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnCgNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA2AAAABAAEAAEAAOcK//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsAAAAAAAAAQgB8AMIA4gEcAZQCBgJwAo4DAAMgAAAAAwAAAAADlAOUAAsAFwAjAAABFwcXNxc3JzcnBycFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBTXh4L3h4L3h4L3h4AbwDt4qKtwMDt4qKt/0eBeuxsesFBeuxsesCbHh4L3h4L3h4L3h4p4q3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAwAAAAADlAOUAAUAEQAdAAABJwcXAScXDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBr2UylwEbMqADt4qKtwMDt4qKt/0eBeuxsesFBeuxsesBrGQylgEcMqKKtwMDt4qKtwMDt4qx6wUF67Gx6wUF6wAAAAAFAAAAAAOUA5cABQARAB0AIQAlAAABFzcnNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgElFzcnBRc3JwHKxiCnPwFOA6V8fKUDA6V8fKX9aATToJ/UBATUn5/UAh7ANsD9fja/NQGedzNj29F8pAMDpHx8pQMDpXyf1AQE1J+g0wQE0/GhQKGhQKFAAAQAAAAAA74DfgADAAcACgANAAAlMzUjNTM1IwEhCQEhAQHLUlJSUgFj/YwBOv42A5T+NuZUUqf+igIc/ZADFgAEAAAAAAOUA5QAAwAHABMAHwAAATM1IzUzNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBylRUVFQBbgO3ioq3AwO3ioq3/R4F67Gx6wUF67Gx6wEk+lNT0Iq3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAAcAAAAAA+gDMQALABUAJQAuADcAQQBLAAABFhcVITUmJz4BMxYFFhcVITU+ATcWJQYHFSE1LgEjIgYHLgEjIgEWFAYiJjQ2MgUWFAYiJjQ2MiUGFBYXPgE0JiIFBhQWFz4BNCYiA1xEBP6sAxUeRiRX/qxEBP45BIlXV/7xZQsD6AvKUypvMzNvKlMCKxozTTMzTP6CGTNMNDRMAQItWUREWlqI/jstWkREWVmIAWMbFjc3IBgKDwQcGxY3NxY3BAQjJUt7e0tKFxgYFwEMGU01NU0zGhlNNTVNMxYthloCAlqGWy4thloCAlqGWwAAAAQAAAAAA5wCxwAIABQANABFAAABFBYyNjQmIgYXDgEHLgEnPgE3HgEfAQcOAQ8BNz4BNS4BJw4BBxQWHwEnLgEvATc+ATc2FiUOAQ8BFx4BNz4BPwEnJiciAb8fLR4eLR+wAkU0NEUBAUU0NEX8BgEemG0FBB8kAlZBQFcBKyUCCkeVTAYBH76RVMP+3bDPBwcKZclcu/AGCwrM2AoBxxYfHy0eHhc0RQEBRTQ1RQEBRSgEARpWGAECFUIoQVcCAldBLEYUAQEIQkAGASJsBwFCoRbFFAoJW0sBCo8LCgztAQAAAAIAAAAAA4ADbAA4AEEAAAEEJCcmDgEWFx4BHwEVFAYHDgEnJg4BFhcWNjc2Fx4BBx4BFzc+ASc2JicmJzUzPgE3PgEnJicjIiUUFjI2NCYiBgNM/tz+pwwMGxEDDAaMfAcSETKEQw8WBg8Og80hNSg4JwICEw0FDhECAjFJEBICPYhKDQgGChQCB/5dMUgxMUgxAuB/ZRcIAxgbCQdHEQGTGi8TOVgKAw8dFwMNuDUFHTGDCA0QAQECFQ8Mnz8LCasJKiUHGg0SATMkMDBJMDAAAAAAAgAAAAAC/QMkAAMADQAAAQchJxMeATMhMjY3EyEC2x3+bB0kBCQZAQQZJARH/ewDBuDg/fcZICAZAicAAwAAAAACzwPoACwAQwBPAAABERQfARYfAzMVHgE7ATI2NRE0JisBNTEWOwEyNjQmJyMiJi8BLgErAQ4BAxUzNTQ2NzMeARcVMzUuAScjIgcjESM1HgEXPgE3LgEnDgEBVQEBAwQCCAjXARENOg0REQ2zDROVExoaE2UQGAQfAxAKYg0RPR8RDZcNEQEeASIalxANAR8CTTo6TQEBTTo6TQJ8/nYEBQIGBAIFArYNERENARENEUoNGicZARMPfQoNARH98Hl5DREBARENeXkaIgEIAe3FOk0CAk06Ok0BAU0AAAAAAgAAAAAC5gMyAAkAEQAAJRQWMyEyNjURITcjFSE1IycjASApHgEaHin+WFBuAeR+JLD8HigoHgGfeT09HgAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEgABAAEAAAAAAAIABwATAAEAAAAAAAMAEgAaAAEAAAAAAAQAEgAsAAEAAAAAAAUACwA+AAEAAAAAAAYAEgBJAAEAAAAAAAoALABbAAEAAAAAAAsAEgCHAAMAAQQJAAAAAgCZAAMAAQQJAAEAJACbAAMAAQQJAAIADgC/AAMAAQQJAAMAJADNAAMAAQQJAAQAJADxAAMAAQQJAAUAFgEVAAMAAQQJAAYAJAErAAMAAQQJAAoAWAFPAAMAAQQJAAsAJAGnIEZpbmFsIFRvYXN0IE1ldHJvcFJlZ3VsYXJGaW5hbCBUb2FzdCBNZXRyb3BGaW5hbCBUb2FzdCBNZXRyb3BWZXJzaW9uIDEuMEZpbmFsIFRvYXN0IE1ldHJvcEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAAUgBlAGcAdQBsAGEAcgBGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAFRXJyb3IHU3VjY2VzcwVBbGFybQdXYXJuaW5nBEluZm8HTWVldGluZwVCbGluawdTdHJldGNoA1NpcANTaXQFVHJhc2gAAAAA) format('truetype');
    font-weight: normal;
    font-style: normal;
}

#toast_types button {
    margin: 5px;
    min-width: 160px;
    max-width: 160px;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#toast_type .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}

.bootstrap5 #toast_type .e-toast-icon.e-icons,
.bootstrap5-dark #toast_type .e-toast-icon.e-icons {
    height: 25px;
}

.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}

#toast_types {
    text-align: center;
}

.dropdowns {
    font-size: 12px !important;
}

.e-dropdown-popup ul {
    font-size: 12px !important;
}

.e-dropdown-popup .e-item {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* ── Blocos de campos do formulário (gerados via SeglaFormField) ────────── */
.bloco {
    border: 1px solid var(--color-sf-border-light, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background: var(--color-sf-content-bg-color-alt1, #fafafa) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    margin-bottom: 8px;
}

/* ── Tabs de subgrid (SfTab com CssClass="quadro-centro") ──────────────── */
.quadro-centro {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    background: var(--color-sf-content-bg-color) !important;
    border: 1px solid var(--color-sf-border-light) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.quadro-centro .e-content .sgsg-wrap .e-grid {
    border: none;
}

/* ── Título/legenda do bloco (fieldset > legend) ────────────────────────── */
.bloco-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--color-sf-content-text-color-alt1, #6b7280) !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bloco-titulo::after {
    border: none !important;
    display: none !important;
}

.e-form-group.e-colspan-1 .bloco fieldset {
    border-bottom: none !important;
}

.e-form-group.e-colspan-1 .bloco {
    background-color: var(--color-sf-content-bg-color-alt1) !important;
}

/* Área de campos dentro do bloco */
.bloco .e-form-layout {
    padding: 8px 12px !important;
    gap: 6px 16px !important;
}

.e-toolbar-items .e-btn{
    border: none !important;
}
/* ── Cabeçalho do grid — flat (sem fundo, borda ou sombra) */
.sg-header-container {
    overflow: clip;
}

/* Linha balloon + KPIs + visão — tudo na mesma barra */
.sgbt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-radius: 12px;
}

.sgbt-row .sgvb-kpis {
    flex: none;
}

/* Toolbar persistente (Visões / Gráficos / IA / Grid·Kanban·Pivot / Histórico)
   alinhada à direita dos KPIs, na mesma linha. */
.sgbt-row .sgvb-persist-toolbar {
    margin-left: auto;
    flex: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sgbt-row .sgvb-persist-toolbar .e-toolbar-items,
.sgbt-row .sgvb-persist-toolbar .e-hscroll,
.sgbt-row .sgvb-persist-toolbar .e-hscroll-content {
    background: transparent !important;
}

/* Clip dos cantos do header container */
.sg-header-container > :first-child {
    border-radius: 12px;
    overflow: hidden;
}

.sg-grid-container { /* flat: sem fundo, borda, sombra ou padding */ }

/* ── Indicador "Última query" (menu — apenas devs) — flat, discreto ── */
.sg-diag-icon--ok::before    { color: var(--bs-success) !important; }
.sg-diag-icon--error::before { color: var(--bs-danger)  !important; }
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-hscroll,
.e-grid .e-toolbar .e-hscroll-content,
.e-grid .e-toolbar .e-toolbar-item,
.e-grid .e-toolbar .e-tbar-btn,
.e-grid .e-toolbar .e-dropdown-btn {
    border-top: none !important;
    background: transparent !important;
}

body.e-dark-mode .e-grid .e-toolbar,
body.e-dark-mode .e-grid .e-toolbar .e-toolbar-items,
body.e-dark-mode .e-grid .e-toolbar .e-hscroll,
body.e-dark-mode .e-grid .e-toolbar .e-hscroll-content,
body.e-dark-mode .e-grid .e-toolbar .e-toolbar-item,
body.e-dark-mode .e-grid .e-toolbar .e-tbar-btn,
body.e-dark-mode .e-grid .e-toolbar .e-dropdown-btn {
    background: transparent !important;
}

.e-grid .e-toolbar .e-tbar-btn:hover,
.e-grid .e-toolbar .e-dropdown-btn:hover {
    background: var(--color-sf-content-bg-color-alt1) !important;
}
/* ── MetaBase: grids sem bordas laterais ─────────────────── */
.sgmeta-grid-wrap .e-grid,
.sgproc-grid-wrap .e-grid,
.sgmenu-grid-wrap .e-grid,
.sgkb-grid-wrap .e-grid,
.sgsist-grid-wrap .e-grid {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.sgmeta-grid-wrap .e-gridcontent,
.sgproc-grid-wrap .e-gridcontent,
.sgmenu-grid-wrap .e-gridcontent,
.sgkb-grid-wrap .e-gridcontent,
.sgsist-grid-wrap .e-gridcontent {
    border-left: none !important;
    border-right: none !important;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: var(--color-sf-content-bg-color-alt1);
}
::-webkit-scrollbar-track {
    background-color: var(--color-sf-content-bg-color-alt1);
}
::-webkit-scrollbar-thumb {
    background: var(--color-sf-icon-color);
    border-radius: 4px;
}
.e-splitter.e-splitter-horizontal,
.e-splitter.e-splitter-vertical{
    border: none !important;
}

/* ============================================================
   sg-dlg-header-line — linha de título do diálogo de edição
   ============================================================ */
.sg-dlg-header-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-dlg-header-entity-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 0.75;
}

.sg-dlg-header-title {
    font-size: 14px;
    font-weight: 600;
    padding: 5px 0;
}

/* ============================================================
   sg-rec-meta-bar — painel de metadados do registro (Pane 2)
   ============================================================ */
.sg-rec-meta-bar {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    padding: 5px 16px;
    background-color: var(--color-sf-content-bg-color-alt1);
    overflow: hidden;
}

.sg-rec-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    flex-shrink: 0;
    white-space: nowrap;
}

.sg-rec-meta-divider {
    width: 1px;
    height: 28px;
    background-color: var(--color-sf-border-light);
    flex-shrink: 0;
}

.sg-rec-meta-icon {
    font-size: 15px;
    color: var(--color-sf-icon-color);
    flex-shrink: 0;
}

.sg-rec-meta-label {
    font-size: 11px;
    color: var(--color-sf-icon-color);
    font-weight: 400;
    line-height: 1;
}

.sg-rec-meta-value {
    font-size: 12px;
    color: var(--color-sf-content-text-color);
    font-weight: 500;
    line-height: 1;
}

.sg-rec-meta-pk {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-sf-primary);
    background-color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
}

.e-dark-mode .sg-rec-meta-pk {
    background-color: var(--color-sf-primary-bg-color);
}

/* Badge de status do registro */
.sg-rec-meta-status {
    padding: 0 14px 0 0;
}

.sg-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.sg-rec-badge-icon {
    font-size: 14px;
}

/* Desbloqueado — verde claro com texto verde */
.sg-rec-badge--open {
    background-color: var(--color-sf-success-light-alt);
    color: var(--color-sf-success);
    border: 1px solid #0e700e59;
}

.sg-rec-badge--open span,
.sg-rec-badge--open i {
    color: var(--color-sf-success) !important;
}

.sg-rec-badge--open span[class*="icon-"]::before,
.sg-rec-badge--open i[class*="icon-"]::before {
    color: var(--color-sf-success) !important;
}

/* Bloqueado — âmbar claro com texto âmbar */
.sg-rec-badge--locked {
    background-color: var(--color-sf-warning-light-alt, #fff4ce);
    color: var(--color-sf-warning, #c58000);
    border: 1px solid var(--color-sf-warning, #c58000);
}

.sg-rec-badge--locked span,
.sg-rec-badge--locked i {
    color: var(--color-sf-warning, #c58000) !important;
}

.sg-rec-badge--locked span[class*="icon-"]::before,
.sg-rec-badge--locked i[class*="icon-"]::before {
    color: var(--color-sf-warning, #c58000) !important;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px;
    border-radius: 20px;
    font-weight: 300;
}

.status-success {
    background: var(--bs-success);
    color: var(--color-sf-success-light-alt) !important;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-success .status-dot {
    background: #28a745;
}

.status-pending .status-dot {
    background: #ffc107;
    animation: pulse 1.5s infinite;
}
@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

#toast_types button {
    margin: 5px;
    min-width: 160px;
    max-width: 160px;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .toast-icons.e-success::before {
        content: "\e701";
    }

    .toast-icons.e-error::before {
        content: "\e700";
    }

    .toast-icons.e-info::before {
        content: "\e704";
    }

    .toast-icons.e-warning::before {
        content: "\e703";
    }

#toast_types {
    text-align: center;
}

/* ============================================================
   sg-diag — sinaleiro e popup de diagnóstico de consulta
   ============================================================ */

/* Botão sinaleiro na toolbar do grid */
.sg-diag-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: background-color 0.3s, border-color 0.3s;
}
.sg-diag-btn--ok {
    background-color: #e8f5e9;
    border-color: #43a047;
    color: #2e7d32;
}
.sg-diag-btn--ok:hover {
    background-color: #c8e6c9;
}
.sg-diag-btn--error {
    background-color: #ffebee;
    border-color: #e53935;
    color: #c62828;
    animation: sg-diag-pulse 1.8s infinite;
}
.sg-diag-btn--error:hover {
    background-color: #ffcdd2;
}
@keyframes sg-diag-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

/* Cabeçalho do dialog */
.sg-diag-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}
.sg-diag-header--ok    { color: #2e7d32; }
.sg-diag-header--error { color: #c62828; }
.sg-diag-header--dev   { color: #1565c0; }
.sg-diag-header-icon   { font-size: 1.1rem; }

/* Box de mensagem de erro */
.sg-diag-error-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff3f3;
    border: 1px solid #ffcdd2;
    border-left: 4px solid #e53935;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.sg-diag-error-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b71c1c;
    opacity: 0.8;
}
.sg-diag-error-msg {
    color: #c62828;
    font-weight: 500;
    word-break: break-word;
}

/* Área do SQL */
.sg-diag-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 6px;
}
.sg-diag-sql {
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 0.78rem;
    line-height: 1.6;
    max-height: 55vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Botão dev SQL viewer (visível apenas para isdev=true) */
.sg-dev-sql-btn {
    border-radius: 4px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e3f2fd;
    border: 2px solid #1976d2;
    color: #1565c0;
    transition: background-color 0.2s;
}
.sg-dev-sql-btn:hover {
    background-color: #bbdefb;
}

/* Dark mode */
.e-dark-mode .sg-diag-btn--ok    { background-color: #1b3a1f; border-color: #66bb6a; color: #a5d6a7; }
.e-dark-mode .sg-diag-btn--error { background-color: #3b1a1a; border-color: #ef5350; color: #ef9a9a; }
.e-dark-mode .sg-diag-error-box  { background: #3b1a1a; border-color: #7f3030; border-left-color: #ef5350; }
.e-dark-mode .sg-diag-error-label { color: #ef9a9a; }
.e-dark-mode .sg-diag-error-msg  { color: #ef9a9a; }
.e-dark-mode .sg-diag-sql        { background: #3d3d3d; border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.82); }
.e-dark-mode .sg-dev-sql-btn     { background-color: #0d253f; border-color: #42a5f5; color: #90caf9; }
.e-dark-mode .sg-dev-sql-btn:hover { background-color: #173560; }
.e-dark-mode .sg-diag-header--dev { color: #64b5f6; }

/* ── sg-diag-report — botão e diálogo de reporte de erro ── */
.sg-diag-report-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.sg-diag-report-btn.e-btn {
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 8px 18px;
    transition: all 0.2s;
}
.sg-diag-report-btn.e-btn:hover {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}
.sg-diag-header--report { color: #1565c0; }

.sg-diag-report-confirm-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    text-align: center;
}
.sg-diag-report-confirm-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, #1565c0 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-diag-report-confirm-icon { font-size: 1.5rem; color: #1565c0; }
.sg-diag-report-confirm-text {
    font-size: 0.85rem;
    color: var(--color-sf-content-text-color);
    line-height: 1.5;
    margin: 0;
}
.sg-diag-report-confirm-detail {
    display: flex;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-sf-content-text-color-alt1);
    background: rgba(0,0,0,0.03);
    padding: 6px 14px;
    border-radius: 6px;
}
.sg-diag-report-confirm-detail-label { font-weight: 600; }
.sg-diag-report-confirm-send.e-btn { border-radius: 6px; }

/* dark mode */
.e-dark-mode .sg-diag-report-bar { border-top-color: rgba(255,255,255,0.08); }
.e-dark-mode .sg-diag-report-btn.e-btn { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.e-dark-mode .sg-diag-report-btn.e-btn:hover { background: linear-gradient(135deg, #1565c0, #1976d2); box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3); }
.e-dark-mode .sg-diag-header--report { color: #64b5f6; }
.e-dark-mode .sg-diag-report-confirm-icon-wrap { background: color-mix(in srgb, #42a5f5 15%, transparent); }
.e-dark-mode .sg-diag-report-confirm-icon { color: #64b5f6; }
.e-dark-mode .sg-diag-report-confirm-detail { background: rgba(255,255,255,0.05); }

/* ============================================================
   sg-obrigatorio — decoração de campos obrigatórios
   Asterisco vermelho após o label flutuante (FloatLabelType.Always)
   ============================================================ */

/* Borda vermelha sólida à esquerda — aplica diretamente no componente Syncfusion */
.sg-obrigatorio.e-input-group,
.sg-obrigatorio .e-input-group,
.sg-obrigatorio.e-control-wrapper,
div.sg-obrigatorio > .e-input-group {
    border-left: 4px solid #e53935 !important;
    border-radius: 2px 0 0 2px;
}

/* SfTextBox, SfNumericTextBox, SfDatePicker, SfDateTimePicker,
   SfTextArea — label flutuante com classe e-float-text */
.sg-obrigatorio .e-float-text::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
    font-size: 0.85em;
    vertical-align: super;
    line-height: 0;
}

/* SfComboBox — label com classe e-label */
.sg-obrigatorio .e-label::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
    font-size: 0.85em;
    vertical-align: super;
    line-height: 0;
}

/* Dark mode — vermelho levemente mais claro para contraste */
.e-dark-mode .sg-obrigatorio.e-input-group,
.e-dark-mode .sg-obrigatorio .e-input-group,
.e-dark-mode .sg-obrigatorio.e-control-wrapper,
.e-dark-mode div.sg-obrigatorio > .e-input-group {
    border-left-color: #ef5350 !important;
}

.e-dark-mode .sg-obrigatorio .e-float-text::after,
.e-dark-mode .sg-obrigatorio .e-label::after {
    color: #ef5350;
}

/* ── Popup do Designer de campos (sgdes-popup) — fontes compactas ── */
.sgdes-popup .e-input-group input,
.sgdes-popup .e-input-group .e-input,
.sgdes-popup .e-input-group textarea,
.sgdes-popup .e-control-wrapper input,
.sgdes-popup .e-control-wrapper .e-input,
.sgdes-popup .e-ddl .e-input {
    font-size: 0.78rem !important;
}

.sgdes-popup .e-float-text,
.sgdes-popup .e-label-top,
.sgdes-popup .e-label-bottom,
.sgdes-popup label.e-float-text,
.sgdes-popup .e-float-input label,
.sgdes-popup .e-float-input.e-control-wrapper label {
    font-size: 0.7rem !important;
}

.sgdes-popup .e-checkbox-wrapper .e-label {
    font-size: 0.78rem !important;
}

/* ── VisionBar (sgvb-) — barra de visões e controles ────────────── */

.sgvb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 0;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 50px;
}

/* Chip pill — seletor de visão */
.sgvb-vision-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-sf-content-bg-color);
    border: 1px solid var(--color-sf-border-color);
    border-radius: 8px;
    padding: 4px 8px 4px 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.sgvb-vision-chip:hover {
    border-color: var(--color-sf-primary);
    box-shadow: 0 0 0 1px var(--color-sf-primary);
}

/* Ícone de olho no chip */
.sgvb-chip-icon {
    font-size: 16px !important;
    color: var(--color-sf-primary) !important;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sgvb-chip-icon::before {
    color: var(--color-sf-primary) !important;
}

/* SfMenu dentro do chip — remove visual padrão do Syncfusion */
.sgvb-menu.e-menu-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.sgvb-menu .e-menu.e-menu-parent {
    background: transparent !important;
    padding: 0 !important;
}

.sgvb-menu .e-menu-item {
    background: transparent !important;
    padding: 0 4px 0 2px !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 0 !important;
}

.sgvb-menu .e-menu-item .e-menu-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-sf-content-text-color) !important;
}

.sgvb-menu .e-menu-item .e-caret {
    font-size: 10px !important;
    color: var(--color-sf-content-text-color-alt1) !important;
    display: none !important;
}

.sgvb-menu .e-menu-item:hover,
.sgvb-menu .e-menu-item.e-focused {
    background: transparent !important;
}

.sgvb-menu .e-menu-item:hover .e-menu-text,
.sgvb-menu .e-menu-item.e-focused .e-menu-text {
    color: var(--color-sf-primary) !important;
}

/* KPIs inline — card estilo meta-totais */
.sgvb-kpis {
    display: flex;
    align-items: center;
    gap: 0;
    flex: none;
    width: fit-content;
}

/* ── Controles de visualização à direita ────────────────────────── */
.sgvb-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Separador vertical entre toggle e switcher */
.sgvb-ctrl-sep {
    width: 1px;
    height: 22px;
    background: var(--color-sf-border-color);
    flex-shrink: 0;
    margin: 0 6px;
}

/* Ícone do balão do diálogo de edição — sempre branco (3 camadas) */
.sgdlg-title-icon-wrap span { color: #fff !important; }
.sgdlg-title-icon-wrap span[class*="icon-"]::before { color: #fff !important; }

/* ============================================================
   sgdlg — Diálogo de edição (Grid + SubGrid)
   Visual alinhado com sg-header-container (balão do grid)
   ============================================================ */

/* ── Container do header — card arredondado com sombra ── */
.sgdlg-header-wrap {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 0 10px;
    position: relative;
}

/* ── Botão X (close) dentro do card do header ── */
.e-dlg-header-content:has(.sgdlg-header-wrap) {
    /* padding: 0 !important; */
    /* background: transparent; */
}

.e-dlg-header-content:has(.sgdlg-header-wrap) .e-btn.e-dlg-closeicon-btn,
.sg-subform-panel.e-dialog .e-btn.e-dlg-closeicon-btn {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    /* Sobrescreve bottom:0 e left:0 da Syncfusion default — sem isso o botão
       estica de canto a canto do dialog (32px alto x ~1657px largura) e fica
       um overlay invisível clicável cobrindo o conteúdo do painel. */
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 10 !important;
}

/* ── Linha 1: balloon (título) + metadados inline ── */
.sgdlg-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Grupo direito: meta-totais + botão fechar — alinhado à direita */
.sgdlg-title-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Balloon do título (ícone + nome + subtítulo + badge) */
.sgdlg-balloon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    max-width: 50%;
}

/* Botão fechar (X) no header do dialog — fica no final da title-bar */
.sgdlg-balloon-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-sf-content-text-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sgdlg-balloon-close:hover {
    background: var(--color-sf-hover-bg);
}

.sgdlg-balloon-close:active {
    background: var(--color-sf-pressed-bg, rgba(0, 0, 0, 0.1));
}

.sgdlg-balloon-close .e-icons {
    font-size: 28px;
    color: var(--color-sf-danger, #d83b01) !important;
}

.sgdlg-title-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--sys-color, var(--color-sf-primary, #0099bc));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.sgdlg-title-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sgdlg-form-name {
    font-size: 16px !important;
    font-weight: 100 !important;
    /* color: var(--bs-orange) !important; */
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgdlg-form-sub {
    font-size: 11px;
    color: var(--color-sf-content-text-color-alt1);
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────
   Print do RPS — quando o componente ImprimirRps está aberto e o user
   clica "Imprimir" (window.print), só a área do "papel" deve sair na
   página A4. Sem essas regras o navegador imprime o app inteiro
   (sidebars, dialog wrapper Syncfusion, header da app, etc.).

   Técnica: visibility:hidden em tudo, depois revela só o .sgrps-paper
   (posicionado em absolute pra ocupar a folha). Isso é mais confiável
   que display:none quando há flex/grid layouts envolvidos.

   Globais em vez de scoped CSS porque .sgrps-paper vive dentro do
   Syncfusion dialog teleportado pro body — fora do escopo do component.
   ────────────────────────────────────────────────────────────── */
/* O .sgrps-paper representa o papel A4 do RPS — sempre fundo branco e texto preto,
   independente do tema (dark mode tinha cascata #adadad deixando os textos cinza-claro
   no preview e na impressão). */
body.e-dark-mode .sgrps-paper,
body.e-dark-mode .sgrps-paper *:not([class*="icon-"]):not(.e-icons) {
    color: #000;
}
body.e-dark-mode .sgrps-paper .sgrps-muted { color: #444; }
body.e-dark-mode .sgrps-paper .sgrps-field-label,
body.e-dark-mode .sgrps-paper .sgrps-numero-label { color: #555; }
body.e-dark-mode .sgrps-paper .sgrps-outras-info { color: #444; }
body.e-dark-mode .sgrps-paper .sgrps-footer { color: #666; }

/* ════════════════════════════════════════════════════════════════
   @media print — RPS (NFS-e). TODAS as regras condicionadas em
   body.printing-rps (adicionada por sgRpsPrint em segla-detail.js)
   pra nao vazar pra outros prints da app (faturamento etc).
   @page portrait e injetado dinamicamente pelo sgRpsPrint.
   ════════════════════════════════════════════════════════════════ */
@media print {
    /* Esconde TUDO no documento... so quando imprimindo RPS */
    body.printing-rps * {
        visibility: hidden;
    }
    /* ...exceto o RPS marcado pelo sgRpsPrint() (apenas o visível).
       Se múltiplos .sgrps-paper existem no DOM (painéis aninhados), só o
       que tem .sgrps-paper--printing é revelado — evita "duas cópias" no
       preview de impressão. */
    body.printing-rps .sgrps-paper--printing,
    body.printing-rps .sgrps-paper--printing * {
        visibility: visible;
    }

    /* Força fundo branco mesmo no dark mode — o body.e-dark-mode tem
       background escuro que vazava como "moldura preta" ao redor do papel. */
    body.printing-rps,
    body.printing-rps.e-dark-mode {
        background: #fff !important;
        color: #000 !important;
    }

    /* Força cor preta dentro do papel — a regra global do dark mode estava
       cascateando #adadad pros textos do RPS, deixando ilegíveis no print. */
    body.printing-rps .sgrps-paper--printing,
    body.printing-rps .sgrps-paper--printing *:not([class*="icon-"]):not(.e-icons) {
        color: #000 !important;
    }
    body.printing-rps .sgrps-paper--printing .sgrps-muted { color: #444 !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-field-label,
    body.printing-rps .sgrps-paper--printing .sgrps-numero-label { color: #555 !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-outras-info { color: #444 !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-footer { color: #666 !important; }

    /* Papel ocupa a folha inteira sem caixa/sombra/wrap.
       Compactado para caber em 1 página A4: padding 0, font 9.5px,
       linhas mais densas. */
    body.printing-rps .sgrps-paper--printing {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        font-size: 9.5px !important;
    }
    body.printing-rps .sgrps-paper--printing .sgrps-section-title { margin-top: 6px !important; padding: 2px 0 !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-row { margin-top: 4px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-emitente,
    body.printing-rps .sgrps-paper--printing .sgrps-numero-box { padding: 4px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-field { padding: 2px 6px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-field-value { font-size: 10px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-discriminacao { padding: 4px 6px !important; min-height: 40px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-codigo-servico { padding: 2px 6px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-valores th,
    body.printing-rps .sgrps-paper--printing .sgrps-valores td { padding: 3px 6px !important; font-size: 9.5px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-retencoes { padding: 3px 6px !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-outras-info { padding: 4px 6px !important; min-height: 0 !important; }
    body.printing-rps .sgrps-paper--printing .sgrps-footer { margin-top: 4px !important; padding-top: 3px !important; }
}

/* Descrição simplificada do formulário — 3ª linha do header do edit dialog.
   Quebra texto (até 2 linhas) e cor um pouco mais saturada que o sub. */
.sgdlg-form-desc {
    display: block;
    font-size: 11px;
    color: var(--color-sf-content-text-color-alt2, #64748b);
    line-height: 1.35;
    margin-top: 2px;
    max-width: 720px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badge de modo (Novo / Editar) */
.sgdlg-mode-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sgdlg-mode-badge--new {
    background: var(--color-sf-success-light-alt);
    color: var(--color-sf-success);
    border: 1px solid var(--color-sf-success);
}

.sgdlg-mode-badge--edit {
    background: var(--color-sf-primary-light-alt, #e8f0fe);
    color: var(--color-sf-primary);
    border: 1px solid var(--color-sf-primary);
}

.e-dark-mode .sgdlg-mode-badge--new {
    background: var(--color-sf-success);
    color: #fff;
    border-color: var(--color-sf-success);
}

.e-dark-mode .sgdlg-mode-badge--edit {
    background: var(--color-sf-primary);
    color: #fff;
    border-color: var(--color-sf-primary);
}

/* ── Metadados inline (estilo totais) ── */
.sgdlg-meta-totais {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sgdlg-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgdlg-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sf-content-text-color-alt1);
}

.sgdlg-meta-value {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
}

.sgdlg-meta-pk {
    color: var(--color-sf-primary);
}

.sgdlg-meta-sep {
    width: 1px;
    height: 32px;
    background: var(--color-sf-border-light);
}

/* ── Linha 3: toolbar — cantos inferiores arredondados ── */
.sgdlg-toolbar-wrap {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* ── Footer customizado ── */
.sgdlg-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
}

.sgdlg-footer-actions .sgdlg-footer-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sgdlg-footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
    flex-wrap: wrap;
}

.sgdlg-footer-meta-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Quando .sgdlg-form-sub aparece no footer, alinhar com badges (era usado
   só no header, onde tinha layout de coluna; aqui é uma linha só). */
.sgdlg-footer-meta .sgdlg-form-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-sf-content-text-color-alt2, #6b7280);
    white-space: nowrap;
}

/* Variante empilhada — padrão definitivo do par "Tabela / Registro #X":
   1ª linha: nome da tabela em destaque (semibold, cor primária do texto);
   2ª linha: PK ou "Novo registro" em fonte menor, cor secundária. */
.sgdlg-form-sub--stacked {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    gap: 1px;
    white-space: nowrap;
}
.sgdlg-form-sub-table {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #1f2937);
    letter-spacing: 0.02em;
}
.sgdlg-form-sub-pk {
    font-size: 0.68rem;
    color: var(--color-sf-content-text-color-alt3, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* .sg-devref no footer não precisa de border-left/margin-right próprios — já
   tem .sgdlg-footer-meta-divider adjacente cuidando da separação visual. */
.sgdlg-footer-meta .sg-devref {
    border-left: none;
    margin-right: 0;
    padding: 0;
}

.sgdlg-footer-meta-divider {
    width: 1px;
    background: var(--color-sf-border-light, #e5e7eb);
    align-self: stretch;
}

.sgdlg-footer-meta .sgdlg-meta-label,
.sgdlg-footer-meta .sgdlg-meta-value {
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.68rem;
    color: var(--color-sf-content-text-color-alt3, #9ca3af);
}

/* ── Footer nativo do SfGrid dialog — esconder botões padrão ── */
.e-footer-content:has(.sgdlg-footer-actions) > .e-btn {
    display: none !important;
}

/* ── Footer inline (workaround do bug do FooterTemplate em Syncfusion 31.2.12) ──
   Renderizado dentro do <Template> do GridEditSettings ou do <Content> do SfDialog.
   Sticky-bottom dentro do .e-dlg-content que é o scroller. */
.sgdlg-footer-actions-inline {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--color-sf-content-bg-color, #fff);
    border-top: 1px solid var(--color-sf-border-light, #e5e7eb);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
    margin-top: 16px;
}

/* Edit dialog do Grid (Height=98%): força flex layout no .e-dlg-content
   pra que o footer inline (que tem margin-top:auto abaixo) pinne no bottom
   real do dialog em vez de ficar logo abaixo do form com espaço vazio em baixo. */
.sg-edit-dialog .e-dlg-content {
    display: flex !important;
    flex-direction: column !important;
}

.sg-edit-dialog .e-dlg-content > * {
    flex-shrink: 0;
}

.sg-edit-dialog .sgdlg-footer-actions-inline {
    margin-top: auto !important;
}
body.e-dark-mode .sgdlg-footer-actions-inline {
    background: var(--color-sf-content-bg-color, #1f2937);
    border-top-color: rgba(255,255,255,0.08);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}

/* Esconde o footer default da Syncfusion quando temos o footer-inline.
   O FooterTemplate não funciona em 31.2.12 mas a Syncfusion ainda renderiza
   os botões default (Save/Cancel) no .e-footer-content abaixo do conteúdo.
   Usa descendant pra cobrir estruturas aninhadas (.e-dlg-container > .e-dialog) que
   o SfGrid edit dialog cria. */
.e-dialog:has(.sgdlg-footer-actions-inline) .e-footer-content {
    display: none !important;
}

/* Exceção: o popup do Excel Filter abre como dialog filho dentro do edit dialog
   e tem seu próprio footer com OK/Cancelar/Limpar — re-mostrar.
   Mesma proteção pra Date filter, Number filter etc. (.e-popup com footer). */
.e-excelfilter .e-footer-content,
.e-flmenu .e-footer-content,
.e-popup.e-popup-open .e-excelfilter .e-footer-content,
.e-checkboxfilter .e-footer-content {
    display: flex !important;
}

/* ── Botões de ação do footer — sem borda nem fundo ── */
.sgdlg-action-cancel,
.sgdlg-action-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color, #1f2937);
}

.sgdlg-action-cancel:disabled,
.sgdlg-action-save:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.sgdlg-action-cancel .sgdlg-action-icon,
.sgdlg-action-save .sgdlg-action-icon {
    font-size: 1.1rem;
}

/* Cores fixas dos ícones — 3 camadas para superar specificity da fonte de ícones */
.sgdlg-action-cancel .sgdlg-action-icon,
.sgdlg-action-cancel .sgdlg-action-icon::before {
    color: #dc2626 !important;
}

.sgdlg-action-save .sgdlg-action-icon,
.sgdlg-action-save .sgdlg-action-icon::before {
    color: #16a34a !important;
}

/* ── Badge de contagem (anexos/followup) ── */
.sgdlg-attach-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-sf-primary);
    color: #fff !important;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Botão Cancelar — outlined neutro ── */
.sgdlg-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    background: transparent;
    color: var(--color-sf-content-text-color);
    border: 1px solid var(--color-sf-border-light);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.sgdlg-btn-cancel:hover {
    background: var(--color-sf-content-bg-color-alt1);
}

/* ── Botão Gravar — filled primário ── */
.sgdlg-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    background: var(--color-sf-primary);
    color: #fff;
    border: 1px solid var(--color-sf-primary);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.sgdlg-btn-save span { color: #fff; }
.sgdlg-btn-save:hover:not(:disabled) { opacity: 0.88; }
.sgdlg-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Botão Bloquear — âmbar ── */
.sgdlg-lock-btn--locked,
.sgdlg-lock-btn--locked:disabled {
    color: var(--color-sf-warning, #e67e22) !important;
    opacity: 1 !important;
    cursor: default !important;
}

.sgdlg-lock-btn--locked span {
    color: var(--color-sf-warning, #e67e22) !important;
}

/* ── Diálogo de confirmação bloqueio/desbloqueio ── */
.sgdlg-confirm-lock-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgdlg-confirm-lock-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    color: #fff;
}

.sgdlg-confirm-lock-icon-wrap span { color: #fff !important; }
.sgdlg-confirm-lock-icon-wrap span[class*="icon-"]::before { color: #fff !important; }
.sgdlg-confirm-icon--lock   { background: #c47a00; }
.sgdlg-confirm-icon--unlock { background: var(--color-sf-success); }

.sgdlg-confirm-lock-text { display: flex; flex-direction: column; gap: 2px; }
.sgdlg-confirm-lock-title { font-size: 0.95rem; font-weight: 600; color: var(--color-sf-content-text-color); }
.sgdlg-confirm-lock-sub { font-size: 0.73rem; color: var(--color-sf-content-text-color-alt1); }
.sgdlg-confirm-lock-msg { margin: 0 0 10px; font-size: 0.9rem; color: var(--color-sf-content-text-color); }

.sgdlg-confirm-lock-warn {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; background: #c47a00; border-radius: 6px;
    font-size: 0.82rem; color: #fff; margin: 0;
}

.sgdlg-confirm-lock-warn span { color: #fff !important; }
.sgdlg-confirm-lock-warn span[class*="icon-"]::before { color: #fff !important; }

.sgdlg-confirm-lock-info {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; background: var(--color-sf-primary); border-radius: 6px;
    font-size: 0.82rem; color: #fff; margin: 0;
}

.sgdlg-confirm-lock-info span { color: #fff !important; }
.sgdlg-confirm-lock-info span[class*="icon-"]::before { color: #fff !important; }

.sgdlg-btn-lock-confirm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; background: #c47a00; color: #fff;
    border: 1px solid #c47a00; border-radius: 4px;
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
}

.sgdlg-btn-lock-confirm span { color: #fff !important; }
.sgdlg-btn-lock-confirm span[class*="icon-"]::before { color: #fff !important; }
.sgdlg-btn-lock-confirm:hover { opacity: 0.88; }

/* ── Split body (formulário + painel lateral) ── */
.sgdlg-body-split {
    display: flex;
    height: calc(98vh - 280px);
    min-height: 400px;
    overflow: hidden;
}

.sgdlg-body-form {
    flex: 1;
    overflow-y: auto;
    transition: flex 0.25s ease;
    min-width: 0;
}

.sgdlg-body-form--with-panel { flex: 0 0 58%; }

.sgdlg-body-panel {
    flex: 0 0 42%;
    border-left: 1px solid var(--color-sf-border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: sgdlg-panel-in 0.2s ease;
}

@keyframes sgdlg-panel-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sgdlg-panel-close {
    position: absolute;
    top: 10px; right: 10px; z-index: 1;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-sf-border-light);
    border-radius: 4px; cursor: pointer;
    color: var(--color-sf-content-text-color-alt1);
}

.sgdlg-panel-close:hover {
    background: var(--color-sf-content-bg-color-alt1);
}

/* Botão de toggle (ex.: gráficos) */
.sgvb-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--color-sf-border-color);
    background: var(--color-sf-content-bg-color);
    color: var(--color-sf-icon-color);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sgvb-ctrl-btn span { color: inherit !important; line-height: 1; }

.sgvb-ctrl-btn:hover:not(:disabled) {
    background: var(--color-sf-primary-bg-color);
    border-color: var(--color-sf-primary);
    color: var(--color-sf-primary);
}

.sgvb-ctrl-btn--active,
.sgvb-ctrl-btn--active:hover {
    background: var(--color-sf-primary) !important;
    border-color: var(--color-sf-primary) !important;
    color: #fff !important;
}

.sgvb-ctrl-btn--active span { color: #fff !important; }

.sgvb-ctrl-btn--active span[class*="icon-"]::before {
    color: #fff !important;
}

.sgvb-ctrl-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Switcher segmentado — pill com 3 visões */
.sgvb-view-switcher {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-sf-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-sf-content-bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sgvb-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 8px;
    height: 30px;
    border: none;
    border-right: 1px solid var(--color-sf-border-color);
    background: transparent;
    color: var(--color-sf-content-text-color);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.sgvb-view-btn:last-child { border-right: none; }

.sgvb-view-btn span[class*="icon-"] {
    font-size: 1rem;
    line-height: 1;
    color: inherit !important;
}

.sgvb-view-btn--active {
    background: var(--color-sf-primary) !important;
    color: #fff !important;
}

.sgvb-view-btn--active span { color: #fff !important; }
.sgvb-view-btn--active span[class*="icon-"]::before { color: #fff !important; }

.sgvb-view-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Quando os chips/botões sgvb estão dentro de uma SfToolbar (.e-toolbar),
   herdam o look flat da toolbar — sem background, border ou shadow.
   Estados --active mantêm o destaque (override explícito com mesma specificity logo abaixo). */
.e-toolbar .sgvb-vision-chip,
.e-toolbar .sgvb-ctrl-btn:not(.sgvb-ctrl-btn--active),
.e-toolbar .sgvb-view-switcher {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.e-toolbar .sgvb-vision-chip:hover,
.e-toolbar .sgvb-ctrl-btn:hover:not(:disabled):not(.sgvb-ctrl-btn--active) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Override explícito do estado ativo dentro da SfToolbar — senão o
   `.e-toolbar .sgvb-ctrl-btn` acima vence por specificity e o botão "some". */
.e-toolbar .sgvb-ctrl-btn--active,
.e-toolbar .sgvb-ctrl-btn--active:hover {
    background: var(--color-sf-primary) !important;
    border-color: var(--color-sf-primary) !important;
    color: #fff !important;
}
.e-toolbar .sgvb-view-btn {
    border-right: none !important;
}

.sgvb-view-label {
    font-size: 0.78rem;
    font-weight: 500;
}

/* ── sgds-grid-wrap — grid wrapper para páginas MetaBase (shared) ── */
.sgds-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   sgmb — MetaBase Header Bar (balloon + KPIs na mesma linha)
   ============================================================ */

.sgmb-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: var(--color-sf-content-bg-color-alt1);
    padding: 8px 16px;
    min-height: 56px;
}

/* ── Balloon (mesmo visual do BarraTitulo) ── */
.sgmb-balloon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-sf-content-bg-color);
    border: 1px solid var(--color-sf-border-color);
    border-radius: 10px;
    padding: 8px 18px 8px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.sgmb-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-sf-primary);
    border-radius: 8px;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.sgmb-icon {
    font-size: 1.1rem;
    color: #fff;
}

.sgmb-icon-wrap .sgmb-icon { color: #fff; }
.sgmb-icon-wrap span[class*="icon-"]::before { color: #fff !important; }
.sgmb-icon-wrap .e-icons { color: #fff !important; }

.sgmb-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgmb-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
    line-height: 1.3;
    white-space: nowrap;
}

.sgmb-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-sf-content-text-color);
    opacity: 0.55;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 540px;
}

/* ── KPIs Totais (à direita do balloon) ── */
.sgmb-totais {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--color-sf-content-bg-color);
    border: 1px solid var(--color-sf-border-light);
    border-radius: 10px;
    flex-shrink: 0;
}

.sgmb-totais-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgmb-totais-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-sf-content-text-color-alt1);
    letter-spacing: 0.05em;
}

.sgmb-totais-value {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
}

.sgmb-totais-value--highlight {
    color: var(--color-sf-primary);
}

.sgmb-totais-sep {
    width: 1px;
    height: 32px;
    background: var(--color-sf-border-light);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .sgmb-totais {
        display: none;
    }
    .sgmb-subtitle {
        display: none;
    }
}

/* ── SubGrid — ícones dos botões expand/collapse ─────────────────── */
.sgsg-expand-btn .sgsg-btn-icon,
.sgsg-collapse-btn .sgsg-btn-icon {
    font-size: 18px !important;
    color: var(--color-sf-icon-color) !important;
    line-height: 1;
}

/* ── SubGrid — toolbar do grid (sgsg-grid-toolbar): ícones cinza-azulado
   Diferencia visualmente da toolbar do diálogo (que usa azul primário).
   Usa --color-sf-content-text-color-alt1 (cinza secundário) para menor
   destaque visual — o SubGrid é contexto secundário dentro do formulário.
──────────────────────────────────────────────────────────────────── */
.sgsg-grid-toolbar .e-tbar-btn .e-btn-icon,
.sgsg-grid-toolbar .e-tbar-btn .e-icons {
    color: var(--color-sf-content-text-color-alt1) !important;
}

.sgsg-grid-toolbar .e-tbar-btn .e-btn-icon::before,
.sgsg-grid-toolbar .e-tbar-btn .e-icons::before,
.sgsg-grid-toolbar .e-tbar-btn span[class*="icon-"]::before {
    color: var(--color-sf-content-text-color-alt1) !important;
}

/* ── ProcessamentoLote — overlay e dialog ─────────────────────────── */
.sglote-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sglote-dialog {
    width: 80%;
    height: 80vh;
    background: var(--color-sf-content-bg-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── SubGrid — botões Salvar/Cancelar sobrepostos na toolbar ──────── */
.sgsg-grid-wrap {
    position: relative;
}

.sgsg-tb-edit-actions {
    position: absolute;
    top: 7px;
    left: 50%;
    height: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0;
}

.sgsg-tb-save,
.sgsg-tb-cancel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 12px;
    padding: 0 12px;
    height: 32px;
    cursor: pointer;
    color: var(--color-sf-content-text-color-alt1);
    transition: background 0.1s;
}
.sgsg-tb-save:hover,
.sgsg-tb-cancel:hover {
    background: var(--color-sf-content-bg-color-alt1);
}

.sgsg-tb-save span,
.sgsg-tb-cancel span { font-size: 16px; }

.sgsg-tb-save span { color: var(--color-sf-success, #107c10) !important; }
.sgsg-tb-save span[class*="icon-"]::before { color: var(--color-sf-success, #107c10) !important; font-size: 16px !important; }

.sgsg-tb-cancel span { color: var(--color-sf-danger, #d83b01) !important; }
.sgsg-tb-cancel span[class*="icon-"]::before { color: var(--color-sf-danger, #d83b01) !important; font-size: 16px !important; }

/* ── SubGrid — coluna de ação (sgsg-action-col) ──────────────────── */

/* Célula da coluna: sem padding, conteúdo centralizado */
.e-grid .e-rowcell:has(.sgsg-action-cell) {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Container flex: slot do cadeado (fixo) + botão editar (direita) */
.sgsg-action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 0 4px;
    width: 100%;
}

/* Slot reservado para o cadeado — largura fixa para manter alinhamento */
.sgsg-action-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
}

/* Botão de ação: minimalista, sem hover, apenas o ícone clicável */
.sgsg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: opacity 0.1s;
}

.sgsg-action-btn:hover {
    background: transparent;
    opacity: 0.7;
}

.sgsg-action-btn:focus-visible {
    outline: 2px solid var(--color-sf-primary);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Ícone padrão (lápis): discreto, cinza secundário */
.sgsg-action-icon {
    font-size: 14px;
    line-height: 1;
    color: var(--color-sf-content-text-color-alt1) !important;
    pointer-events: none;
}

.sgsg-action-icon::before {
    color: var(--color-sf-content-text-color-alt1) !important;
    font-size: 14px !important;
}

/* Ícone de cadeado (bloqueado): amber semântico */
.sgsg-action-icon--locked {
    color: #c58000 !important;
}

.sgsg-action-icon--locked::before {
    color: #c58000 !important;
    font-size: 14px !important;
}

.e-dark-mode .sgsg-action-icon--locked,
.e-dark-mode .sgsg-action-icon--locked::before {
    color: #d4900a !important;
}

/* ── Side Panel — diálogo flutuante lateral (reutilizável) ────────── */
.sg-side-panel.e-dialog {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18) !important;
}

.sg-side-panel .e-dlg-header-content {
    display: none !important;
}

.sg-side-panel .e-dlg-content {
    padding: 0 !important;
    overflow: hidden;
    height: 100%;
}

/* ── HistoricoPanel (sghp-*) ─────────────────────────────────────── */
.sghp-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-sf-content-bg-color-alt1);
}

.sghp-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-sf-border-light);
    flex-shrink: 0;
}

.sghp-header-icon-wrap {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sghp-header-icon,
.sghp-header-icon::before {
    font-size: 0.875rem;
    color: #ffffff !important;
}

.sghp-header-icon {
    filter: brightness(0) invert(1);
}

.sghp-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.sghp-header-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
}

.sghp-header-count {
    font-size: 0.6875rem;
    color: var(--color-sf-content-text-color-alt1);
}

.sghp-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

/* Separador de data */
.sghp-date-sep {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-sf-content-text-color-alt1);
    padding: 0.625rem 1rem 0.25rem 1rem;
    position: sticky;
    top: 0;
    background: var(--color-sf-content-bg-color-alt1);
    z-index: 1;
}

/* Item do histórico */
.sghp-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-sf-border-light) 50%, transparent);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.sghp-item:last-child {
    border-bottom: none;
}

.sghp-item:hover {
    background: var(--color-sf-primary-bg-color);
}

.sghp-item:hover .sghp-item-name {
    color: var(--color-sf-primary-text-color);
}

.sghp-item-icon-wrap {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--color-sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sghp-item-icon,
.sghp-item-icon::before {
    font-size: 0.75rem;
    color: #ffffff !important;
}

.sghp-item-icon {
    filter: brightness(0) invert(1);
}

.sghp-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.sghp-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.sghp-item-code {
    font-size: 0.625rem;
    color: var(--color-sf-content-text-color-alt1);
}

.sghp-item-time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1);
    font-variant-numeric: tabular-nums;
}

/* Estado vazio */
.sghp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.sghp-empty-icon {
    font-size: 2rem;
    color: var(--color-sf-content-text-color-alt1);
    opacity: 0.4;
}

.sghp-empty-text {
    font-size: 0.8125rem;
    color: var(--color-sf-content-text-color-alt1);
}

/* ── Grid/SubGrid — badge de regra (pílula colorida) ─────────────── */
.sgrid-regra-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
}

/* ── BarraTitulo — ícone branco sobre fundo primário ─────────────── */
/* A fonte FluentSystemIcons aplica cor via ::before — precisamos mirar lá */
.sgbt-icon-wrap span[class*="icon-"]::before {
    color: #ffffff !important;
    font-size: 22px !important;
}

.sgnav-sidebar .sgnav-footer-icon {
    color: rgba(255, 255, 255, 0.32) !important;
}

/* ── Processamentos dropdown — botão e lista ── */
.e-btn.sgprc-dropdown,
.e-css.e-btn.sgprc-dropdown {
    font-size: 12px !important;
    font-weight: 400 !important;
}

.e-dropdown-popup.sgprc-dropdown .e-ul {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

.e-dropdown-popup.sgprc-dropdown .e-item {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* ── Processamento Picker Dialog ── */
/* Posicionado logo abaixo da barra de menus do form (toolbar fica em ~y=120-160) */
.sgprc-picker-dlg.e-dialog {
    position: absolute !important;
    left: 50px !important;
    top: 130px !important;
    transform: none !important;
    margin: 0 !important;
}

.sgprc-picker-dlg .e-dlg-content {
    padding: 16px 20px 20px !important;
}

.sgprc-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
}

.sgprc-picker-header-icon {
    font-size: 18px;
    color: var(--color-sf-primary);
}

.sgprc-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.sgprc-picker-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--color-sf-border-light, #e2e8f0);
    border-radius: 8px;
    background: var(--color-sf-content-bg-color, #fff);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color, #1e293b);
    line-height: 1.3;
    min-height: 44px;
}

.sgprc-picker-card:hover {
    border-color: var(--color-sf-primary);
    background: var(--color-sf-primary-bg-color, #eff6ff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sgprc-picker-card:active {
    transform: scale(0.98);
}

.sgprc-picker-card-icon {
    font-size: 14px;
    color: var(--color-sf-primary);
    flex-shrink: 0;
}

.sgprc-picker-card-text {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* sgdlg-footer — agora consolidado na seção sgdlg acima */
.e-content.e-lib.e-touch {
    padding: 10px;
}

/* ============================================================
   sgdlg — Hierarquia visual do formulário de edição
   Cria separação clara entre as camadas:
     Fundo do dialog → Área do form → Blocos de campos
     → Zona de tabs → Barra de tabs → Toolbar do subgrid → Grid
   Funciona em light mode e dark mode via variáveis --color-sf-*
   ============================================================ */

/* ── 1. Fundo da área de conteúdo do dialog ────────────────────────
   Cria o "plano de fundo" levemente mais escuro que os cards/blocos.
   Aplica-se ao container gerado pelo SfDialog (.e-dlg-content).
   Só afeta dialogs que contenham o wrapper sgdlg-header-wrap acima,
   via seletor de irmão (dialogs de confirmação não são afetados).
──────────────────────────────────────────────────────────────────── */
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content {
    /* background e padding removidos — flat */
}

/* ── 2. Blocos de campos — estilos já definidos na seção principal (.bloco) ── */


/* ── 3. Zona de tabs (quadro-centro) — elevação sutil ───────────────
   Shadow discreta para elevar a zona de tabs do fundo do dialog.
   Sem borda superior colorida — o SfTab usa seu estilo padrão Fluent 2.
──────────────────────────────────────────────────────────────────── */
.quadro-centro {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important;
}

.e-dark-mode .quadro-centro {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28) !important;
}

/* ── 4. Barra de tabs — estilo DEFAULT da Syncfusion Fluent 2 ───────
   Nenhuma customização aqui. O tema Fluent 2 já define visual correto.
──────────────────────────────────────────────────────────────────── */

/* ── 5. Área de conteúdo das tabs — fundo e padding inferior ────────
   Fundo consistente com o dialog; padding-bottom para que o conteúdo
   da tab (subgrid/apêndice) não fique colado na borda inferior.
──────────────────────────────────────────────────────────────────── */
.quadro-centro .e-content {
    background: color-mix(in srgb, var(--color-sf-content-bg-color) 60%, var(--color-sf-content-bg-color-alt1) 40%) !important;
    padding: 0 0 12px 0 !important;
}


/* ── 7. Grid dentro da tab — wrapper com padding e raio ─────────────
   O SfGrid não tem raio nativo. Envolvemos com padding no container
   do sgsg-wrap (div raiz do SubGrid.razor) e aplicamos raio na borda
   do próprio grid. O seletor usa descendente para tolerar divs
   intermediárias geradas pelo Blazor ContentTemplate.
──────────────────────────────────────────────────────────────────── */
.quadro-centro .e-content .sgsg-wrap {
    padding: 0 8px 8px 8px;
}

.quadro-centro .e-content .sgsg-wrap .e-grid {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-sf-border-light) !important;
}

/* ── 8. Borda superior do footer do dialog ──────────────────────────
   Cria separação clara entre o corpo (formulário) e os botões de ação.
──────────────────────────────────────────────────────────────────── */
.e-dialog:has(.sgdlg-header-wrap) .e-footer-content {
    /* border-top: 1px solid var(--color-sf-border-light) !important; */
    /* background: var(--color-sf-content-bg-color-alt1) !important; */
}

/* ── 9. Separador antes da zona de tabs ────────────────────────────
   Linha horizontal sutil entre a última seção de campos e as tabs.
   Já existe margin-top no quadro-centro — reforçamos com padding
   no container pai para criar espaço aerado.
──────────────────────────────────────────────────────────────────── */
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content .content-wrapper {
    padding-bottom: 4px;
}

/* ── Campos alinhados ao topo do dialog (sem distribuição vertical) ── */
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content .content-wrapper {
    flex: 0 1 auto !important;
}

/* ── sg-combo-nav: Atalhos de navegação nos ComboBox ──────────── */
.sg-combo-nav-row {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-top: 16px;
}

.sg-combo-nav-row > .e-control-wrapper,
.sg-combo-nav-row > .e-input-group,
.sg-combo-nav-row > span {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    width: 0 !important;
}

.sg-combo-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-sf-content-text-color-alt1);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    margin-bottom: 2px;
    padding: 0;
}

.sg-combo-nav-btn:hover {
    background: var(--color-sf-primary-lighter, rgba(0,120,212,.1));
    color: var(--color-sf-primary);
}

.sg-combo-nav-btn:hover span[class*="icon-"]::before {
    color: var(--color-sf-primary) !important;
}

.sg-combo-nav-btn span[class*="icon-"]::before {
    font-size: 16px;
}

.sg-combo-nav-btn--disabled {
    opacity: .25;
    pointer-events: none;
    cursor: default;
}

/* ── sg-subform-panel: Painel lateral do sub-formulário (70vw) ── */
.sg-subform-panel,
.sg-subform-panel.e-dialog,
.e-dialog.sg-subform-panel,
.sg-subform-panel.e-popup {
    position: fixed !important;
    right: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    width: 70vw !important;
    max-width: 70vw !important;
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 !important;
    border-radius: 12px 0 0 12px !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.18) !important;
    z-index: 100002 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    inset: 12px 0 12px auto !important;  /* atalho top/right/bottom/left */
}
.sg-subform-panel.e-dialog .e-dlg-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;       /* o próprio e-dlg-content rola */
    overflow-x: hidden !important;
    position: relative !important;
}
.sg-subform-panel-body {
    padding: 10px 16px;
    padding-bottom: 72px;               /* deixa espaço para o footer sticky não cobrir conteúdo */
}
.sg-subform-panel-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-sf-border-light, #e5e7eb);
    background: var(--color-sf-content-bg-color, #fff);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.sg-subform-panel-footer .sgdlg-footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.sg-subform-panel-footer .sgdlg-footer-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
body.e-dark-mode .sg-subform-panel-footer {
    border-top-color: rgba(255,255,255,0.08);
    background: var(--color-sf-content-bg-color, #1f2937);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}
.sg-subform-panel.e-dialog .e-footer-content {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    min-height: 56px !important;
    border-top: 1px solid var(--color-sf-border-light, #e5e7eb) !important;
    padding: 8px 16px !important;
    background: var(--color-sf-content-bg-color, #fff) !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.e-dark-mode .sg-subform-panel.e-dialog .e-footer-content {
    border-top-color: rgba(255,255,255,0.08) !important;
    background: var(--color-sf-content-bg-color, #1f2937) !important;
}

.sg-subform-panel .e-dlg-content .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.sg-subform-panel .e-dlg-header-content {
    padding: 10px !important;
    border-bottom: 1px solid var(--color-sf-border-light);
    background: transparent;
}

.sg-subform-panel .sgdlg-header-wrap {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ── Header limpo do sub-form panel (drill-down de combo) ── */
.sg-subform-header .sgdlg-title-bar {
    padding: 4px 4px 4px 0;
}

.sg-subform-header .sgdlg-balloon {
    max-width: calc(100% - 60px);
}

.sg-subform-header .sgdlg-form-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-sf-content-text-color);
}

.sg-subform-header .sgdlg-form-desc {
    font-size: 11px;
    margin-top: 0;
    -webkit-line-clamp: 1;
    max-width: 100%;
}

.sg-subform-panel .e-dlg-content {
    padding: 10px !important;
    overflow-y: auto;
}

/* REGISTROS / KPIs do Grid filho — deixa no fluxo normal pra não sobrepor
   o header limpo do sub-form panel (era position:absolute, top:14px). */
.sg-subform-panel .sgvb-kpis {
    position: static;
    margin: 0 0 0 auto;
    z-index: auto;
}

.sg-subform-panel .sg-header-container {
    position: static;
}

.sg-subform-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sg-subform-panel-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--color-sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sg-subform-panel-header-icon span { color: #fff !important; }
.sg-subform-panel-header-icon span[class*="icon-"]::before { color: #fff !important; font-size: 18px; }

.sg-subform-panel-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sg-subform-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-subform-panel-sub {
    font-size: 11px;
    color: var(--color-sf-content-text-color-alt1);
}

.sg-subform-panel-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-sf-content-text-color-alt1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.sg-subform-panel-close:hover {
    background: var(--color-sf-content-bg-color-alt1);
}

/* ── sg-log: Painel de log de transações ──────────────── */
.sg-log-panel .e-dlg-header-content {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--color-sf-border-light);
}

.sg-log-panel .e-dlg-content {
    padding: 0 !important;
    overflow-y: auto;
}

.sg-log-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sg-log-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sg-log-header-icon span { color: #fff !important; }
.sg-log-header-icon span[class*="icon-"]::before { color: #fff !important; font-size: 18px; }

.sg-log-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sg-log-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
}

.sg-log-header-sub {
    font-size: 11px;
    color: var(--color-sf-content-text-color-alt1);
}

.sg-log-header-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--color-sf-primary);
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.sg-log-list {
    display: flex;
    flex-direction: column;
}

.sg-log-item {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-sf-border-light);
}

.sg-log-item:hover {
    background: var(--color-sf-content-bg-color-alt1);
}

.sg-log-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sg-log-item-icon--insert { background: #dcfce7; }
.sg-log-item-icon--insert span[class*="icon-"]::before { color: #16a34a !important; }
.sg-log-item-icon--update { background: #dbeafe; }
.sg-log-item-icon--update span[class*="icon-"]::before { color: #2563eb !important; }
.sg-log-item-icon--delete { background: #fee2e2; }
.sg-log-item-icon--delete span[class*="icon-"]::before { color: #dc2626 !important; }
.sg-log-item-icon--unknown { background: var(--color-sf-content-bg-color-alt1); }

.sg-log-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sg-log-item-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-log-item-transacao {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-sf-content-text-color);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sg-log-item-status {
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 6px;
}

.sg-log-item-status--ok {
    background: #dcfce7;
    color: #16a34a;
}

.sg-log-item-status--erro {
    background: #fee2e2;
    color: #dc2626;
}

.sg-log-item-usuario {
    font-size: 12px;
    color: var(--color-sf-content-text-color);
}

.sg-log-item-data {
    font-size: 11px;
    color: var(--color-sf-content-text-color-alt1);
}

.sg-log-item-query-wrap {
    margin-top: 4px;
}

.sg-log-item-query-toggle {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-sf-primary);
    cursor: pointer;
    user-select: none;
}

.sg-log-item-query {
    font-size: 11px;
    background: var(--color-sf-content-bg-color-alt1);
    border-radius: 4px;
    padding: 8px;
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    color: var(--color-sf-content-text-color);
}

.sg-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 8px;
    color: var(--color-sf-content-text-color-alt1);
}

.sg-log-empty-icon {
    font-size: 40px;
    opacity: .4;
}

.sg-log-empty p {
    font-size: 13px;
    margin: 0;
}

/* ============================================================
   HelpPanel — Painel de Documentação — sobrescritas globais
   (SfDialog teleporta para <body>; seletor deve ser global)
   Prefixo: sghlp-
   ============================================================ */

/* Posição fixa à direita, altura total */
.e-dialog.sghlp-dialog {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: -8px 0 40px rgba(0,0,0,0.5) !important;
}

/* Header: remove padding padrão do Syncfusion */
.e-dialog.sghlp-dialog .e-dlg-header-content {
    background: #161b27 !important;
    border-bottom: none !important;
    padding: 0 !important;
}

/* Área de conteúdo: sem padding Syncfusion, fundo escuro */
.e-dialog.sghlp-dialog .e-dlg-content {
    background: #0f1117 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    height: calc(100vh - 73px) !important;
}

/* Oculta o rodapé padrão do dialog */
.e-dialog.sghlp-dialog .e-footer-content {
    display: none !important;
}

/* Overlay escuro mais opaco para o painel lateral */
.e-dlg-overlay:has(+ .e-dialog.sghlp-dialog) {
    background: rgba(0,0,0,0.55) !important;
}

/* ── Ícones do header sobre fundo accent ──────────────────── */
.e-dialog.sghlp-dialog .sghlp-icon-wrap span,
.e-dialog.sghlp-dialog .sghlp-icon-wrap span::before {
    color: #e87c3e !important;
}

/* ── Botão fechar ─────────────────────────────────────────── */
.e-dialog.sghlp-dialog .sghlp-close-btn {
    color: #616880;
}

.e-dialog.sghlp-dialog .sghlp-close-btn:hover {
    background: #1e2535;
    color: #e8eaf0;
}

/* ── Conteúdo HTML (HELP_HTML) ────────────────────────────── */
.e-dialog.sghlp-dialog .sghlp-content h1 {
    font-size: 22px;
    font-weight: 700;
    color: #e8eaf0;
    margin: 0 0 12px;
    line-height: 1.25;
}

.e-dialog.sghlp-dialog .sghlp-content h2 {
    font-size: 15px;
    font-weight: 600;
    color: #e8eaf0;
    margin: 24px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.e-dialog.sghlp-dialog .sghlp-content h2::before {
    content: '';
    width: 3px;
    height: 15px;
    background: #e87c3e;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.e-dialog.sghlp-dialog .sghlp-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: #e8eaf0;
    margin: 20px 0 8px;
}

.e-dialog.sghlp-dialog .sghlp-content p {
    font-size: 13px;
    color: #a0a8bf;
    line-height: 1.7;
    margin-bottom: 12px;
}

.e-dialog.sghlp-dialog .sghlp-content ul,
.e-dialog.sghlp-dialog .sghlp-content ol {
    padding-left: 20px;
    margin-bottom: 14px;
}

.e-dialog.sghlp-dialog .sghlp-content li {
    font-size: 13px;
    color: #a0a8bf;
    line-height: 1.65;
    margin-bottom: 4px;
}

.e-dialog.sghlp-dialog .sghlp-content strong {
    color: #e8eaf0;
    font-weight: 500;
}

.e-dialog.sghlp-dialog .sghlp-content em {
    font-style: normal;
    font-size: 11px;
    background: #1e2535;
    padding: 1px 5px;
    border-radius: 3px;
    color: #f0a56b;
}

.e-dialog.sghlp-dialog .sghlp-content code {
    font-size: 12px;
    background: #1e2535;
    padding: 2px 6px;
    border-radius: 4px;
    color: #f0a56b;
}

.e-dialog.sghlp-dialog .sghlp-content pre {
    background: #1e2535;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 12px;
    color: #a0a8bf;
    line-height: 1.65;
    margin-bottom: 16px;
    overflow-x: auto;
}

.e-dialog.sghlp-dialog .sghlp-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 20px;
}

.e-dialog.sghlp-dialog .sghlp-content th {
    text-align: left;
    padding: 8px 12px;
    background: #1e2535;
    color: #616880;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.e-dialog.sghlp-dialog .sghlp-content td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: #a0a8bf;
}

.e-dialog.sghlp-dialog .sghlp-content tr:hover td {
    background: #1e2535;
}

.e-dialog.sghlp-dialog .sghlp-content a {
    color: #f0a56b;
    text-decoration: none;
}

.e-dialog.sghlp-dialog .sghlp-content a:hover {
    text-decoration: underline;
}

.e-dialog.sghlp-dialog .sghlp-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
}

.e-dialog.sghlp-dialog .sghlp-content blockquote {
    border-left: 3px solid #e87c3e;
    background: rgba(232,124,62,0.12);
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: #a0a8bf;
}

/* ============================================================
   SPINNER SEGLA — substitui o spinner padrão do Syncfusion
   pelo spinner de 3 anéis concêntricos APENAS no grid overlay.
   Spinners dentro de dropdowns/combobox mantêm o padrão.
   ============================================================ */

/* Seletor: spinner dentro da área de dados do grid (.e-gridcontent).
   Dropdowns/combobox do formulário NÃO estão dentro de .e-gridcontent. */
.e-gridcontent .e-spinner-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.e-gridcontent .e-spinner-pane .e-spinner-inner svg {
    display: none !important;
}

/* Spinner dos sub-grids — replicava o 3D atômico do .e-grid em escopo
   .e-gridcontent (mais específico). Mantém a mesma estética pra qualquer
   spinner que apareça em sub-grids ou detail-cells. */
.e-gridcontent .e-spinner-pane .e-spinner-inner {
    position: relative !important;
    width: 120px !important;
    height: 120px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background-image: url('/images/segla_vela.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 44px auto !important;
    perspective: 300px !important;
    transform-style: preserve-3d !important;
}

.e-gridcontent .e-spinner-pane .e-spinner-inner::before,
.e-gridcontent .e-spinner-pane .e-spinner-inner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid transparent;
    box-sizing: border-box;
}

/* Anel externo — orbita em X */
.e-gridcontent .e-spinner-pane .e-spinner-inner::before {
    inset: 0;
    border-top-color: #0891b2;
    border-bottom-color: color-mix(in srgb, #0891b2 30%, transparent);
    animation: sg-spin-3d-x 1.6s linear infinite;
}

/* Anel médio — orbita em Y */
.e-gridcontent .e-spinner-pane .e-spinner-inner::after {
    inset: 12px;
    border-left-color: #06b6d4;
    border-right-color: color-mix(in srgb, #06b6d4 30%, transparent);
    animation: sg-spin-3d-y 1.9s linear infinite;
}

.e-gridcontent .e-spinner-pane .e-spinner-inner .e-spin-label {
    display: none !important;
}

/* ── sgfat-obs-tooltip — Tooltip de observação de faturamento ── */
.sgfat-obs-tooltip.e-tooltip-wrap {
    background: #1a1a2e !important;
    border: 1px solid rgba(216,59,1,0.30) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
    max-width: 340px !important;
    opacity: 1 !important;
}
.sgfat-obs-tooltip.e-tooltip-wrap .e-tip-content {
    color: #f0f0f0 !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    white-space: pre-wrap !important;
}
.sgfat-obs-tooltip.e-tooltip-wrap .e-arrow-tip-outer {
    color: #1a1a2e !important;
}
.sgfat-obs-tooltip.e-tooltip-wrap .e-arrow-tip-inner {
    color: #1a1a2e !important;
}

/* ============================================================
   sgfrm — Summary bar de campos fixos no diálogo de edição
   Inserida entre sgdlg-title-bar e sgdlg-toolbar-wrap
   ============================================================ */
.sgfrm-summary-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 16px;
    min-height: 54px;
}
.sgfrm-summary-pin {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 10px 0 0;
}
.sgfrm-summary-pin span[class*="icon-"] { font-size: 13px; }
.sgfrm-summary-pin span[class*="icon-"]::before { color: var(--color-sf-content-text-color-alt1, #999) !important; }
.sgfrm-summary-sep {
    width: 1px;
    align-self: stretch;
    margin: 4px 0;
    background: var(--color-sf-border-light, #e0e0e0);
    flex-shrink: 0;
}
.sgfrm-summary-fields {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.sgfrm-summary-fields::-webkit-scrollbar { display: none; }
.sgfrm-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 14px;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 0;
}
.sgfrm-field-label,
.sgfrm-field-value,
.sgfrm-field-bool {
    display: block;
    font-size: 0.68rem !important;
    font-weight: 100 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-sf-content-text-color-alt3, #9ca3af) !important;
    line-height: 1.3;
}
.sgfrm-field-bool--sim { color: #107c10; }
.sgfrm-field-bool--nao { color: #d83b01; }

/* ── sgsg-chart-side — Gráficos do SubGrid em painel lateral vertical ── */
.sgsg-chart-side .sg-kpiarea {
    height: auto !important;
    background: transparent !important;
}
.sgsg-chart-side .sg-kpiarea > div { height: auto !important; }
.sgsg-chart-side .sg-barramenu { height: auto !important; overflow: visible !important; }
.sgsg-chart-side .sg-appbar {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    gap: 16px;
    padding: 0 !important;
}
.sgsg-chart-side .sg-appbar li.sg-chart-item {
    width: 100% !important;
    flex-shrink: 0 !important;
}
.sgsg-chart-side .sg-chart-title {
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-sf-content-text-color-alt1);
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-sf-border-light);
    margin-bottom: 4px;
}

/* ── sgfat-contrato-dialog — Diálogo lateral de edição de contrato ── */
.sgfat-contrato-dialog {
    border-radius: 12px 0 0 12px !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18) !important;
}
.sgfat-contrato-dialog .e-dlg-content {
    padding: 0 !important;
    overflow: hidden;
}
.sgfat-contrato-iframe {
    width: 100%;
    height: calc(100vh - 56px);
    border: none;
    display: block;
}
.sgfat-contrato-form-wrap {
    width: 100%;
    height: calc(100vh - 56px);
    overflow-y: auto;
}
.sgfat-dlg-contrato-header {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
}
.sgfat-dlg-contrato-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(0,120,212,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sgfat-dlg-contrato-icon span { font-size: 1rem; color: #0078d4; }
.sgfat-dlg-contrato-info {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.sgfat-dlg-contrato-title {
    font-size: 0.85rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgfat-dlg-contrato-sub {
    font-size: 0.65rem; font-weight: 400;
    color: var(--color-sf-content-text-color-alt1, #9ca3af);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgfat-dlg-contrato-badge {
    margin-left: auto; flex-shrink: 0;
    padding: 2px 10px; border-radius: 4px;
    background: rgba(0,120,212,0.08); color: #0078d4;
    font-size: 0.68rem; font-weight: 600;
}

/* Cards — flat (sem fundo próprio, herda do painel) */
body .e-card { background: transparent !important; }

/* Leaflet popup — AgendaColeta (sgagc-) */
.sgagc-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}
.sgagc-leaflet-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.sgagc-leaflet-popup .leaflet-popup-tip { background: #fff; }
.e-dark-mode .sgagc-leaflet-popup .leaflet-popup-content-wrapper { background: #1e2432; }
.e-dark-mode .sgagc-leaflet-popup .leaflet-popup-tip { background: #1e2432; }

/* ══════════ CRM Lead Dialog — Floating card estilo Google Calendar (sgcrm-lead-dlg) ══════════ */
.sgcrm-lead-dlg.e-dialog {
    border-radius: 16px 0 0 16px !important;
    border: 1px solid var(--color-sf-info-light) !important;
    border-right: none !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
}
.sgcrm-lead-dlg .e-dlg-header-content {
    padding: 16px 20px 12px !important;
    border-bottom: 1px solid var(--color-sf-border-light) !important;
    background: var(--color-sf-content-bg-color) !important;
}
.sgcrm-lead-dlg .e-dlg-content {
    padding: 0 !important;
    background: var(--color-sf-content-bg-color) !important;
}
.sgcrm-lead-dlg .e-footer-content {
    padding: 10px 20px !important;
    border-top: 1px solid var(--color-sf-border-light) !important;
    background: var(--color-sf-content-bg-color-alt1) !important;
}

/* Header interno — padrão balloon alinhado com Grid dialog */
.sgcrm-lead-dlg-header {
    display: flex; align-items: center; gap: 12px; width: 100%;
}
.sgcrm-lead-dlg-balloon {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--color-sf-content-bg-color);
    border: 1px solid var(--color-sf-border-color);
    border-radius: 10px;
    padding: 8px 14px 8px 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.sgcrm-lead-dlg-icon-wrap {
    width: 36px; height: 36px; border-radius: 8px;
    background: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sgcrm-lead-dlg-icon-wrap span { color: #fff !important; font-size: 18px; }
.sgcrm-lead-dlg-icon-wrap span::before { color: #fff !important; }
.sgcrm-lead-dlg-title-group {
    display: flex; flex-direction: column; gap: 1px;
}
.sgcrm-lead-dlg-title {
    font-size: 0.88rem; font-weight: 500;
    color: var(--color-sf-content-text-color); line-height: 1.2;
}
.sgcrm-lead-dlg-sub {
    font-size: 0.68rem; color: var(--color-sf-content-text-color-alt1); opacity: 0.6; line-height: 1.2;
}
.sgcrm-lead-dlg-mode-badge {
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.68rem; font-weight: 600; flex-shrink: 0;
}
.sgcrm-lead-dlg-mode-badge--new {
    background: var(--color-sf-success-light-alt, rgba(16,185,129,0.12));
    color: var(--color-sf-success); border: 1px solid var(--color-sf-success);
}
.sgcrm-lead-dlg-mode-badge--edit {
    background: var(--color-sf-primary-light-alt, rgba(8,145,178,0.10));
    color: var(--color-sf-primary); border: 1px solid var(--color-sf-primary);
}
/* Meta inline (fase, tipo) */
.sgcrm-lead-dlg-meta {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 14px; border-radius: 10px;
    background: var(--color-sf-content-bg-color);
    border: 1px solid var(--color-sf-border-light);
    margin-left: auto; flex-shrink: 0;
}
.sgcrm-lead-dlg-meta-item { display: flex; flex-direction: column; gap: 1px; }
.sgcrm-lead-dlg-meta-label { font-size: 0.60rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-sf-content-text-color-alt1); }
.sgcrm-lead-dlg-meta-value { font-size: 0.82rem; font-weight: 600; color: var(--color-sf-content-text-color); }
.sgcrm-lead-dlg-meta-sep { width: 1px; height: 28px; background: var(--color-sf-border-light); }
.e-dark-mode .sgcrm-lead-dlg-balloon { background: rgba(255,255,255,0.03) !important; border-color: var(--color-sf-info-light) !important; }
.e-dark-mode .sgcrm-lead-dlg-meta { background: rgba(255,255,255,0.03) !important; border-color: var(--color-sf-info-light) !important; }
.e-dark-mode .sgcrm-lead-dlg-mode-badge--new { background: var(--color-sf-success); color: #fff; }
.e-dark-mode .sgcrm-lead-dlg-mode-badge--edit { background: var(--color-sf-primary); color: #fff; }

/* Body / campos */
.sgcrm-lead-dlg-body {
    padding: 20px 24px; display: flex; flex-direction: column; gap: 12px;
}
.sgcrm-lead-dlg-field {
    display: flex; flex-direction: column; gap: 4px;
}
.sgcrm-lead-dlg-field--check {
    padding-top: 4px;
}
.sgcrm-lead-dlg-label {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
    color: var(--color-sf-content-text-color-alt1);
    text-transform: uppercase;
}
.sgcrm-lead-dlg-row2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sgcrm-lead-dlg-input.e-control-wrapper,
.sgcrm-lead-dlg-input.e-input-group {
    border-radius: 6px !important;
}

/* Footer / botões */
.sgcrm-lead-dlg-footer {
    display: flex; justify-content: flex-end; gap: 8px; align-items: center;
}
.sgcrm-lead-dlg-btn-cancel {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 6px; font-size: 0.82rem; font-weight: 500;
    border: 1px solid var(--color-sf-border-light);
    background: transparent; color: var(--color-sf-content-text-color-alt1);
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sgcrm-lead-dlg-btn-cancel:hover:not(:disabled) {
    background: var(--color-sf-content-bg-color-alt1);
    color: var(--color-sf-content-text-color);
}
.sgcrm-lead-dlg-btn-save {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
    border: none; background: var(--color-sf-primary); color: #fff;
    cursor: pointer; transition: opacity 0.15s;
}
.sgcrm-lead-dlg-btn-save:hover:not(:disabled) { opacity: 0.88; }
.sgcrm-lead-dlg-btn-save:disabled,
.sgcrm-lead-dlg-btn-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Header: badges ao lado do título ── */
.sgcrm-lead-dlg-badges {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* ── Wrapper do content (flex col para separar form/tabs) ── */
.sgcrm-lead-dlg-content {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* ── Linha de info read-only (cadastro + tempo no funil) ── */
.sgcrm-dlg-info-line {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.70rem; color: var(--color-sf-content-text-color-alt1);
    padding: 4px 0 2px;
}
.sgcrm-dlg-info-line span[class*="icon-"] { font-size: 13px; opacity: 0.6; }
.sgcrm-dlg-info-sep { opacity: 0.4; }

/* ── Linha do botão Salvar inline ── */
.sgcrm-dlg-save-row {
    display: flex; align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--color-sf-border-light);
    margin-top: 4px;
}

/* ── Wrapper das tabs dentro do dialog ── */
.sgcrm-dlg-tabs-wrap {
    display: flex; flex-direction: column; flex: 1; overflow: hidden;
    border-top: 2px solid var(--color-sf-border-light);
}

/* Tabs dentro do dialog — usa as classes sgcrm-tabs já existentes */
.sgcrm-dlg-tabs {
    padding: 0 20px !important;
    flex-shrink: 0;
    background: var(--color-sf-content-bg-color-alt1);
}

/* ── Área scrollável do conteúdo das tabs ── */
.sgcrm-dlg-tab-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    background: var(--color-sf-content-bg-color);
}

/* Dark mode */
.e-dark-mode .sgcrm-lead-dlg.e-dialog {
    box-shadow: -8px 0 32px rgba(0,0,0,0.40) !important;
    border-color: var(--color-sf-info-light) !important;
    border-right: none !important;
}
.e-dark-mode .sgcrm-dlg-save-row { border-top-color: var(--color-sf-info-light) !important; }
.e-dark-mode .sgcrm-dlg-tabs-wrap { border-top-color: var(--color-sf-info-light) !important; }
.e-dark-mode .sgcrm-dlg-tabs { background: rgba(255,255,255,0.02) !important; }
.e-dark-mode .sgcrm-dlg-tab-body { background: var(--color-sf-content-bg-color) !important; }

/* ══════════ App Loader — sg-app-loader ══════════ */
.sg-app-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    background: #f8fafb;
}

/* ── Visual animado (3 anéis 3D atômico) ──
   Cada anel orbita em seu próprio eixo (X/Y/Z) com perspective + preserve-3d.
   Mesma estética do spinner de reload metadados e dos grids. */
.sg-app-loader-visual {
    position: relative; width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    perspective: 220px;
    transform-style: preserve-3d;
}
.sg-app-loader-ring-outer {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #0891b2;
    border-bottom-color: color-mix(in srgb, #0891b2 30%, transparent);
    animation: sg-spin-3d-x 1.6s linear infinite;
}
.sg-app-loader-ring-inner {
    position: absolute; inset: 8px; border-radius: 50%;
    border: 2.5px solid transparent;
    border-left-color: #06b6d4;
    border-right-color: color-mix(in srgb, #06b6d4 30%, transparent);
    animation: sg-spin-3d-y 1.9s linear infinite;
}
.sg-app-loader-ring-core {
    position: absolute; inset: 16px; border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #22d3ee;
    border-left-color: color-mix(in srgb, #22d3ee 40%, transparent);
    animation: sg-spin-3d-z-inline 2.4s linear infinite;
}
.sg-app-loader-vela {
    width: 40px; height: 40px; object-fit: contain;
    position: relative; z-index: 2;
    opacity: 0.8;
    animation: sg-loader-vela-pulse 2.4s ease-in-out infinite;
}

/* Keyframe Z específico pro app-loader (e demais loaders inline) — sem
   translate(-50%,-50%) porque os elementos já estão posicionados com
   inset:Npx (não usam top:50%/left:50% como o pane::before do grid). */
@keyframes sg-spin-3d-z-inline {
    from { transform: rotateZ(0deg)   rotateX(30deg) rotateY(30deg); }
    to   { transform: rotateZ(360deg) rotateX(30deg) rotateY(30deg); }
}

@keyframes sg-loader-vela-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

/* Mantido pra retrocompatibilidade — algum componente ainda pode referenciar */
@keyframes sg-loader-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Nome ── */
.sg-app-loader-nome {
    height: 22px; object-fit: contain; opacity: 0.75;
}
.sg-app-loader-versao {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.70rem; font-weight: 500; color: #cbd5e1;
    letter-spacing: 0.02em;
}
.sg-app-loader-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.78rem; font-weight: 500; color: #94a3b8;
    letter-spacing: 0.02em;
    animation: sg-loader-pulse 2s ease-in-out infinite;
}
@keyframes sg-loader-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ── Barra de progresso ── */
.sg-app-loader-progress {
    display: flex; align-items: center; gap: 10px; width: 280px;
}
.sg-app-loader-bar-track {
    flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden;
}
.sg-app-loader-bar-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.40);
}
.sg-app-loader-pct {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.68rem; font-weight: 700; color: #0891b2;
    min-width: 28px; text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Steps ── */
.sg-app-loader-steps {
    display: flex; flex-direction: column; gap: 4px; width: 280px;
}
.sg-app-loader-step {
    display: flex; align-items: center; gap: 8px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.70rem; font-weight: 500; color: #cbd5e1;
    padding: 3px 8px; border-radius: 4px;
    transition: all 0.25s ease;
}
.sg-app-loader-step--active {
    color: #0891b2;
    background: rgba(8, 145, 178, 0.06);
}
.sg-app-loader-step--done {
    color: #64748b;
}
.sg-app-loader-step-ico {
    font-size: 13px; width: 16px; text-align: center; flex-shrink: 0;
}
.sg-app-loader-step--active .sg-app-loader-step-ico { color: #0891b2; }
.sg-app-loader-step--active .sg-app-loader-step-ico::before { color: #0891b2 !important; }
.sg-app-loader-step--done .e-check { color: #10b981; font-size: 12px; }

/* ── Dark mode ── */
.e-dark-mode .sg-app-loader { background: #0f1318; }
.e-dark-mode .sg-app-loader-vela { opacity: 0.5; filter: brightness(1.5); }
.e-dark-mode .sg-app-loader-nome { filter: invert(1); opacity: 0.6; }
.e-dark-mode .sg-app-loader-versao { color: #334155; }
.e-dark-mode .sg-app-loader-text { color: #4a5264; }
/* Dark mode dos anéis 3D — gradiente de ciano claro a mais saturado */
.e-dark-mode .sg-app-loader-ring-outer {
    border-top-color: #22d3ee;
    border-bottom-color: color-mix(in srgb, #22d3ee 30%, transparent);
}
.e-dark-mode .sg-app-loader-ring-inner {
    border-left-color: #67e8f9;
    border-right-color: color-mix(in srgb, #67e8f9 30%, transparent);
}
.e-dark-mode .sg-app-loader-ring-core {
    border-top-color: #a5f3fc;
    border-left-color: color-mix(in srgb, #a5f3fc 40%, transparent);
}
.e-dark-mode .sg-app-loader-logo {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}
.e-dark-mode .sg-app-loader-bar-track { background: #1e293b; }
.e-dark-mode .sg-app-loader-bar-fill { background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%); }
.e-dark-mode .sg-app-loader-pct { color: #22d3ee; }
.e-dark-mode .sg-app-loader-step { color: #334155; }
.e-dark-mode .sg-app-loader-step--active { color: #22d3ee; background: rgba(34, 211, 238, 0.06); }
.e-dark-mode .sg-app-loader-step--active .sg-app-loader-step-ico::before { color: #22d3ee !important; }
.e-dark-mode .sg-app-loader-step--done { color: #475569; }

/* ══════════════════════════════════════════════════════════
   sgrid-detail-tabs — Abas do detail template (master-detail)
   Global porque SfTab dentro do DetailTemplate do SfGrid
   renderiza fora do escopo do CSS isolation do componente.
   ══════════════════════════════════════════════════════════ */

.e-detailcell > .e-detailtemplate {
    width: 100%;
    max-width: 56vw;
    overflow-x: auto;
}

/* ── Detail tabs customizadas (HTML puro, sem SfTab) ── */
.sgrid-detail-tabs {
    width: 100%;
}

.sgrid-detail-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-sf-border, #e0e0e0);
    background: var(--color-sf-surface, #fafafa);
    padding: 0 4px;
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--color-sf-primary, #0078d4) transparent;
}

.sgrid-detail-header::-webkit-scrollbar { height: 3px; }
.sgrid-detail-header::-webkit-scrollbar-thumb { background: var(--color-sf-primary, #0078d4); border-radius: 2px; }
.sgrid-detail-header::-webkit-scrollbar-track { background: transparent; }

.sgrid-detail-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.sgrid-detail-btn:hover {
    color: var(--color-sf-primary, #0078d4);
    background: var(--color-sf-content-bg-color-alt1, #f5f5f5);
}

.sgrid-detail-btn--active {
    color: var(--color-sf-primary, #0078d4);
    font-weight: 600;
    border-bottom-color: var(--color-sf-primary, #0078d4);
}

.sgrid-detail-panel { width: 100%; }
.sgrid-detail-panel--hidden { display: none; }

/* Componentes dinâmicos no detail: restringe largura */
.sgrid-detail-component {
    max-width: min(100%, calc(100vw - 120px));
    overflow-x: auto;
    overflow-y: hidden;
}

/* Oculta spinners duplicados dentro do detail template */
.e-detailcell .e-spinner-pane {
    display: none !important;
}

/* ══════════ Grid Loader — sgrid-loader ══════════ */
.sgrid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: calc(100vh - 120px);
    width: 100%;
}

.sgrid-loader-visual {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgrid-loader-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #94a3b8);
    letter-spacing: 0.02em;
    animation: sg-loader-pulse 2s ease-in-out infinite;
}

.e-dark-mode .sgrid-loader-text {
    color: #64748b;
}

/* ══════════ Export Progress Overlay — sg-export-overlay ══════════ */
.sg-export-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #0f172a 35%, transparent);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sg-export-fade-in 0.2s ease-out;
}
@keyframes sg-export-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sg-export-card {
    background: var(--color-sf-content-bg-color, #fff);
    border-radius: 14px;
    padding: 32px 40px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 340px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.e-dark-mode .sg-export-card {
    background: var(--color-sf-content-bg-color, #1e293b);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.sg-export-stage {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color, #1e293b);
    letter-spacing: 0.01em;
    margin-top: 4px;
}
.sg-export-bar {
    width: 260px;
    height: 4px;
    background: var(--color-sf-border-color, #e2e8f0);
    border-radius: 2px;
    overflow: hidden;
}
.sg-export-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.40);
}
.sg-export-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0891b2;
    letter-spacing: 0.04em;
}
.e-dark-mode .sg-export-pct { color: #22d3ee; }
.e-dark-mode .sg-export-bar-fill {
    background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
}
.e-dark-mode .sg-export-bar { background: #1e293b; }

/* ══════════ Spinner Segla — grids e diálogos (não combos) ══════════ */
.e-grid .e-spinner-pane,
.e-dialog .e-spinner-pane {
    background: color-mix(in srgb, var(--color-sf-content-bg-color, #fff) 80%, transparent);
}

.e-grid .e-spinner-pane .e-spin-material,
.e-grid .e-spinner-pane .e-spin-fabric,
.e-grid .e-spinner-pane .e-spin-fluent,
.e-grid .e-spinner-pane svg,
.e-dialog .e-spinner-pane .e-spin-material,
.e-dialog .e-spinner-pane .e-spin-fabric,
.e-dialog .e-spinner-pane .e-spin-fluent,
.e-dialog .e-spinner-pane svg {
    display: none !important;
}

.e-grid .e-spinner-pane .e-spinner-inner,
.e-dialog .e-spinner-pane .e-spinner-inner {
    width: 120px !important;
    height: 120px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Vela Segla estática no centro — proporção ~55% do container (mesmo
       ratio do loader da AgendaColeta: 44px num container 80px). */
    background-image: url('/images/segla_vela.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 44px auto !important;
    /* Habilita 3D pros anéis filhos (::before/::after) — perspective dá a
       sensação de profundidade quando os anéis estão em ângulo. */
    perspective: 300px !important;
    transform-style: preserve-3d !important;
}

/* Anel externo — orbita em X (achatado horizontalmente) */
.e-grid .e-spinner-pane .e-spinner-inner::before,
.e-dialog .e-spinner-pane .e-spinner-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #0891b2;
    border-bottom-color: color-mix(in srgb, #0891b2 30%, transparent);
    animation: sg-spin-3d-x 1.6s linear infinite;
}

/* Anel médio — orbita em Y (achatado verticalmente, sentido inverso) */
.e-grid .e-spinner-pane .e-spinner-inner::after,
.e-dialog .e-spinner-pane .e-spinner-inner::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-left-color: #06b6d4;
    border-right-color: color-mix(in srgb, #06b6d4 30%, transparent);
    animation: sg-spin-3d-y 1.9s linear infinite;
}

/* Terceiro anel (core) — projetado via .e-spinner-pane::before porque o
   .e-spinner-inner já usa ::before/::after. Orbita em Z com leve inclinação
   X+Y pra ficar num plano diagonal (não totalmente plano como os outros 2). */
.e-grid .e-spinner-pane,
.e-dialog .e-spinner-pane {
    position: absolute !important;
}
.e-grid .e-spinner-pane::before,
.e-dialog .e-spinner-pane::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #22d3ee;
    border-left-color: color-mix(in srgb, #22d3ee 40%, transparent);
    animation: sg-spin-3d-z 2.4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Rotações 3D — cada anel orbita seu próprio eixo. As keyframes do core
   incluem translate(-50%,-50%) pra manter centralizado já que o transform
   é composto (rotate + translate). */
@keyframes sg-spin-3d-x {
    from { transform: rotateX(70deg) rotateZ(0deg); }
    to   { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes sg-spin-3d-y {
    from { transform: rotateY(70deg) rotateZ(0deg); }
    to   { transform: rotateY(70deg) rotateZ(-360deg); }
}
@keyframes sg-spin-3d-z {
    from { transform: translate(-50%, -50%) rotateZ(0deg)   rotateX(30deg) rotateY(30deg); }
    to   { transform: translate(-50%, -50%) rotateZ(360deg) rotateX(30deg) rotateY(30deg); }
}

.e-dark-mode .e-grid .e-spinner-pane,
.e-dark-mode .e-dialog .e-spinner-pane {
    background: color-mix(in srgb, var(--color-sf-content-bg-color, #1e1e1e) 80%, transparent);
}

/* MultiColumn combobox popup — fundo sólido (sem transparência sobre o form) */
.e-popup.e-multicolumn-list {
    background: var(--bs-white, #ffffff) !important;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12) !important;
    border: 1px solid var(--color-sf-content-border-color-alt1, #e5e7eb);
    border-radius: 4px;
}
body.e-dark-mode .e-popup.e-multicolumn-list {
    background: var(--color-sf-content-bg-color, #1f2937) !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.45), 0 0 2px 0 rgba(0, 0, 0, 0.35) !important;
}
/* Garante o conteúdo interno (grid + paginação) com fundo opaco */
.e-popup.e-multicolumn-list .e-content,
.e-popup.e-multicolumn-list .e-grid,
.e-popup.e-multicolumn-list .e-grid .e-gridcontent,
.e-popup.e-multicolumn-list .e-grid .e-gridheader,
.e-popup.e-multicolumn-list .e-grid .e-table,
.e-popup.e-multicolumn-list .e-grid .e-row,
.e-popup.e-multicolumn-list .e-pager {
    background: inherit !important;
}

/* Spinner menor dentro de combobox/dropdowns */
.e-ddl .e-spinner-pane .e-spinner-inner,
.e-combobox .e-spinner-pane .e-spinner-inner,
.e-dropdownbase .e-spinner-pane .e-spinner-inner,
.e-multicolumn-list .e-spinner-pane .e-spinner-inner {
    width: 20px !important;
    height: 20px !important;
}

.e-ddl .e-spinner-pane .e-spinner-inner::before,
.e-combobox .e-spinner-pane .e-spinner-inner::before,
.e-dropdownbase .e-spinner-pane .e-spinner-inner::before,
.e-multicolumn-list .e-spinner-pane .e-spinner-inner::before {
    border-width: 2px;
}

.e-ddl .e-spinner-pane .e-spinner-inner::after,
.e-combobox .e-spinner-pane .e-spinner-inner::after,
.e-dropdownbase .e-spinner-pane .e-spinner-inner::after,
.e-multicolumn-list .e-spinner-pane .e-spinner-inner::after {
    inset: 3px;
    border-width: 2px;
}

/* Fundo transparente nos spinners de combo (não cobrir o input) */
.e-ddl .e-spinner-pane,
.e-combobox .e-spinner-pane,
.e-dropdownbase .e-spinner-pane {
    background: transparent !important;
}

/* ══════════ Form Loading (inline — dentro do diálogo) ══════════ */
.sgform-load-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 20px;
    min-height: 300px;
}

.sgform-loading-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #94a3b8);
    animation: sg-loader-pulse 2s ease-in-out infinite;
    text-align: center;
}

.e-dark-mode .sgform-loading-text { color: #64748b; }

/* ══════════ Sobre — sgsobre ══════════ */
.sgsobre-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sgsobre-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.sgsobre-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-sf-content-text-color, #1a1a1a);
}
.sgsobre-version {
    font-size: 0.78rem;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
}
.sgsobre-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
}
.sgsobre-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* Tabela com cabeçalho fixo enquanto rola (Licenças / Usuários Online) */
.sgsobre-content table thead th {
    position: sticky;
    top: 0;
    background: var(--color-sf-content-bg-color, #fff);
    z-index: 1;
}
.e-dark-mode .sgsobre-content table thead th {
    background: var(--color-sf-content-bg-color-alt1, #2a2a2a);
}
.sgsobre-section {
    padding: 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sgsobre-row {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-sf-border, #e0e0e0) 50%, transparent);
}
.sgsobre-label {
    flex: 0 0 180px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sgsobre-value {
    flex: 1;
    font-size: 0.82rem;
    color: var(--color-sf-content-text-color, #333);
    word-break: break-all;
}
.sgsobre-mono {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
}
.sgsobre-sep {
    height: 1px;
    background: var(--color-sf-border, #e0e0e0);
    margin: 8px 0;
}
.sgsobre-footer {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-sf-content-text-color-alt1, #999);
    padding: 4px 0;
}
.e-dark-mode .sgsobre-title { color: #e0e0e0; }
.e-dark-mode .sgsobre-value { color: #d0d0d0; }

/* ══════════ Dev Query Log — sgdev-query ══════════ */
.sgdev-query-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #0891b2;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sgdev-query-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(8, 145, 178, 0.5);
}
.sgdev-query-fab span[class*="icon-"]::before { font-size: 22px; }
.sgdev-query-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.sgdev-query-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.sgdev-query-item {
    border: 1px solid var(--color-sf-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}
.sgdev-query-item--error {
    border-color: #dc2626;
}

.sgdev-query-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-sf-surface, #fafafa);
    border-bottom: 1px solid var(--color-sf-border, #e0e0e0);
    font-size: 0.78rem;
}

.sgdev-query-idx {
    font-weight: 700;
    color: var(--color-sf-primary, #0078d4);
    min-width: 24px;
}
.sgdev-query-origem {
    font-weight: 600;
    flex: 1;
}
.sgdev-query-regs {
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
}
.sgdev-query-hora {
    font-size: 0.7rem;
    color: var(--color-sf-content-text-color-alt1, #999);
    font-family: monospace;
}

.sgdev-query-sql {
    margin: 0;
    padding: 10px 14px;
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    background: var(--color-sf-content-bg-color, #fff);
    color: var(--color-sf-content-text-color, #333);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.e-dark-mode .sgdev-query-meta { background: #2a2a2a; border-color: #404040; }
.e-dark-mode .sgdev-query-item { border-color: #404040; }
.e-dark-mode .sgdev-query-sql { background: #1e1e1e; color: #d4d4d4; }

/* ── Dark mode: detail tabs e form tabs ── */
.e-dark-mode .sgrid-detail-header,
.e-dark-mode .sgform-tabs-hz .sgrid-detail-header {
    background: var(--color-sf-content-bg-color, #1e1e1e);
    border-bottom-color: var(--color-sf-border, #333);
}

.e-dark-mode .sgrid-detail-btn {
    color: var(--color-sf-content-text-color-alt1, #999);
}

.e-dark-mode .sgrid-detail-btn:hover {
    background: var(--color-sf-content-bg-color-alt1, #2a2a2a);
}

.e-dark-mode .sgrid-detail-btn--active {
    color: var(--color-sf-info-bg-color);
    border-bottom-color: var(--color-sf-info-bg-color-hover);
}

/* ════════════════════════════════════════════════════════════════
   CardHeader — sgch- (header padrão dos widgets do dashboard)
   ════════════════════════════════════════════════════════════════ */
.sgch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    flex-shrink: 0;
}

.sgch-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.sgch-header-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--sgch-color, var(--color-sf-primary, #0078d4)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sgch-color, var(--color-sf-primary, #0078d4)) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sgch-header-icon span {
    font-size: 14px;
    color: var(--sgch-color, var(--color-sf-primary, #0078d4));
}

.sgch-header-icon span::before {
    color: var(--sgch-color, var(--color-sf-primary, #0078d4)) !important;
}

.sgch-header-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.sgch-title {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--color-sf-content-text-color, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sgch-subtitle {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgch-header-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.sgch-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-sf-content-text-color-alt1, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0;
}

.sgch-header:hover .sgch-btn {
    opacity: 1;
}

.sgch-btn:hover {
    background: var(--color-sf-primary-bg-color, rgba(0,120,212,0.06));
    border-color: var(--color-sf-border-color, #e2e8f0);
    color: var(--color-sf-primary, #0078d4);
}

.sgch-btn span { font-size: 13px; }
.sgch-btn span::before { color: inherit !important; }

.sgch-btn--delete:hover {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.2);
    color: #dc2626;
}

/* ── sgch-pin-btn — Botão "fixar no painel" nos gráficos do Grid ── */
.sg-chart-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.sgch-pin-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-sf-content-text-color-alt1, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    flex-shrink: 0;
}

.sg-chart-item:hover .sgch-pin-btn { opacity: 1; }

.sgch-pin-btn:hover {
    background: rgba(0,120,212,0.08);
    border-color: rgba(0,120,212,0.2);
    color: var(--color-sf-primary, #0078d4);
}

.sgch-pin-btn span { font-size: 13px; }
.sgch-pin-btn span::before { color: inherit !important; }

.sgch-pin-btn--done {
    opacity: 1 !important;
    color: #059669;
    cursor: default;
}
.sgch-pin-btn--done span::before { color: #059669 !important; }

/* ── sgch-pin-toast — Mensagem de confirmação ao fixar gráfico ── */
.sgch-pin-toast {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin: 0 8px 4px;
    border-radius: 6px;
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.2);
    font-size: 0.72rem;
    font-weight: 600;
    color: #059669;
    animation: sgch-pin-fade-in 0.3s ease;
}

.sgch-pin-toast-icon { font-size: 14px; }
.sgch-pin-toast-icon::before { color: #059669 !important; }

@keyframes sgch-pin-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── sgfrm-error-query — Painel de debug SQL quando gravar falha ── */
.sgfrm-error-query {
    margin: 12px 0;
    background: #1e1e2e;
    border: 1px solid #dc2626;
    border-radius: 10px;
    overflow: hidden;
    animation: sgfrm-err-slide-up 0.3s ease;
}

@keyframes sgfrm-err-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.sgfrm-error-query-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(220,38,38,0.15);
    border-bottom: 1px solid rgba(220,38,38,0.3);
}

.sgfrm-error-query-icon { font-size: 16px; color: #ef4444; }
.sgfrm-error-query-icon::before { color: #ef4444 !important; }

.sgfrm-error-query-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fca5a5;
    flex: 1;
}

.sgfrm-error-query-close {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgfrm-error-query-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sgfrm-error-query-close span::before { color: inherit !important; }

.sgfrm-error-query-sql {
    margin: 0;
    padding: 12px 14px;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.68rem;
    color: #a5f3fc;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── sgform-tabs-hz — Tabs horizontais do formulário (sub-grids/apêndices) ── */
.sgform-tabs-hz {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   @media print — Relatório de Faturamento (sgfat-relatorio-dialog)
   TODAS as regras condicionadas em body.printing-fat (adicionada pelo
   sgFatPrint em segla-detail.js). @page landscape e injetado
   dinamicamente pelo sgFatPrint (nao pode ficar no CSS estatico porque
   @page e global e brigaria com o portrait do RPS).
   ════════════════════════════════════════════════════════════════ */
@media print {
    /* Esconde tudo fora do dialogo do relatorio — so quando imprimindo
       o faturamento (nao vaza pra outros prints da app). */
    body.printing-fat > *:not(.e-dlg-container) {
        display: none !important;
    }

    /* Esconde overlay e header do diálogo */
    body.printing-fat .e-dlg-overlay {
        display: none !important;
    }
    body.printing-fat .sgfat-relatorio-dialog .e-dlg-header-content {
        display: none !important;
    }

    /* Diálogo ocupa toda a página sem sombra */
    body.printing-fat .sgfat-relatorio-dialog {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    body.printing-fat .sgfat-relatorio-dialog .e-dlg-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Garante fundo branco e cores */
    body.printing-fat .sgfat-relatorio-dialog .sgfat-report {
        background: #fff !important;
        color: #1e293b !important;
        overflow: visible !important;
    }

    /* Page breaks */
    body.printing-fat .sgfat-rpt-faixa-section { page-break-inside: avoid; }
    body.printing-fat .sgfat-rpt-table { page-break-inside: auto; }
    body.printing-fat .sgfat-rpt-row { page-break-inside: avoid; }

    /* Preserva cores */
    body.printing-fat .sgfat-rpt-kpi,
    body.printing-fat .sgfat-rpt-tipo-card,
    body.printing-fat .sgfat-rpt-tipo-badge,
    body.printing-fat .sgfat-rpt-tipo-tag,
    body.printing-fat .sgfat-rpt-var,
    body.printing-fat .sgfat-rpt-faixa-summary,
    body.printing-fat .sgfat-rpt-footer-row {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ══════════ AgendaColeta — badges dark mode (dialog Syncfusion fora do scoped CSS) ══════════ */
.e-dark-mode .sgagc-badge--prep { background: rgba(107,114,128,0.18) !important; color: #9ca3af !important; }
.e-dark-mode .sgagc-badge--prog { background: rgba(59,130,246,0.18) !important; color: #60a5fa !important; }
.e-dark-mode .sgagc-badge--init { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; }
.e-dark-mode .sgagc-badge--done { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; }
.e-dark-mode .sgagc-badge--cancel { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; }
.e-dark-mode .sgagc-badge--prev { background: rgba(139,92,246,0.20) !important; color: #a78bfa !important; }

/* Ponto cards dark mode (dialog fora do scoped CSS) */
.e-dark-mode .sgagc-ponto-card {
    background: rgba(30,41,59,0.6) !important;
    border-color: rgba(51,65,85,0.7) !important;
}
.e-dark-mode .sgagc-ponto-card:hover {
    background: rgba(30,41,59,0.9) !important;
}
.e-dark-mode .sgagc-ponto-order {
    background: rgba(8,145,178,0.15) !important;
    border-color: rgba(8,145,178,0.30) !important;
}
.e-dark-mode .sgagc-detail-dialog .e-dlg-content {
    border-color: #1e293b !important;
}

/* ── sgmeta-campo: dialog de novo/editar campo (SYS_FORMULARIO_CAMPO) ── */
.sgmeta-campo-tab .e-tab-header {
    border-bottom: 1px solid var(--color-sf-border-light);
}
/* Área de conteúdo do tab: padding compacto */
.sgmeta-campo-tab .e-content .e-item {
    padding: 0 !important;
}
/* Wrapper interno de cada aba */
.sgmeta-campo-section {
    padding: 12px 16px 8px;
}
/* Label de grupo — linha separadora visual entre seções de campos */
.sgmeta-campo-group-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-sf-content-text-color-alt1);
    padding: 6px 0 3px;
    border-bottom: 1px solid var(--color-sf-border-light);
    margin-bottom: 8px;
}
/* Checkboxes compactos: altura mínima para não espaçar demais */
.sgmeta-cb-wrap {
    display: flex;
    align-items: center;
    min-height: 28px;
}
.sgmeta-cb-wrap .e-checkbox-wrapper {
    margin: 0;
}
/* Dark mode — sem ajustes especiais necessários (herda variáveis) */

/* ── sg-alrt-detail-dlg: diálogo do alerta (SfDialog teleportado) ── */
.sg-alrt-detail-dlg .e-dlg-header-content { padding: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.sg-alrt-detail-dlg .e-dlg-header { width: 100%; padding: 0; }
.sg-alrt-detail-dlg .e-dlg-content { padding: 0; background: #f8fafc; }

.sg-alrt-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(37,99,235,.08), transparent);
    border-left: 4px solid #2563eb;
}
.sg-alrt-detail-head--p1 { background: linear-gradient(90deg, rgba(245,158,11,.10), transparent); border-left-color: #f59e0b; }
.sg-alrt-detail-head--p2 { background: linear-gradient(90deg, rgba(239,68,68,.12), transparent); border-left-color: #ef4444; }

.sg-alrt-detail-head-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(37,99,235,.14);
    display: flex; align-items: center; justify-content: center;
}
.sg-alrt-detail-head-icon span { font-size: 20px; color: #2563eb !important; }
.sg-alrt-detail-head-icon span::before { color: #2563eb !important; }
.sg-alrt-detail-head--p1 .sg-alrt-detail-head-icon { background: rgba(245,158,11,.18); }
.sg-alrt-detail-head--p1 .sg-alrt-detail-head-icon span,
.sg-alrt-detail-head--p1 .sg-alrt-detail-head-icon span::before { color: #f59e0b !important; }
.sg-alrt-detail-head--p2 .sg-alrt-detail-head-icon { background: rgba(239,68,68,.18); }
.sg-alrt-detail-head--p2 .sg-alrt-detail-head-icon span,
.sg-alrt-detail-head--p2 .sg-alrt-detail-head-icon span::before { color: #ef4444 !important; }

.sg-alrt-detail-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sg-alrt-detail-head-title { font-size: 1rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.sg-alrt-detail-head-meta { font-size: 0.72rem; color: #64748b; display: flex; flex-wrap: wrap; gap: 0 6px; }

.sg-alrt-detail-body {
    padding: 18px 22px;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
}
.sg-alrt-detail-msg {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #1e293b;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    background: transparent;
    border: none;
}
.sg-alrt-detail-empty { color: #94a3b8; font-size: 0.85rem; text-align: center; padding: 40px 0; }

.sg-alrt-detail-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; }
.sg-alrt-detail-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    border-radius: 6px;
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sg-alrt-detail-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.sg-alrt-detail-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.sg-alrt-detail-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sg-alrt-detail-btn--primary span[class*="icon-"]::before { color: #fff !important; }

/* dark mode */
body.e-dark-mode .sg-alrt-detail-dlg .e-dlg-header-content { border-bottom-color: rgba(255,255,255,.08); }
body.e-dark-mode .sg-alrt-detail-dlg .e-dlg-content { background: #1a1d24; }
body.e-dark-mode .sg-alrt-detail-head-title { color: #e8e8e8; }
body.e-dark-mode .sg-alrt-detail-head-meta { color: #94a3b8; }
body.e-dark-mode .sg-alrt-detail-body { background: #1e2128; }
body.e-dark-mode .sg-alrt-detail-msg { color: #d1d5db; }
body.e-dark-mode .sg-alrt-detail-btn { background: #2a2e38; border-color: rgba(255,255,255,.08); color: #d1d5db; }
body.e-dark-mode .sg-alrt-detail-btn:hover { background: #343842; }

/* ═══════════════════════════════════════════════════════════
   sg-mkt-* : PersonalizarDashboardDialog (marketplace de widgets)
   ═══════════════════════════════════════════════════════════ */
.sg-mkt-dlg .e-dlg-header-content { padding: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.sg-mkt-dlg .e-dlg-header { width: 100%; padding: 0; }
.sg-mkt-dlg .e-dlg-content { padding: 0; background: #f8fafc; overflow: hidden; display: flex; flex-direction: column; }

/* Header */
.sg-mkt-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: linear-gradient(90deg, rgba(99,102,241,.08), transparent); border-left: 4px solid #6366f1; }
.sg-mkt-head-icon { font-size: 28px; color: #6366f1 !important; }
.sg-mkt-head-icon::before { color: #6366f1 !important; }
.sg-mkt-head-text { display: flex; flex-direction: column; gap: 2px; }
.sg-mkt-head-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
.sg-mkt-head-sub { font-size: 0.74rem; color: #64748b; }

/* Body */
.sg-mkt-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Toolbar: busca + tabs */
.sg-mkt-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 0; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,.06); }
.sg-mkt-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; transition: border-color .15s; }
.sg-mkt-search:focus-within { border-color: #6366f1; background: #ffffff; }
.sg-mkt-search span[class*="icon-"] { font-size: 16px; color: #94a3b8 !important; }
.sg-mkt-search span[class*="icon-"]::before { color: #94a3b8 !important; }
.sg-mkt-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.84rem; color: #0f172a; }

.sg-mkt-tabs { display: flex; gap: 4px; padding-bottom: 2px; overflow-x: auto; }
.sg-mkt-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; background: transparent; color: #64748b; font-size: 0.82rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.sg-mkt-tab:hover { color: #334155; }
.sg-mkt-tab span[class*="icon-"] { font-size: 16px; }
.sg-mkt-tab--active { color: #6366f1; border-bottom-color: #6366f1; font-weight: 600; }
.sg-mkt-tab--active span[class*="icon-"]::before { color: #6366f1 !important; }
.sg-mkt-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(99,102,241,.12); color: #6366f1; font-size: 0.66rem; font-weight: 700; }
.sg-mkt-tab--active .sg-mkt-tab-badge { background: #6366f1; color: #ffffff; }

/* Grid de cards */
.sg-mkt-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-content: start; }
.sg-mkt-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 20px; color: #94a3b8; font-size: 0.85rem; }
.sg-mkt-empty span[class*="icon-"] { font-size: 36px; color: #cbd5e1 !important; }
.sg-mkt-empty span[class*="icon-"]::before { color: #cbd5e1 !important; }

/* Card */
.sg-mkt-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sg-mkt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--acento) 40%, #e2e8f0); }
.sg-mkt-card--added { opacity: 0.72; }

.sg-mkt-card-preview { height: 110px; background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 10%, #f8fafc), color-mix(in srgb, var(--acento) 4%, #ffffff)); display: flex; align-items: center; justify-content: center; padding: 14px; }
.sg-mkt-preview-svg { width: 100%; height: 100%; max-height: 80px; }

.sg-mkt-preview-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0 10px; }
.sg-mkt-preview-kpi-val { font-size: 1.6rem; font-weight: 700; color: var(--acento); line-height: 1; }
.sg-mkt-preview-spark { width: 100%; height: 20px; }
.sg-mkt-preview-kpi-delta { font-size: 0.66rem; font-weight: 700; color: #10b981; }

.sg-mkt-preview-gadget { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100%; padding: 6px; }
.sg-mkt-preview-gadget-cell { background: rgba(99,102,241,.08); border-radius: 4px; padding: 4px 6px; text-align: center; }
.sg-mkt-preview-gadget-val { font-size: 0.82rem; font-weight: 700; color: var(--acento); }
.sg-mkt-preview-gadget-lbl { font-size: 0.58rem; color: #64748b; text-transform: uppercase; }

.sg-mkt-preview-wdg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 12px; }
.sg-mkt-preview-wdg-icon { font-size: 40px; color: var(--acento) !important; }
.sg-mkt-preview-wdg-icon::before { color: var(--acento) !important; }
.sg-mkt-preview-wdg-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.sg-mkt-preview-wdg-bars > span { flex: 1; background: var(--acento); border-radius: 2px 2px 0 0; opacity: 0.85; }

.sg-mkt-card-body { flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.sg-mkt-card-head { display: flex; align-items: center; gap: 6px; }
.sg-mkt-card-icon { font-size: 15px; color: var(--acento) !important; }
.sg-mkt-card-icon::before { color: var(--acento) !important; }
.sg-mkt-card-title { font-size: 0.84rem; font-weight: 600; color: #0f172a; line-height: 1.25; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-mkt-card-size { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 9px; background: rgba(99, 102, 241, 0.1); color: var(--acento); font-size: 0.62rem; font-weight: 600; flex-shrink: 0; line-height: 1; }
.sg-mkt-card-size span[class*="icon-"] { font-size: 10px; }
.sg-mkt-card-size span[class*="icon-"]::before { color: currentColor !important; }
body.e-dark-mode .sg-mkt-card-size { background: rgba(255, 255, 255, 0.06); }
.sg-mkt-card-desc { font-size: 0.72rem; color: #64748b; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-mkt-card-visao-label { font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #94a3b8; margin-top: 6px; }
.sg-mkt-card-visao-select { width: 100%; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 5px; background: #f8fafc; font-size: 0.78rem; color: #334155; cursor: pointer; transition: border-color .15s, background .15s; }
.sg-mkt-card-visao-select:hover { background: #ffffff; border-color: #cbd5e1; }
.sg-mkt-card-visao-select:focus { outline: none; border-color: var(--acento); background: #ffffff; }
body.e-dark-mode .sg-mkt-card-visao-label { color: #64748b; }
body.e-dark-mode .sg-mkt-card-visao-select { background: #252830; border-color: rgba(255,255,255,.08); color: #d1d5db; }
body.e-dark-mode .sg-mkt-card-visao-select:hover { background: #2a2e38; }

.sg-mkt-card-actions { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.sg-mkt-card-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); background: color-mix(in srgb, var(--acento) 8%, transparent); color: var(--acento); font-size: 0.78rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background .15s, border-color .15s; }
.sg-mkt-card-btn:hover { background: color-mix(in srgb, var(--acento) 16%, transparent); border-color: var(--acento); }
.sg-mkt-card-btn span[class*="icon-"]::before { color: var(--acento) !important; }
.sg-mkt-card-badge { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; color: #10b981; font-size: 0.78rem; font-weight: 600; }
.sg-mkt-card-badge span[class*="icon-"]::before { color: #10b981 !important; }

/* Variante "Excluir" do botão do marketplace — aparece junto do badge
   "Adicionado" pra permitir remoção direta sem voltar ao home. */
.sg-mkt-card-btn--remove {
    border-color: color-mix(in srgb, #ef4444 35%, transparent);
    background: color-mix(in srgb, #ef4444 6%, transparent);
    color: #ef4444;
}
.sg-mkt-card-btn--remove:hover {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    border-color: #ef4444;
}
.sg-mkt-card-btn--remove span[class*="icon-"]::before { color: #ef4444 !important; }

/* Footer */
.sg-mkt-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; width: 100%; }
.sg-mkt-footer-hint { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: #64748b; }
.sg-mkt-footer-hint span[class*="icon-"] { font-size: 14px; color: #94a3b8 !important; }
.sg-mkt-footer-hint span[class*="icon-"]::before { color: #94a3b8 !important; }
.sg-mkt-btn { padding: 7px 16px; border: 1px solid #e2e8f0; background: #ffffff; color: #334155; border-radius: 6px; font-size: 0.82rem; font-weight: 500; cursor: pointer; }
.sg-mkt-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }

/* Dark mode */
body.e-dark-mode .sg-mkt-dlg .e-dlg-content { background: #1a1d24; }
body.e-dark-mode .sg-mkt-head-title { color: #e8e8e8; }
body.e-dark-mode .sg-mkt-head-sub { color: #94a3b8; }
body.e-dark-mode .sg-mkt-toolbar { background: #1e2128; border-bottom-color: rgba(255,255,255,.06); }
body.e-dark-mode .sg-mkt-search { background: #252830; border-color: rgba(255,255,255,.08); }
body.e-dark-mode .sg-mkt-search:focus-within { background: #2a2e38; border-color: #818cf8; }
body.e-dark-mode .sg-mkt-search input { color: #e8e8e8; }
body.e-dark-mode .sg-mkt-tab { color: #94a3b8; }
body.e-dark-mode .sg-mkt-tab:hover { color: #d1d5db; }
body.e-dark-mode .sg-mkt-tab--active { color: #818cf8; border-bottom-color: #818cf8; }
body.e-dark-mode .sg-mkt-tab--active span[class*="icon-"]::before { color: #818cf8 !important; }
body.e-dark-mode .sg-mkt-tab-badge { background: rgba(129,140,248,.18); color: #a5b4fc; }
body.e-dark-mode .sg-mkt-tab--active .sg-mkt-tab-badge { background: #818cf8; color: #1a1d24; }
body.e-dark-mode .sg-mkt-card { background: #1e2128; border-color: rgba(255,255,255,.08); }
body.e-dark-mode .sg-mkt-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.3); }
body.e-dark-mode .sg-mkt-card-title { color: #e8e8e8; }
body.e-dark-mode .sg-mkt-card-desc { color: #94a3b8; }
body.e-dark-mode .sg-mkt-btn { background: #2a2e38; border-color: rgba(255,255,255,.08); color: #d1d5db; }
body.e-dark-mode .sg-mkt-btn:hover { background: #343842; }

/* ── Popup do Designer de campos (Formularios.razor) — dark mode ── */
body.e-dark-mode .sgdes-popup {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #e8e8e8;
    box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}
body.e-dark-mode .sgdes-popup-overlay { background: rgba(0,0,0,.4); }
body.e-dark-mode .sgdes-popup-header { border-bottom-color: rgba(255,255,255,.08); }
body.e-dark-mode .sgdes-popup-title { color: #e8e8e8; }
body.e-dark-mode .sgdes-popup-subtitle { color: #94a3b8; }
body.e-dark-mode .sgdes-popup-close { color: #94a3b8; }
body.e-dark-mode .sgdes-popup-close:hover { background: #2a2e38; color: #e8e8e8; }
body.e-dark-mode .sgdes-popup-section-label { color: #818cf8; }
body.e-dark-mode .sgdes-popup-checks { border-top-color: rgba(255,255,255,.08); }
body.e-dark-mode .sgdes-popup-footer { border-top-color: rgba(255,255,255,.08); }
body.e-dark-mode .sgdes-popup::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }



/* ══════════ CHARTS — fonte global ══════════ */
/* Força Inter (legível em 10-11px) em todos os <text> SVG dos charts. */
.e-chart text,
.e-accumulationchart text {
    font-family: 'Inter', 'Open Sans', 'Segoe UI', sans-serif !important;
}
.e-tooltip text { font-family: 'Inter', 'Open Sans', 'Segoe UI', sans-serif !important; }

/* Tooltip dos charts: fundo escuro semi-transparente + texto branco
   (funciona em light e dark — o fundo escuro do Syncfusion não muda). */
.e-chart text[id*="_tooltip_text"] tspan,
.e-accumulationchart text[id*="_tooltip_text"] tspan,
.e-chart text[id*="_tooltip_text"],
.e-accumulationchart text[id*="_tooltip_text"] {
    fill: #f1f5f9 !important;
    font-size: 11px !important;
}
/* Tooltip path (caixa): borda translúcida pra suavizar bordas duras */
.e-chart path[id*="_tooltip_path"],
.e-accumulationchart path[id*="_tooltip_path"] {
    fill: rgba(15, 23, 42, 0.92) !important;
    stroke: rgba(148, 163, 184, 0.25) !important;
}

/* ══════════ Override de borders do SfGrid (Syncfusion fluent2) ══════════
   Remove a borda direita do detail indent cell e da table border — visualmente
   pesadas em grids densos com detail rows. */
.e-grid .e-detailindentcell {
    border-right-style: none !important;
    border-right-width: 0 !important;
}
.e-grid .e-tableborder {
    border-right: none !important;
}

/* ══════════ Spinner dos combos (form fields) ══════════
   Substitui o material-spinner default do Syncfusion (multi-segmentado, feio em
   campo pequeno) por um anel CSS simples. Escopado em .sg-combo-link-wrap pra
   não afetar grids/dialogs (que já têm spinner próprio). */
.sg-combo-link-wrap .e-spinner-pane .e-spin-material,
.sg-combo-link-wrap .e-spinner-pane .e-spin-fabric,
.sg-combo-link-wrap .e-spinner-pane .e-spin-fluent,
.sg-combo-link-wrap .e-spinner-pane svg {
    display: none !important;
}
.sg-combo-link-wrap .e-spinner-pane .e-spinner-inner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-sf-border-light, #e5e7eb);
    border-top-color: var(--color-sf-primary, #2c3e95);
    border-radius: 50%;
    animation: sg-combo-spin 0.6s linear infinite;
    box-shadow: none;
    background: transparent;
}
@keyframes sg-combo-spin {
    to { transform: rotate(360deg); }
}
body.e-dark-mode .sg-combo-link-wrap .e-spinner-pane .e-spinner-inner {
    border-color: rgba(255,255,255,0.18);
    border-top-color: var(--color-sf-primary, #6b7fde);
}

/* ══════════════════════════════════════════════════════════════════════════
   Dialog Detalhe da Medição (PainelMedicoes — duplo-clique no grid)
   SfDialog teleporta pra body, então tem que ser CSS global (não scoped).
   ══════════════════════════════════════════════════════════════════════════ */
.sg-pm-detalhe-dlg .e-dlg-content,
.sg-pm-detalhe-dlg .e-dlg-header-content,
.sg-pm-detalhe-dlg .e-footer-content {
    background: var(--color-sf-card-bg-color);
    color: var(--color-sf-content-text-color);
}

.sg-pm-detalhe-dlg .sg-pm-detalhe-header {
    display: flex;
    gap: 12px;
    align-items: center;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-icon {
    font-size: 1.4rem !important;
    color: #0851A3 !important;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    padding: 8px 10px;
    border-radius: 10px;
    flex: 0 0 auto;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-title {
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    color: var(--color-sf-content-text-color);
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-sub {
    font-size: 0.78rem;
    color: var(--color-sf-content-text-color-alt1, #64748b);
    margin-top: 2px;
}

.sg-pm-detalhe-dlg .sg-pm-detalhe-loading,
.sg-pm-detalhe-dlg .sg-pm-detalhe-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--color-sf-content-text-color-alt1, #64748b);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.sg-pm-detalhe-dlg .sg-pm-detalhe-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 18px;
    padding: 8px 0 14px;
    border-bottom: 1px dashed var(--color-sf-card-border-color, #e2e8f0);
    margin-bottom: 6px;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-grid > div {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-full {
    grid-column: 1 / -1;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    display: block;
}

.sg-pm-detalhe-dlg .sg-pm-detalhe-kpis {
    display: flex !important;
    gap: 10px;
    margin-top: 12px;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-kpi {
    flex: 1;
    background: var(--color-sf-content-bg-color, #f8fafc);
    border: 1px solid var(--color-sf-card-border-color, #e2e8f0);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-kpi-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-sf-content-text-color);
    font-variant-numeric: tabular-nums;
    display: block;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-kpi-lbl {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    display: block;
}

/* Footer actions */
.sg-pm-detalhe-dlg .sg-pm-detalhe-actions {
    display: flex !important;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-actions > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-actions > button:hover:not(:disabled) {
    transform: translateY(-1px);
}
.sg-pm-detalhe-dlg .sg-pm-detalhe-actions > button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sg-pm-detalhe-dlg .sg-pm-btn-flat {
    background: transparent;
    border-color: var(--color-sf-card-border-color, #cbd5e1);
    color: var(--color-sf-content-text-color);
}
.sg-pm-detalhe-dlg .sg-pm-btn-flat:hover:not(:disabled) {
    background: var(--color-sf-content-bg-color, #f1f5f9);
}

/* Status badge dentro do header do dialog — usa as mesmas cores do grid */
.sg-pm-detalhe-dlg .sg-pm-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}
.sg-pm-detalhe-dlg .sg-pm-status-aberta    { background: #fef3c7; color: #92400e; }
.sg-pm-detalhe-dlg .sg-pm-status-enviada   { background: #dbeafe; color: #1e40af; }
.sg-pm-detalhe-dlg .sg-pm-status-aprovada  { background: #dcfce7; color: #166534; }
.sg-pm-detalhe-dlg .sg-pm-status-faturada  { background: #ede9fe; color: #6d28d9; }
.sg-pm-detalhe-dlg .sg-pm-status-cancelada { background: #fee2e2; color: #b91c1c; }

/* ══════════════════════════════════════════════════════════════════════════
   Dialog de pendências do wizard Novo Contrato — passo 1
   SfDialog teleporta pra body, então o CSS vive aqui (global).
   ══════════════════════════════════════════════════════════════════════════ */
.sgnc-prereq-dlg .sgnc-prereq-dlg-header {
    display: flex;
    gap: 14px;
    align-items: center;
}
.sgnc-prereq-dlg-icon {
    font-size: 1.6rem !important;
    color: #d97706 !important;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 6px 8px;
    border-radius: 10px;
}
.sgnc-prereq-dlg-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-sf-content-text-color);
}
.sgnc-prereq-dlg-sub {
    font-size: 0.78rem;
    color: var(--color-sf-content-text-color-alt1);
}
.sgnc-prereq-dlg-msg {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: var(--color-sf-content-text-color);
    line-height: 1.5;
}
.sgnc-prereq-dlg .sgnc-prereq-list {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--color-sf-content-text-color);
}
.sgnc-prereq-dlg .sgnc-prereq-list li { margin: 6px 0; }
.sgnc-prereq-dlg .sgnc-prereq-list a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.sgnc-prereq-dlg .sgnc-prereq-list a:hover { text-decoration: underline; }
.sgnc-prereq-dlg .sgnc-prereq-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sgnc-prereq-dlg-warning {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px dashed #fdba74;
    border-radius: 8px;
    color: #9a3412;
    font-size: 0.82rem;
    line-height: 1.45;
}
.sgnc-prereq-dlg-warning .icon-ic_fluent_info_16_regular {
    color: #ea580c;
    flex: 0 0 auto;
    margin-top: 2px;
}