/* (Removida a @font-face órfã "SF Pro Text" → fonts/SFPRODISPLAYREGULAR.OTF.
   Declarava a família com UM arquivo só e SEM font-weight: quem a usasse com
   peso 600+ cairia em negrito sintético. O app nunca a pedia por aqui — o tema
   Fluent 2 usa "Segoe UI", -apple-system, … e no macOS resolve em SF Pro pelo
   -apple-system, que é a fonte de sistema e tem todos os pesos reais. O único
   consumidor do nome era NewKanban.razor.css, que agora resolve na fonte de
   sistema (e economiza o download de 292 KB de OTF). */

/* ── 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; }
/* SfAppBar é renderizado sempre com ColorMode=Light (.e-light), inclusive no dark
   body. O qualificador .e-light é necessário p/ a especificidade (0,2,1) vencer o
   fluent2.css. O bg deve ser IDÊNTICO ao do body pra navbar fundir sem faixa:
   body usa --bs-white no claro e --color-sf-content-bg-color no dark (ver linhas
   7-8). Espelhamos isso aqui. */
body .e-appbar.e-light {
    background: var(--bs-white) !important;
    border-bottom: none !important;
}
body.e-dark-mode .e-appbar.e-light {
    background: var(--color-sf-content-bg-color) !important;
}

/* ── Diálogo de Aprovações — altura fixa relativa à viewport ──
   O SfDialog renderiza .e-dialog no nível do body (fora do CSS isolado do componente),
   e a prop Height="80vh" não foi respeitada — força-se aqui (global, !important). Sem
   isso, a altura virava relativa ao conteúdo da página e encolhia na Home. O conteúdo
   rola internamente (.sg-aprov-list tem overflow-y:auto). */
.e-dialog.sg-aprov-dlg {
    height: 80vh !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.e-dialog.sg-aprov-dlg > .e-dlg-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !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: #0066FF;
    border-bottom-color: color-mix(in srgb, #0066FF 30%, transparent);
    animation: sg-loader-spin 1.6s linear infinite;
}
.sg-chart-spinner-ring--2 {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-left-color: #0099FF;
    border-right-color: color-mix(in srgb, #0099FF 30%, transparent);
    animation: sg-loader-spin 1.9s linear infinite reverse;
}
.sg-chart-spinner-vela {
    width: 34px;
    height: 34px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 102, 255, .20));
    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');
}

/* Peso REAL leve (300). O arquivo já existia em fonts/ mas nunca foi declarado,
   então todo font-weight abaixo de 400 caía no Regular — navegador não sintetiza
   peso mais leve, só mais pesado. É o espelho do problema de faux-bold abaixo:
   lá o peso era inventado, aqui era silenciosamente ignorado. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), url('fonts/OpenSans-Light.woff') format('woff');
}

/* Pesos REAIS de negrito sob a família base 'Open Sans'.
   Sem estes, font-weight:600/700/800 caía em NEGRITO SINTÉTICO (faux-bold),
   que o Safari/WebKit rasteriza pesado e borrado ("horrível"). Agora o peso
   pedido carrega o arquivo desenhado correspondente — nítido em Safari e Chrome. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), url('fonts/OpenSans-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local('Open Sans ExtraBold'), url('fonts/OpenSans-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: normal;
    src: local('Open Sans Italic'), url('fonts/OpenSans-Italic.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), url('fonts/OpenSans-BoldItalic.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) ──────────── */
/* Grid no mesmo tamanho de campo do sistema (0.78rem). Era 12px fixo: 0,48px de
   diferença, mas some mais uma constante de tamanho concorrente — grid, formulário
   e diálogo passam a falar do mesmo número. */
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-headertext,
.e-grid .e-summarycell,
.e-grid .e-groupdroparea,
.e-grid .e-grouptext,
.e-grid .e-ungroupbutton {
    font-size: 0.78rem !important;
}

/* Linhas de dados em peso 300 (Light, arquivo real em Open Sans). O dado se lê pelo
   conteúdo; o cabeçalho é que precisa marcar presença — por isso o peso cai só no
   .e-rowcell e o header fica como está. Vale para grid e subgrid: são a mesma classe,
   e pesos diferentes entre os dois seriam justamente a divergência que estamos tirando
   do sistema. */
.e-grid .e-rowcell {
    font-weight: 300 !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; }

/* Toolbar dos forms (header de Main/Inner): sem fundo branco — funde com o
   header. O .e-toolbar-items e os .e-tbar-btn vêm brancos do tema Syncfusion;
   zera ambos e preserva o hover. */
.sgdlg-header-wrap .e-toolbar,
.sgdlg-header-wrap .e-toolbar .e-toolbar-items,
.sgdlg-header-wrap .e-toolbar .e-toolbar-item,
.sgdlg-header-wrap .e-toolbar .e-tbar-btn {
    background: transparent !important;
}
.sgdlg-header-wrap .e-toolbar .e-tbar-btn:hover,
.sgdlg-header-wrap .e-toolbar .e-tbar-btn:focus {
    background: rgba(0, 0, 0, 0.05) !important;
}
body.e-dark-mode .sgdlg-header-wrap .e-toolbar .e-tbar-btn:hover,
body.e-dark-mode .sgdlg-header-wrap .e-toolbar .e-tbar-btn:focus {
    background: rgba(255, 255, 255, 0.08) !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;
}

/* ══════════════════════════════════════════════════════════════════════
   ABAS — mesmo acabamento dos campos (leveza, hairline, cinza elegante)
   ─────────────────────────────────────────────────────────────────────
   O tema 33.2.5 declara:
     .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
        font-family: var(--e-font-family); font-size: 14px;
        font-weight: 500; text-transform: capitalize; }

   Dois defeitos, os dois confirmados no arquivo do tema:

   1) `font-weight: 500` NÃO EXISTE em Open Sans. Os arquivos declarados no
      topo deste app.css são 300/400/600/700/800 — o browser resolvia 500 para
      400. Mais um peso fantasma, da mesma família da @font-face órfã. Aqui vai
      300 EXPLÍCITO, que tem arquivo real (OpenSans-Light.woff): o que se pede
      é o que se entrega.
   2) `text-transform: capitalize` quebra em português — maiúscula preposição.
      "Sub formulários" virava "Sub Formulários", "Regras de notificação"
      virava "Regras De Notificação". As abas de uma palavra ("Geral",
      "Eventos") disfarçavam. Conferi TODOS os rótulos `TabHeader Text` do
      projeto: nenhum depende da transformação para parecer certo — todos já
      vêm capitalizados corretamente do código, e os dinâmicos vêm do metadado
      (SYS_FORMULARIO_SUB.Orelha), onde quem escreve é o usuário. Remover
      devolve o rótulo como foi escrito, que é onde a capitalização correta
      já existe. (O tema tem um `text-transform: none` posterior, mas escopado
      em `.e-spreadsheet` — não alcança as abas comuns.)

   Destaque da aba ativa por COR e pelo indicador, nunca por peso — as duas
   ficam em 300.
   ══════════════════════════════════════════════════════════════════════ */
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    text-transform: none !important;
}

/* Aba ativa: UM token que já resolve os dois temas.
   `--color-sf-primary-label-color` é `var(--color-sf-primary)` (#0f6cbd) no
   claro e #479ef5 no escuro — é o token de PRIMÁRIA PARA TEXTO. O tema usa
   `--color-sf-primary` cru, que no escuro é #115ea3 e some sobre #1f1f1f
   (~2:1); e o reset de dark mode deste arquivo ainda achatava ativa e inativa
   no mesmo #adadad, deixando o indicador como única pista. Assim a hierarquia
   por cor volta a valer nos dois temas, com uma regra só e zero dark mode. */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
    color: var(--color-sf-primary-label-color) !important;
}

/* Hairline sob a faixa de abas — o tema entrega `border-bottom: 0`, então o
   indicador da ativa flutuava sem linha de base. Mesmo cinza dos campos. */
.e-tab .e-tab-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-sf-border-light, #e0e0e0) 60%, var(--color-sf-content-bg-color, #fff)) !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; }

/* ── Camada congelada: fundo SÓLIDO também nos ESTADOS ──────────────────────
   A regra acima é cópia da do próprio tema, inclusive o `:not(…)` que EXCLUI
   célula selecionada/ativa — a aposta é que o estado traga o fundo dele. Não
   traz: no Fluent 2 a seleção de linha não declara background para a célula
   congelada, e essa célula é uma CAMADA SOBREPOSTA (sticky). Sem fundo, o
   conteúdo que rola horizontalmente passa por baixo e aparece através dela —
   texto sobre texto na linha selecionada.
   Era latente desde sempre; só ficou visível quando os grids de metadado
   ganharam colunas congeladas.
   Tokens de TABELA (não os de conteúdo) para casar exatamente com o resto da
   linha, e SÓLIDOS de propósito: `color-mix(..., transparent)` aqui
   reintroduziria o bug, que é justamente a falta de opacidade. Os dois tokens
   já viram sozinhos no tema escuro (#ebf3fc→#082338, #f5f5f5→#383838), então
   não há regra de dark mode separada. */
body .e-grid .e-leftfreeze.e-selectionbackground,
body .e-grid .e-rightfreeze.e-selectionbackground,
body .e-grid .e-fixedfreeze.e-selectionbackground,
body .e-grid .e-leftfreeze.e-active,
body .e-grid .e-rightfreeze.e-active,
body .e-grid .e-fixedfreeze.e-active,
body .e-grid .e-leftfreeze.e-cellselectionbackground,
body .e-grid .e-rightfreeze.e-cellselectionbackground,
body .e-grid .e-fixedfreeze.e-cellselectionbackground {
    background-color: var(--color-sf-table-bg-color-selected) !important;
}

/* Hover: o `:not()` em LISTA mantém a especificidade baixa e impede que o
   hover repinte por cima de uma linha já selecionada. */
body .e-grid .e-gridhover .e-row:hover > .e-leftfreeze:not(.e-selectionbackground, .e-active, .e-cellselectionbackground),
body .e-grid .e-gridhover .e-row:hover > .e-rightfreeze:not(.e-selectionbackground, .e-active, .e-cellselectionbackground),
body .e-grid .e-gridhover .e-row:hover > .e-fixedfreeze:not(.e-selectionbackground, .e-active, .e-cellselectionbackground) {
    background-color: var(--color-sf-table-bg-color-hover) !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: 0.78rem !important;
}

/* Pager — flat sem fundo, font-size padrão 12px, separador apenas no topo */
body .e-pager {
    background: transparent !important;
    font-size: 12px !important;
    border: none !important;
    border-top: 1px solid var(--color-sf-border-light, #e2e8f0) !important;
}
/* Garante 12px nos elementos do pager que herdavam o tamanho grande do contexto:
   números, "Itens por página" (constant) e o dropdown de tamanho de página ("50"). */
.e-pager .e-numericitem,
.e-pager .e-currentitem,
.e-pager .e-pagerconstant,
.e-pager .e-pagesizes,
.e-pager .e-pagesizes .e-input,
.e-pager .e-pagesizes .e-dropdownlist,
.e-pager .e-pagesizes .e-ddl .e-input { font-size: 12px !important; }

/* Pager — cores dos itens (estado atual, container e numéricos) */
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background: var(--color-sf-info-light);
    color: var(--color-sf-primary-text-color);
    opacity: 1;
}

.e-pager .e-pagercontainer {
    /* background-color: var(--color-sf-content-bg-color-alt1); */
    border-color: rgba(0, 0, 0, 0);
}

.e-pager .e-numericitem {
    /* background: var(--color-sf-content-bg-color-alt1); */
    color: var(--color-sf-content-text-color-alt1);
}

/* (Aqui existia um bloco de 11 seletores reduzindo a fonte dos campos DENTRO
   de `.e-dialog`. Removido por redundância: o acabamento global mais abaixo
   agora mira o elemento (`input.e-input`, `textarea.e-input`, `.e-input-value`,
   `label.e-float-text`) e não a superfície, então diálogo, painel, drawer e
   página recebem o mesmo tamanho sem regra por contexto. O único seletor sem
   cobertura equivalente era `.e-dialog .e-dropdownbase .e-list-item`, que nunca
   casou: o popup do dropdown é anexado ao body, fora do `.e-dialog`.) */

.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: 200;
    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: transparent transparent; /* Firefox: some até o hover da área */
}
.sg-kpiarea:hover .sg-appbar {
    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: transparent; /* invisível até o mouse entrar na área dos gráficos */
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 160ms ease;
}
.sg-kpiarea:hover .sg-appbar::-webkit-scrollbar-thumb {
    background: var(--color-sf-icon-color);
    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;
}

/* ── Texto de item de toolbar ──────────────────────────────────────────────
   A toolbar do grid mistura DUAS procedências de DOM, e era daí que vinha a
   divergência de estilo:
     • itens estáticos (Atualizar, Adicionar, Exportar, Imprimir, Ajuda, Escolha
       as colunas, Última query, Metadado) vêm de um <SfMenu> dentro de um
       ToolbarItem Template → renderizam como `.e-menu-item`;
     • processamentos dinâmicos (ex.: "Importar NFe Coletadas") vêm de
       <ToolbarItem Text=…> de verdade → renderizam como `.e-tbar-btn-text`.
   Só o segundo caía nesta regra; o primeiro ficava no default do tema (14px e
   mais pesado). O botão de toolbar é o estilo aprovado, então os dois passam a
   dividir a MESMA declaração — não é uma cópia do valor, é o mesmo bloco, para
   não voltarem a divergir quando alguém ajustar um deles.
   Peso 300 tem arquivo real (OpenSans-Light.woff). Escopado em
   `.sg-grid-toolbar-menu` de propósito: não alcança os outros menus do sistema. */
.e-tbar-btn-text,
.sg-grid-toolbar-menu .e-menu-item {
    font-size: 12px !important;
    font-weight: 300 !important;
}

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


/* ── Respiro entre campos do formulário metadata-driven ──────────────────
   O tema declara `display:grid` no `.e-form-layout` e as colunas em
   `.e-data-form .e-grid-col-N`, mas NÃO declara `gap` nenhum — os campos
   ficavam encostados um no outro, e era essa a diferença de "respiro" contra
   o formulário estático de referência (o diálogo de RegrasMatching, cujo
   `.sg-fmat-regra-form` usa `gap: 12px`).
   Mesmo valor aqui, para o campo dinâmico ficar indistinguível do estático.
   Sem `!important`: o tema não disputa esta propriedade. */
.e-data-form .e-form-layout {
    gap: 12px;
}

.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: abaixo de 1600px o colspan dobra
   ══════════════════════════════════════════════════════════════════════
   Os colspan do metadata foram desenhados para o formulário ter ao menos
   1600px. Abaixo disso todos dobram — colapsando duas colunas naturais em
   uma: colspan-3 vira span-6 (metade), colspan-6 vira span-12 (linha
   inteira). Acima de 12 não existe, então tudo satura ali.

   !important OBRIGATÓRIO. O tema declara `.e-data-form .e-colspan-6` — mesma
   especificidade (0,2,0) da regra daqui — e o fluent2.css é carregado pelo
   MainLayout DENTRO do <body>, portanto DEPOIS do app.css. Em empate vence
   quem vem por último: sem !important estas regras nunca chegam a valer, e
   foi por isso que a versão anterior (um @media desde sempre no arquivo)
   jamais surtiu efeito.

   MEDE O CONTAINER, NÃO A JANELA. O que aperta o campo é a largura do
   FORMULÁRIO, e ela raramente é a da viewport: o mesmo form abre em página
   cheia, em diálogo (que tem margem própria) e ao lado do rail. Uma janela
   de 1900px com o form num diálogo de 1400px encavala do mesmo jeito, e
   nenhuma media query de viewport perceberia.

   O @media logo abaixo continua como rede de segurança para navegador sem
   suporte a container query, com o mesmo critério aproximado pela viewport.
   Onde os dois valem, o container query vence por vir depois.
   ══════════════════════════════════════════════════════════════════════ */
.sg-metaform {
    container-type: inline-size;
    container-name: sgform;
}

@container sgform (max-width: 1599px) {
    .e-form-layout .e-colspan-1 { grid-column: span 2 / span 2 !important; }
    .e-form-layout .e-colspan-2 { grid-column: span 4 / span 4 !important; }
    .e-form-layout .e-colspan-3 { grid-column: span 6 / span 6 !important; }
    .e-form-layout .e-colspan-4 { grid-column: span 8 / span 8 !important; }
    .e-form-layout .e-colspan-5 { grid-column: span 10 / span 10 !important; }
    .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 !important; }
}

/* ── Formulário estreito (sm/xs): uma coluna só ────────────────────────
   Dobrar o colspan resolve até certo ponto; abaixo de ~768px de FORMULÁRIO
   nem meia largura serve — dois campos lado a lado deixam de caber com
   rótulo legível. Aqui o layout inteiro vira uma coluna:
     • os blocos (e-grid-col-2/3/…) empilham, em vez de dividir a largura;
     • todo campo ocupa a linha inteira, qualquer que fosse seu colspan.

   O e-grid-col-12 fica de fora do primeiro seletor de propósito: ele é a
   grade DOS CAMPOS (12 colunas), não uma divisão de blocos, e quem resolve
   o campo ali é a regra de colspan logo abaixo. */
@container sgform (max-width: 767px) {
    .e-form-layout.e-grid-col-2,
    .e-form-layout.e-grid-col-3,
    .e-form-layout.e-grid-col-4,
    .e-form-layout.e-grid-col-5,
    .e-form-layout.e-grid-col-6 {
        grid-template-columns: 1fr !important;
    }

    .e-form-layout [class*="e-colspan-"] {
        grid-column: span 12 / span 12 !important;
    }
}

/* Rede de segurança por viewport (era 1439px — subiu para 1599px porque o
   encavalamento aparece já em ~1600px de formulário). */
@media (max-width: 1599px) {
    .e-form-layout .e-colspan-1 { grid-column: span 2 / span 2 !important; }
    .e-form-layout .e-colspan-2 { grid-column: span 4 / span 4 !important; }
    .e-form-layout .e-colspan-3 { grid-column: span 6 / span 6 !important; }
    .e-form-layout .e-colspan-4 { grid-column: span 8 / span 8 !important; }
    .e-form-layout .e-colspan-5 { grid-column: span 10 / span 10 !important; }
    .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 !important; }
}

/*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,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-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); }

/* ══════════════════════════════════════════════════════════════════════
   ACABAMENTO DE CAMPO — padrão único do sistema
   ─────────────────────────────────────────────────────────────────────
   Referência visual: o `.sgdes-legend-item` do Designer de layout
   (0.7rem / peso 400 / cinza calmo) e o hairline dos cards.

   Regras GLOBAIS de propósito. O que se corrige aqui é o próprio tema
   Fluent 2, que é comum aos três escopos — formulário dinâmico
   (SeglaFormField), telas estáticas escritas à mão e componentes de
   manutenção de metadado — então nenhum deles precisa de classe própria.
   Substituem o antigo bloco .sg-metaform: MESMO conteúdo, sem o prefixo
   (a classe segue no markup, mas o acabamento deixou de depender dela).

   !important porque o fluent2.css é carregado pelo MainLayout, DENTRO do
   <body> — isto é, DEPOIS do app.css: em empate de especificidade o tema
   venceria. Onde o tema tem estados (foco/erro/desabilitado) as regras são
   guardadas por :not(), senão o !important atropelaria o feedback visual
   do app inteiro.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. A CAUSA DO "BORRADO" no label.
   O tema desenha o float label a 14px e depois o ENCOLHE por transform:
   `translate3d(0, -6px, 0) scale(0.92)`. O glifo é rasterizado a 14px e
   reamostrado para 12.88px — escala de bitmap, sem re-hinting no tamanho
   final — dentro de uma camada promovida a GPU pelo translate3d (no macOS
   isso ainda troca antialiasing subpixel por grayscale). Nada disso depende
   de font-weight: por isso aumentar o peso não resolvia, só engrossava o
   borrão. Pior: encolher o label sem tirar a escala só piora — 0.7rem daria
   11.2 × 0.92 = 10.3px, um alvo fracionário ainda pior.
   Aqui o tamanho final é declarado de verdade e a escala sai — o texto passa
   a ser rasterizado no tamanho em que aparece, como nos cards do Designer,
   que não têm transform nenhum. ── */
/* O TAMANHO vale nos dois estados do float label (topo e "dentro do campo",
   quando FloatLabelType=Auto ainda não subiu) — senão o placeholder aparece
   maior que o valor que vai ser digitado ali. */
label.e-float-text {
    font-size: 0.78rem !important;
}

/* Já a correção da ESCALA é só do estado topo, que é onde o tema aplica o
   `scale(0.92)`. */
label.e-float-text.e-label-top {
    transform: translateY(-6px) !important;
}

/* TEXTAREA: o tema empurra o label na direção OPOSTA à do input normal.
     input normal → `top: -9px`  + `translate3d(0, -6px, 0)` = -15px do topo
     textarea     → `top: -28px` + `translate3d(0, +6px, 0)` = -22px do topo
   Como a regra acima é `!important`, ela vencia a do tema (que não é) e trocava
   o +6px por -6px: o label do textarea ia parar a -34px em vez de -22px, ou seja
   12px ACIMA do lugar. Era esse o vão — e por isso o rótulo do campo grande
   parecia pertencer ao elemento de cima em vez de ao próprio campo.
   (O `gap: 12px` do form-layout é coincidência de valor: gap separa CÉLULAS do
   grid e não alcança um label posicionado por `position:absolute` dentro da
   própria célula. A conta -6 contra +6 explica os 12px sozinha.)
   Aqui o deslocamento do tema é devolvido — sem o `scale(0.92)`, que continua
   fora por causa do borrado. Especificidade (0,3,2) > (0,2,1) da regra acima. */
.e-float-input textarea ~ label.e-float-text.e-label-top {
    transform: translateY(6px) !important;
}

/* ── 2. A MESMA FAMÍLIA do resto do app.
   `*, html, body { font-family: "Open Sans" }` (topo deste arquivo) declara a
   intenção, mas o tema a sobrescreve nos controles: `.e-float-input`/`.e-input-group`
   pedem `"Segoe UI", -apple-system, …`, que no macOS cai em SF Pro. Ou seja, o
   card do Designer (div comum → Open Sans) e o label do formulário (dentro de
   .e-control → SF Pro) nunca foram a mesma letra. `inherit` devolve o campo à
   família da página sem repetir o nome da fonte em lugar nenhum. ── */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper,
input.e-input,
textarea.e-input {
    font-family: inherit !important;
}

/* ── 3. Leveza = peso 400 + COR, nunca weight.
   É o par do `.sgdes-legend-item` que virou referência (0.7rem/400/#64748b):
   a hierarquia se faz apagando o tom, não engrossando o traço.
   O mix é contra o TOKEN DE FUNDO, e não contra `transparent`: o resultado é
   uma cor SÓLIDA, que não muda com o que estiver atrás (linha zebrada de grid,
   linha selecionada, superfície tingida) e que acompanha o tema escuro sozinha
   — por isso não há regra de dark mode aqui. ── */
.e-float-text,
.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
    font-weight: 300 !important;
    color: color-mix(in srgb,
                     var(--color-sf-content-text-color, #1e293b) 68%,
                     var(--color-sf-content-bg-color, #fff)) !important;
}

/* ── 4. Conteúdo do input no mesmo tamanho do label.
   POR QUE A VERSÃO ANTERIOR NÃO PEGAVA EM TODA SUPERFÍCIE: todos os cinco
   seletores exigiam `.e-input-group` (como ancestral ou no próprio elemento).
   Só que o `SfTextBox`/`SfComboBox` nem sempre põem essa classe — com float
   label o wrapper pode sair só como `.e-float-input.e-control-wrapper`, e o
   tema trata esse caso separadamente o tempo todo. Onde `.e-input-group` não
   aparecia, nada casava e o valor voltava para os 14px do tema — daí o label
   pequeno com o valor grande no painel de metadado.
   A regra do LABEL sempre funcionou justamente porque mira o ELEMENTO
   (`label.e-float-text`), sem depender de ancestral. Aqui vale o mesmo: o tema
   define a base em `input.e-input { font-size: 14px }`, então é esse o alvo.
   Bônus: `.e-input-value` (o texto exibido de DropDownList/ComboBox) não era
   coberto por nenhum dos seletores antigos.
   Especificidade fica MENOR que antes — (0,1,1) em vez de (0,3,0) — o que é a
   lição do dia: alcance vem de mirar o alvo certo, não de empilhar classe. ── */
input.e-input,
textarea.e-input,
.e-input-value,
/* Nem todo controle marca o campo com `.e-input`: MultiColumnComboBox, alguns
   wrappers de dropdown e os campos de filtro do grid deixam o input "pelado"
   dentro do wrapper. Mirar o input DENTRO dos wrappers Syncfusion fecha esses
   casos sem voltar a depender de uma classe que pode não vir. */
.e-float-input input,
.e-float-input textarea,
.e-input-group input,
.e-input-group textarea,
.e-control-wrapper input,
.e-control-wrapper textarea,
.e-ddl input,
.e-mccombobox input {
    font-size: 0.78rem !important;
}

/* ── 5. Borda hairline no mesmo cinza dos cards + canto suave.
   ATENÇÃO À ESPECIFICIDADE — foi exatamente aqui que a barra vermelha de campo
   obrigatório sumiu, e vale registrar por quê: cada `:not()` soma a
   especificidade do seu ARGUMENTO. A primeira versão desta regra encadeava
   cinco `:not()` e valia (0,6,0), passando por cima de
   `.sg-obrigatorio .e-input-group` (0,2,0). Como `border-color` atinge os
   QUATRO lados e as duas regras eram `!important`, a barra vermelha era
   repintada de cinza — sem erro nenhum, só o asterisco do label sobrevivia
   (é ::after, outro elemento).
   A saída NÃO é escalar a especificidade do lado de lá (vira corrida armamentista:
   cada `:not()` novo aqui obriga a mexer lá). É BAIXAR a daqui: um único `:not()`
   com LISTA vale o do argumento mais específico → (0,1,0), e o seletor inteiro
   fica (0,2,0). Empata com as marcações da casa, que vêm logo abaixo e vencem
   por ORDEM — que é como um acabamento base e suas exceções devem se resolver.
   O `.e-input-group.e-control-wrapper` saiu por redundância: esses elementos já
   casam com `.e-input-group`, a variante só inflava para (0,3,0). ── */
.e-input-group:not(.e-input-focus, .e-error, .e-success, .e-warning, .e-disabled) {
    border-color: color-mix(in srgb, var(--color-sf-border-light, #e0e0e0) 60%, var(--color-sf-content-bg-color, #fff)) !important;
}

.e-input-group {
    border-radius: 8px !important;
}

/* O "underline" preto do Fluent é desenhado nestes pseudo-elementos (2px, com
   animação no foco). Neutralizados — o foco já se anuncia pela troca de fundo.
   Erro/sucesso/aviso ficam DE FORA: nesses estados os MESMOS pseudo-elementos
   viram a barra colorida de validação (`background: var(--color-sf-border-error)`),
   e zerá-los apagaria o aviso de campo inválido em todo o ERP. ── */
.e-input-group:not(.e-error, .e-success, .e-warning)::before,
.e-input-group:not(.e-error, .e-success, .e-warning)::after {
    background: transparent !important;
    height: 0 !important;
}

/* Ícone "limpar" (X) sem borda/fundo — fica alinhado dentro do campo arredondado */
.e-input-group .e-clear-icon,
.e-input-group.e-control-wrapper .e-clear-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MARCAÇÕES DE ESTADO DA CASA — vêm DEPOIS do acabamento de propósito
   ─────────────────────────────────────────────────────────────────────
   O acabamento acima pinta a borda de TODO input do sistema. As marcações
   abaixo são exceções que precisam sobrepô-lo, e se resolvem por ORDEM de
   declaração (mesma especificidade), não por escalada de `:not()`.
   Se um dia o acabamento mudar de seletor, é aqui que se confere se a
   decoração de obrigatório continua aparecendo — ela some sem erro nenhum.
   ══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   CAMPO OBRIGATÓRIO — padrão GLOBAL da casa (estreado no CRM de resíduos).
   Borda esquerda 2px vermelha + asterisco vermelho no label. Vale p/ forms
   metadata-driven (classe .sg-obrigatorio, aplicada pelo SeglaFormField quando
   Campo.Obrigatorio) e forms custom (.sgcrm-req + <i class="sgcrm-req-star">*</i>).
   ============================================================ */

/* Borda esquerda vermelha — direto no componente Syncfusion ou input HTML */
.sg-obrigatorio.e-input-group,
.sg-obrigatorio .e-input-group,
.sg-obrigatorio.e-control-wrapper,
div.sg-obrigatorio > .e-input-group,
.sgcrm-req.e-input-group,
.sgcrm-req.e-input-group.e-control-wrapper,
input.sgcrm-req, select.sgcrm-req, textarea.sgcrm-req {
    border-left: 2px solid #dc2626 !important;
}

/* Asterisco vermelho: no label flutuante (e-float-text / e-label dos Syncfusion)
   e no marcador manual dos forms custom (.sgcrm-req-star) */
.sgcrm-req-star { color: #dc2626; font-style: normal; font-weight: 800; margin-left: 2px; }
.sg-obrigatorio .e-float-text::after,
.sg-obrigatorio .e-label::after {
    content: " *";
    color: #dc2626;
    font-weight: 800;
    font-size: 0.85em;
    vertical-align: super;
    line-height: 0;
}

/* Dark mode — vermelho um pouco 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,
.e-dark-mode .sgcrm-req.e-input-group {
    border-left-color: #ef4444 !important;
}
.e-dark-mode .sg-obrigatorio .e-float-text::after,
.e-dark-mode .sg-obrigatorio .e-label::after,
.e-dark-mode .sgcrm-req-star { color: #ef4444; }


/* ============================================================================
   Formulários framework-driven (dialog de edição): mesma animação do drawer do
   CRM — slide vindo da direita, 2s. O .e-dlg-container centraliza via flex, então
   o transform no .e-dialog só desliza (não desloca a posição final).
   ============================================================================ */
.e-dialog.sg-edit-dialog {
    animation: sg-edit-slide 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
@keyframes sg-edit-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
/* Fechamento (slide-out): aplicado via Web Animations API em sgEditDialogClose (App.razor),
   pois a classe CSS era reescrita pelo SfDialog no re-render e o efeito não aparecia. */

/* ============================================================================
   Subformulário (sg-inner-dialog): zoom de 2s. Abertura via CSS (zoom-in, ease-out);
   fechamento via Web Animations API em sgSubformZoomClose (App.razor), com ease-in que
   "acelera no fim". O Effect=None do SfDialog desliga a animação nativa (FadeZoom).
   ============================================================================ */
.e-dialog.sg-subform-zoom {
    animation: sg-subform-zoom-in 2s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
    will-change: transform, opacity;
}
@keyframes sg-subform-zoom-in {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
/* (O antigo override de borda escura do .sg-metaform saiu: a borda agora é
   color-mix sobre --color-sf-border-light, que já vira sozinho no tema escuro.) */

/* (O inspetor do Designer de layout não tem mais override de fonte: o diálogo
   carrega a classe .sg-metaform, então seus campos ficam idênticos aos das abas
   e aos do motor metadata-driven. Menos CSS, um acabamento só.) */

/* ── 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;
    /* Folga para o ✕ de fechar, que é posicionado por cima do cabeçalho pelo
       Syncfusion: sem ela o último bloco de metadado encosta no botão. */
    padding-right: 50px;
}

/* 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%;
    min-height: 56px;                   /* altura consistente do footer em todos os forms */
    box-sizing: border-box;
    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;
}

/* O .e-dlg-content precisa PREENCHER a altura do dialog pra que o footer inline
   (margin-top:auto) ancore no rodapé real mesmo com form curto. Sem isto o
   e-dlg-content fica com height:auto (= altura do conteúdo) e o footer encosta
   logo abaixo dos campos, deixando espaço vazio no fundo.

   Seletor por :has() (independe de a classe sg-edit-dialog estar no .e-dialog
   ou no .e-dlg-container): mira qualquer .e-dialog cujo conteúdo tem o footer
   inline e força o próprio dialog a flex-column + o content a preencher. */
.e-dialog:has(> .e-dlg-content .sgdlg-footer-actions-inline) {
    display: flex !important;
    flex-direction: column !important;
}
.e-dialog:has(> .e-dlg-content .sgdlg-footer-actions-inline) > .e-dlg-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* 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,
.sg-inner-dialog .e-dlg-content {
    display: flex !important;
    flex-direction: column !important;
    /* Zera o padding-bottom do scroller: o footer é sticky bottom:0 e, com
       padding embaixo, "parava" ~10px acima da base deixando o conteúdo rolar
       e aparecer numa fresta sob o footer. */
    padding-bottom: 0 !important;
}

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

.sg-edit-dialog .sgdlg-footer-actions-inline,
.sg-subform-panel .sgdlg-footer-actions-inline,
.sg-inner-dialog .sgdlg-footer-actions-inline {
    margin-top: auto !important;
}

/* Quando o host (grid edit dialog / inner dialog) envolve o conteúdo do Form
   em wrappers intermediários entre o .e-dlg-content (flex column) e o par
   .content-wrapper + footer, o margin-top:auto do footer não tem como ancorar
   no rodapé — ele encosta logo abaixo do form curto, deixando vazio embaixo.
   No grid edit dialog a cadeia real é (verificado no DOM ao vivo):
     .e-dlg-content > div.e-editedrow > form.e-gridform > formerrorboundary
                    > (div.content-wrapper + div.sgdlg-footer-actions-inline)
   ou seja, TRÊS níveis de wrapper, sendo um deles um custom element
   <formerrorboundary> com display:inline que quebra qualquer cadeia flex.
   Cada seletor :has abaixo casa exatamente um desses wrappers (footer 1, 2 ou 3
   níveis acima), tornando-os flex-column que preenchem a altura e restaurando o
   pin do footer. Como o footer só tem esse único caminho dentro do .e-dlg-content,
   nada além desses wrappers é afetado (o .content-wrapper não contém o footer).
   Inócuo quando o footer já é filho direto do .e-dlg-content. */
.sg-edit-dialog  .e-dlg-content *:has(> .sgdlg-footer-actions-inline),
.sg-edit-dialog  .e-dlg-content *:has(> * > .sgdlg-footer-actions-inline),
.sg-edit-dialog  .e-dlg-content *:has(> * > * > .sgdlg-footer-actions-inline),
.sg-inner-dialog .e-dlg-content *:has(> .sgdlg-footer-actions-inline),
.sg-inner-dialog .e-dlg-content *:has(> * > .sgdlg-footer-actions-inline),
.sg-inner-dialog .e-dlg-content *:has(> * > * > .sgdlg-footer-actions-inline) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !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;
}

/* Exceção: o popup "Escolha as colunas" (column chooser, .e-ccdlg) é renderizado
   DENTRO do edit dialog, então a regra de ocultar acima (.e-dialog:has(...) .e-footer-content,
   especificidade 0,3,0) acabava escondendo também o rodapé OK/Cancelar dele, deixando o
   popup cortado. Re-mostramos com especificidade maior (0,4,0: .e-ccdlg.e-dialog.e-popup)
   e limitamos a lista de colunas para não empurrar o rodapé para fora da tela. */
.e-ccdlg.e-dialog.e-popup .e-footer-content {
    display: flex !important;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
}
.e-ccdlg.e-dialog.e-popup .e-footer-content > .e-btn {
    display: inline-block !important;
}
.e-ccdlg .e-cc-contentdiv {
    max-height: 240px !important;
    height: auto !important;
}

/* ── Minha Agenda (AgendaDialog) ──────────────────────────────────────
   O SfDialog teleporta para o body e o Syncfusion calcula um max-height/height
   inline a partir da altura do elemento-alvo. No Home (SfDashboardLayout) o alvo
   mede ~574px, gerando max-height:402px que corta o calendário e força scroll
   interno. Como o chrome .e-dialog não recebe o atributo de CSS isolado, o
   override precisa ser global: deixamos o diálogo crescer com o conteúdo
   (schedule de altura fixa) limitado só pela viewport. */
.sg-agd-dlg.e-dialog,
.e-dlg-container .sg-agd-dlg.e-dialog {
    height: auto !important;
    max-height: 92vh !important;
}
.sg-agd-dlg .e-dlg-content {
    max-height: none !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: 200;
    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); }
/* Destrutivo: o vermelho do token, cheio — a tile é o que dá peso ao header,
   que antes tinha menos presença que o corpo. */
.sgdlg-confirm-icon--danger { background: var(--color-sf-danger, #d13438); }

.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; }

/* `.e-btn.` e não só a classe: o botão é <button class="e-btn sgdlg-btn-lock-confirm">,
   e as duas regras empatavam em especificidade (0,1,0). Como o fluent2 do
   Syncfusion carrega depois do app.css, o .e-btn vencia e devolvia o botão
   branco padrão — só que o !important do ícone continuava valendo, então
   sobrava ícone branco sobre fundo branco: o ícone "sumia" e o rótulo ficava
   escuro porque é nó de texto solto, fora do span colorido. */
.e-btn.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; }

/* O rótulo é nó de texto direto do <button>, não entra no seletor de span
   acima — sem isto ele herda o preto do .e-btn e fica ilegível no laranja. */
.e-btn.sgdlg-btn-lock-confirm,
.e-btn.sgdlg-btn-lock-confirm:hover,
.e-btn.sgdlg-btn-lock-confirm:focus,
.e-btn.sgdlg-btn-lock-confirm:active { color: #fff; }

/* ── Botão destrutivo do diálogo de exclusão ──
   Substitui o `SfButton CssClass="e-danger" IsPrimary="true"`, que combinava
   duas variantes do tema e saía num vinho apagado, sem contraste com o próprio
   rótulo — parecia desabilitado justamente no botão que não pode ser ambíguo.
   Aqui a cor é declarada: fundo cheio no token de perigo (#d13438 claro /
   #dc626d escuro) e texto branco. Mesmo caminho do .sgdlg-btn-lock-confirm.
   O `!important` no span é o de sempre: o reset global colore o ::before dos
   ícones Fluent e engoliria o branco. */
/* `.e-btn.` pelo mesmo motivo do lock-confirm: no SubGrid este botão é
   <button class="e-btn sgdlg-btn-danger-confirm"> e sem isso o fluent2 vence
   o empate de especificidade e devolve o botão branco — com o ícone branco
   do !important abaixo, invisível, num botão de EXCLUIR. */
.e-btn.sgdlg-btn-danger-confirm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; background: var(--color-sf-danger, #d13438); color: #fff;
    border: 1px solid var(--color-sf-danger, #d13438); border-radius: 4px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
}

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

.e-btn.sgdlg-btn-danger-confirm,
.e-btn.sgdlg-btn-danger-confirm:hover,
.e-btn.sgdlg-btn-danger-confirm:focus,
.e-btn.sgdlg-btn-danger-confirm:active { color: #fff; }

/* ── Nota de consequência (neutra) ──
   O diálogo de bloqueio usa faixa sólida colorida porque o aviso é de restrição.
   Aqui a mensagem TRANQUILIZA ("pode ser revertida"), então faixa vermelha seria
   contraditória: fica um bloco neutro, derivado por token, que recua atrás da
   pergunta em vez de competir com ela. Sem regra de dark mode — a mistura é
   contra o token de fundo, então o resultado é sólido e vira sozinho. */
.sgdlg-confirm-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    padding: 10px 12px; border-radius: 6px;
    background: color-mix(in srgb, var(--color-sf-content-text-color, #242424) 5%, var(--color-sf-content-bg-color, #fff));
    border: 1px solid color-mix(in srgb, var(--color-sf-border-light, #e0e0e0) 60%, var(--color-sf-content-bg-color, #fff));
    font-size: 0.78rem; line-height: 1.45;
    color: color-mix(in srgb, var(--color-sf-content-text-color, #242424) 68%, var(--color-sf-content-bg-color, #fff));
}

.sgdlg-confirm-note span[class*="icon-"] { flex-shrink: 0; }
.sgdlg-confirm-note span[class*="icon-"]::before { font-size: 15px; color: inherit !important; }

/* ── 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;
}

/* As classes .sgprc-picker-dlg / -header / -grid / -card do dialog antigo de
   Processamentos foram removidas: o picker virou painel lateral (.sgprc-panel)
   e nenhum markup do projeto as referenciava mais. */

/* 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;
    inset: 12px 0 12px auto !important;  /* atalho top/right/bottom/left */
}
/* Slide-right de entrada (2s): desliza de fora da direita até encostar. Escopado ao
   .e-dialog (o painel), nunca ao .e-dlg-container (que cobre o viewport). Saída via
   Web Animations API em sgSubformPanelClose (App.razor). Sem transform:none !important
   aqui — um !important em transform venceria a animação na cascata e travaria o slide. */
.e-dialog.sg-subform-panel {
    animation: sg-subform-panel-in 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
@keyframes sg-subform-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
/* Fix: o container wrapper (e-dlg-container) herda as regras acima via
   .sg-subform-panel, mas precisa cobrir o viewport INTEIRO para que o
   backdrop (e-dlg-overlay) cubra todo o fundo. O diálogo interno
   (.e-dialog.sg-subform-panel) mantém o posicionamento 70vw/right:0.
   CRÍTICO: o bloco acima também aplica `max-width:70vw` e
   `max-height:calc(100vh-24px)` no container; sem resetar esses limites, o
   `width/height:100%` ficava capado em 1344×1022 (70vw) e o scrim cobria só
   um retângulo deslocado ("overlay fora de contexto"). Usar 100vw/100vh +
   max-*:none ancorado no canto (top/left:0) resolve de forma robusta. */
.e-dlg-container.sg-subform-panel {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* O scrim modal do Syncfusion recebe z-index dinâmico altíssimo (ex.: 999999)
   que ultrapassa o 100002 fixo do painel e o cobre (desfoque por cima do
   diálogo). Fixa o overlay logo abaixo do painel.
   ATENÇÃO ao seletor: no DOM o overlay é IRMÃO POSTERIOR do diálogo (o diálogo
   é o irmão anterior), então `.e-dlg-overlay:has(+ .e-dialog.sg-subform-panel)`
   (irmão seguinte) NÃO casa. O overlay é filho direto do container do painel —
   alvejar por aí é robusto independente da ordem dos irmãos. */
.e-dlg-container.sg-subform-panel > .e-dlg-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100001 !important;
}
/* ── Editor de campo/sub/visão aberto de DENTRO do painel de Metadado ──
   O painel .sgmep-panel é position:fixed z-index:1200. O dialog de edição do
   SfGrid (DialogParams) abre no nível do body com z-index padrão do Syncfusion
   (< 1200) → cai ATRÁS do painel. Elevamos o container do dialog (e seu scrim)
   acima do painel. A CssClass pode cair no .e-dialog OU no .e-dlg-container
   dependendo da versão — cobrimos os dois casos. */
.e-dlg-container.sg-metadado-campo-dialog,
.e-dlg-container:has(> .sg-metadado-campo-dialog) {
    z-index: 100020 !important;
}
/* CRÍTICO: o diálogo em si tem que ficar ACIMA do próprio scrim, senão o scrim
   (que também subimos) embaça o formulário. Diálogo > overlay dentro do container. */
.e-dialog.sg-metadado-campo-dialog,
.e-dlg-container.sg-metadado-campo-dialog > .e-dialog,
.e-dlg-container:has(> .sg-metadado-campo-dialog) > .e-dialog {
    z-index: 100020 !important;
}
.e-dlg-container.sg-metadado-campo-dialog > .e-dlg-overlay,
.e-dlg-container:has(> .sg-metadado-campo-dialog) > .e-dlg-overlay {
    z-index: 100019 !important;
}

/* ── Designer de LAYOUT (98% × 98%) — chrome do diálogo ──
   Aberto de dentro do editor de metadado, que por sua vez pode estar dentro do
   painel .sgmep-panel (z-index 1200) OU do dialog de edição do grid (100020).
   Como o SfDialog é teleportado para o body, ele precisa subir acima dos dois.
   CSS global (e não .razor.css) exatamente por isso: é DOM do Syncfusion. */
.e-dlg-container.sgdes-layout-dlg,
.e-dlg-container:has(> .sgdes-layout-dlg),
.e-dialog.sgdes-layout-dlg,
.e-dlg-container.sgdes-layout-dlg > .e-dialog,
.e-dlg-container:has(> .sgdes-layout-dlg) > .e-dialog {
    z-index: 100040 !important;
}
.e-dlg-container.sgdes-layout-dlg > .e-dlg-overlay,
.e-dlg-container:has(> .sgdes-layout-dlg) > .e-dlg-overlay {
    z-index: 100039 !important;
}

.e-dialog.sgdes-layout-dlg {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
}
/* Cabeçalho em UMA linha: identificação + dica + X do Syncfusion.
   O global `.e-dialog .e-dlg-header { display:block; width:100% !important }`
   (bem acima neste arquivo) fazia o título ocupar a faixa inteira e empurrar o
   botão de fechar para uma SEGUNDA faixa — duas alturas de header num diálogo
   que só existe para dar espaço ao canvas. Aqui o header-content volta a ser
   uma flex row sem quebra e o título passa a ser o item elástico. */
.e-dialog.sgdes-layout-dlg .e-dlg-header-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 14px 10px 18px !important;
    border-bottom: 1px solid var(--color-sf-border-light, #e5e7eb);
}
.e-dialog.sgdes-layout-dlg .e-dlg-header {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    line-height: normal !important;
}
.e-dialog.sgdes-layout-dlg .e-dlg-header-content .e-dlg-closeicon-btn {
    position: static;
    flex-shrink: 0;
    margin: 0;
}

/* O global `.e-dlg-header * { font-size:12px !important; font-weight:300 !important }`
   achatava a identificação deste header. Exceção pontual — é !important contra
   !important, não dá para vencer por especificidade escopada. */
.e-dialog.sgdes-layout-dlg .e-dlg-header .sgdes-dlg-head-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}
.e-dialog.sgdes-layout-dlg .e-dlg-header .sgdes-dlg-head-sub,
.e-dialog.sgdes-layout-dlg .e-dlg-header .sgdes-dlg-head-hint {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
}
/* padding 0: o shell do designer desenha as próprias margens e rola por dentro */
.e-dialog.sgdes-layout-dlg .e-dlg-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* ── Drawer de edição de campo (substitui o dialog nativo do grid de Campos) ──
   Ancorado à direita, largura reduzida 30% (98% → ~68,6vw), slide-right 1,5s
   na entrada e na saída (a saída é controlada pela flag _campoDrawerClosing +
   Task.Delay(1500) no componente — o dialog nativo do Syncfusion não anima saída). */
.sgcampodrawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100019;
    background: rgba(0, 0, 0, 0.32);
    animation: sgcampodrawer-fade-in 0.3s ease both;
}
.sgcampodrawer-backdrop--closing {
    animation: sgcampodrawer-fade-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sgcampodrawer-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgcampodrawer-fade-out { from { opacity: 1; } to { opacity: 0; } }

.sgcampodrawer-panel {
    position: fixed;
    top: 2vh;
    right: 1.5vw;
    bottom: 2vh;
    z-index: 100020;
    width: 68.6vw;                       /* 98% * 0.7 → -30% da largura anterior */
    max-width: calc(100vw - 3vw);
    display: flex;
    flex-direction: column;
    background: var(--color-sf-content-bg-color, #ffffff);
    border-radius: 14px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    outline: none;
    overflow: hidden;
    animation: sgcampodrawer-slide-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}
.sgcampodrawer-panel--closing {
    animation: sgcampodrawer-slide-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sgcampodrawer-slide-in  { from { transform: translateX(105%); } to { transform: translateX(0); } }
@keyframes sgcampodrawer-slide-out { from { transform: translateX(0); } to { transform: translateX(105%); } }

.sgcampodrawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-sf-border-light, #e5e7eb);
    background: var(--color-sf-content-bg-color, #fff);
}
.sgcampodrawer-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-sf-content-text-color, #1e293b);
}
.sgcampodrawer-close {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sf-content-text-color-alt1, #64748b);
}
.sgcampodrawer-close:hover {
    background: color-mix(in srgb, var(--color-sf-border, #e2e8f0) 40%, transparent);
}
.sgcampodrawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Corpo dos drawers genéricos (Gráficos/Visões/Processamentos) — o de campo
   usa o FormularioCampoForm, que traz o próprio padding. */
.sgcampodrawer-form {
    padding: 16px;
}
.sgcampodrawer-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-sf-border-light, #e5e7eb);
    background: var(--color-sf-content-bg-color, #fff);
}

body.e-dark-mode .sgcampodrawer-panel,
body.e-dark-mode .sgcampodrawer-header,
body.e-dark-mode .sgcampodrawer-footer {
    background: var(--color-sf-content-bg-color, #1f1f1f);
}
body.e-dark-mode .sgcampodrawer-header,
body.e-dark-mode .sgcampodrawer-footer {
    border-color: var(--color-sf-border, #3a3a3a);
}
body.e-dark-mode .sgcampodrawer-title { color: var(--color-sf-content-text-color, #f1f5f9); }

.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;
    /* Flex column pra que o footer inline (margin-top:auto, ver .sgdlg-footer-actions-inline)
       pinne no rodapé do painel quando o form é curto — mesmo comportamento do sg-edit-dialog. */
    display: flex !important;
    flex-direction: column !important;
}

/* Campos combo + botão de lookup (sg-combo-link-wrap) dentro do painel.
   As colunas do sub-form são mais estreitas que no form principal, e o combo
   tem largura fixa (width:300px inline, ver SeglaFormField.cs ~333/515). Combo
   (300px) + botão (~22px) estouravam a coluna (~305px) e o botão de lookup
   quebrava de linha, aparecendo "solto" acima do combo. Vira flex e deixa o
   combo encolher pra o ícone ficar inline à direita (como no form externo). */
.sg-subform-panel .sg-combo-link-wrap {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}
.sg-subform-panel .sg-combo-link-wrap > .e-input-group,
.sg-subform-panel .sg-combo-link-wrap > .e-multicolumn-container,
.sg-subform-panel .sg-combo-link-wrap > .e-control {
    width: auto !important;            /* sobrescreve o width:300px inline do combo */
    min-width: 0 !important;
    flex: 1 1 auto;
}
.sg-subform-panel .sg-combo-link-wrap > .sg-combo-link-btn {
    flex: 0 0 auto;
}
.sg-subform-panel-body {
    padding: 10px 16px;
    padding-bottom: 72px;               /* deixa espaço para o footer sticky não cobrir conteúdo */
}

/* Quando o Form renderiza o próprio rodapé (RendersOwnFooter), o .content-wrapper
   é filho direto do .e-dlg-content (sem o wrapper .sg-subform-panel-body). Dá o
   mesmo respiro lateral aos campos; o rodapé fica fora dele (irmão) e por isso
   mantém largura total. */
.content-wrapper.sgform-has-footer {
    padding: 10px 16px;
    /* O footer é sticky e sobrepõe o conteúdo ao rolar — reserva a altura dele
       (56px) + folga pra a última linha não ficar escondida atrás dele. */
    padding-bottom: 64px;
}
/* Footer do sub-form sempre ancorado no rodapé do painel (não flutuando no meio
   quando o form é curto) e com altura fixa de 56px — mesmo comportamento do
   footer do form principal (.sg-edit-dialog: e-dlg-content em flex column +
   margin-top:auto no footer). O .e-dlg-content do painel já é flex column;
   o `> *` flex-shrink:0 + margin-top:auto empurram o footer pro fundo. */
.sg-subform-panel.e-dialog .e-dlg-content > * {
    flex-shrink: 0;
}
.sg-subform-panel-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: auto;                   /* pina no rodapé quando o form é curto */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    height: 56px;                       /* altura consistente (igual ao form principal) */
    box-sizing: border-box;
    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;
}

/* ============================================================
   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/SeglaLogo3D-trans.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 62px 62px !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: #0066FF;
    border-bottom-color: color-mix(in srgb, #0066FF 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: #0099FF;
    border-right-color: color-mix(in srgb, #0099FF 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;
}
/* (legado) .sgfat-contrato-dialog / .sgfat-contrato-form-wrap não são mais usados:
   o editor de contrato passou a usar o componente RecordEditDialog (sg-edit-dialog).
   Mantido por ora caso haja outra referência; pode ser removido numa limpeza. */
.sgfat-contrato-form-wrap {
    width: 100%;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   Faturamento (Tratamento + Entrega) — cores sinalizadoras das células
   do grid no DARK MODE.

   CAUSA: nos .razor.css desses componentes as regras dark foram escritas
   como `:global(.e-dark-mode) .sgfat-...`. Blazor CSS isolation NÃO suporta
   `:global()` (isso é sintaxe de CSS Modules/Svelte; o Blazor usa `::deep`),
   então o seletor sai literal no bundle e o navegador descarta a regra inteira
   como inválida — as cores light (regra base válida) ficam, mas as dark somem.

   Como `.e-dark-mode` é classe do <body> (ancestral), não dá pra ancorá-la a
   partir do CSS escopado; a forma válida é uma regra GLOBAL aqui. O prefixo
   `body.e-dark-mode` e por não ter atributo de escopo vale para Tratamento e
   Entrega ao mesmo tempo.

   `!important` é OBRIGATÓRIO: o reset global do dark mode
   (`body.e-dark-mode .e-control *:not([class*="icon-"]):not(.e-icons) { color:#adadad }`,
   linhas ~20-41) tem especificidade (0,4,1) e mira QUALQUER texto dentro de um
   `.e-control` — inclusive estas células. É o mesmo motivo do `!important` já
   documentado para os KPIs do SubGrid (ver comentário ~linha 608). */
body.e-dark-mode .sgfat-cell-kpi--liq  { color: #4ade80 !important; }
body.e-dark-mode .sgfat-cell-kpi--ok   { color: #4ade80 !important; }
body.e-dark-mode .sgfat-cell-kpi--warn { color: #fbbf24 !important; }

/* O delta tem spans filhos (.sgfat-delta-arrow/-val/-pct). O reset #adadad mira
   esses filhos DIRETAMENTE, e a cor direta do filho vence a cor herdada do pai
   mesmo que o pai seja !important — por isso é preciso colorir os filhos também. */
body.e-dark-mode .sgfat-delta--up,
body.e-dark-mode .sgfat-delta--up .sgfat-delta-arrow,
body.e-dark-mode .sgfat-delta--up .sgfat-delta-val,
body.e-dark-mode .sgfat-delta--up .sgfat-delta-pct {
    color: #4ade80 !important;
}
body.e-dark-mode .sgfat-delta--up {
    background: color-mix(in srgb, #4ade80 16%, transparent);
}
body.e-dark-mode .sgfat-delta--down,
body.e-dark-mode .sgfat-delta--down .sgfat-delta-arrow,
body.e-dark-mode .sgfat-delta--down .sgfat-delta-val,
body.e-dark-mode .sgfat-delta--down .sgfat-delta-pct {
    color: #ff8c5a !important;
}
body.e-dark-mode .sgfat-delta--down {
    background: color-mix(in srgb, #ff8c5a 16%, transparent);
}

body.e-dark-mode .sgfat-dias--ok {
    color: #4ade80 !important;
    background: color-mix(in srgb, #4ade80 16%, transparent);
}
body.e-dark-mode .sgfat-dias--warn {
    color: #fbbf24 !important;
    background: color-mix(in srgb, #fbbf24 16%, transparent);
}
body.e-dark-mode .sgfat-dias--alert {
    color: #ff8c5a !important;
    background: color-mix(in srgb, #ff8c5a 16%, transparent);
}

/* Pills de medição (coluna Tipo) no dark mode — !important pelo mesmo motivo
   do reset #adadad acima; cores clareadas para contraste no fundo escuro. */
body.e-dark-mode .sgfat-tipo-badge--med {
    color: #c4b5fd !important;
    background: color-mix(in srgb, #a78bfa 20%, transparent);
}
body.e-dark-mode .sgfat-tipo-badge--email {
    color: #93c5fd !important;
    background: color-mix(in srgb, #60a5fa 20%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   Agente de Faturamento (IA) — diálogo de chat. Prefixo: sgagf-
   ════════════════════════════════════════════════════════════════ */
.sgagf-head { display: flex; align-items: center; gap: 10px; }
.sgagf-head-icon { font-size: 22px; color: #8b5cf6; }
.sgagf-head-text { display: flex; flex-direction: column; }
.sgagf-head-title { font-size: 0.95rem; font-weight: 700; color: var(--color-sf-content-text-color); }
.sgagf-head-sub { font-size: 0.68rem; color: var(--color-sf-content-text-color-alt1); }
.sgagf-nova {
    margin-left: auto; margin-right: 28px; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.72rem; font-weight: 600;
    border: 1px solid color-mix(in srgb, #8b5cf6 40%, transparent);
    background: color-mix(in srgb, #8b5cf6 8%, transparent); color: #7c3aed;
}
.sgagf-nova:hover { background: color-mix(in srgb, #8b5cf6 16%, transparent); }
body.e-dark-mode .sgagf-nova { color: #c4b5fd; }

.sgagf-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sgagf-chat {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 12px 4px; display: flex; flex-direction: column; gap: 10px;
}
.sgagf-empty { margin: auto; text-align: center; color: var(--color-sf-content-text-color-alt1); max-width: 420px; }
.sgagf-empty span[class*="icon-"] { font-size: 30px; color: #8b5cf6; opacity: 0.8; }
.sgagf-empty ul { text-align: left; font-size: 0.8rem; margin: 8px 0; }
.sgagf-empty-note { font-size: 0.7rem; opacity: 0.8; }

.sgagf-msg { display: flex; }
.sgagf-msg--user { justify-content: flex-end; }
.sgagf-msg--assistant { justify-content: flex-start; }
.sgagf-msg-bubble {
    max-width: 82%; padding: 8px 12px; border-radius: 12px;
    font-size: 0.84rem; line-height: 1.5; white-space: normal;
}
.sgagf-msg--user .sgagf-msg-bubble {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff;
    border-bottom-right-radius: 4px;
}
.sgagf-msg--assistant .sgagf-msg-bubble {
    background: var(--color-sf-content-bg-color-alt1, #f3f4f6);
    color: var(--color-sf-content-text-color);
    border-bottom-left-radius: 4px;
}
.sgagf-msg-bubble code {
    background: rgba(139,92,246,0.12); padding: 1px 5px; border-radius: 4px;
    font-size: 0.78rem;
}
.sgagf-typing { opacity: 0.7; font-style: italic; }

.sgagf-proposta {
    border: 1px solid color-mix(in srgb, #8b5cf6 40%, transparent);
    background: color-mix(in srgb, #8b5cf6 6%, transparent);
    border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.sgagf-proposta-head { display: flex; align-items: center; gap: 6px; color: #7c3aed; }
.sgagf-proposta-justif { font-size: 0.8rem; color: var(--color-sf-content-text-color); margin: 0; }
.sgagf-proposta-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.sgagf-proposta-table th, .sgagf-proposta-table td {
    text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--color-sf-border-light, #e5e7eb);
}
.sgagf-proposta-table th { font-weight: 600; color: var(--color-sf-content-text-color-alt1); }
.sgagf-de { color: #ef4444; }
.sgagf-para { color: #16a34a; font-weight: 600; }
.sgagf-proposta-actions { display: flex; gap: 8px; }
.sgagf-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.2s;
}
.sgagf-btn:disabled { opacity: 0.5; cursor: default; }
.sgagf-btn--approve { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; }
.sgagf-btn--ghost { background: transparent; color: var(--color-sf-content-text-color-alt1); border: 1px solid var(--color-sf-border-light, #d1d5db); }

.sgagf-input { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--color-sf-border-light, #e5e7eb); }
.sgagf-textarea {
    flex: 1 1 auto; resize: none; border-radius: 8px; padding: 8px 10px;
    border: 1px solid var(--color-sf-border-light, #d1d5db);
    background: var(--color-sf-content-bg-color, #fff);
    color: var(--color-sf-content-text-color); font-size: 0.84rem; font-family: inherit;
}
.sgagf-send {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.sgagf-send:disabled { opacity: 0.5; cursor: default; }

body.e-dark-mode .sgagf-msg--assistant .sgagf-msg-bubble {
    background: rgba(255,255,255,0.06);
}
body.e-dark-mode .sgagf-proposta { background: color-mix(in srgb, #8b5cf6 12%, transparent); }

/* ════════════════════════════════════════════════════════════════
   Aprovações do Agente de Faturamento (admin). Prefixo: sgaap-
   ════════════════════════════════════════════════════════════════ */
.sgaap-wrap { padding: 20px 24px; max-width: 1100px; margin: 0 auto; }
.sgaap-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sgaap-header-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c3aed; font-size: 20px;
}
.sgaap-header-text { flex: 1; }
.sgaap-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-sf-content-text-color); }
.sgaap-sub { margin: 0; font-size: 0.78rem; color: var(--color-sf-content-text-color-alt1); }
.sgaap-refresh {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--color-sf-border-light, #d1d5db);
    background: transparent; color: var(--color-sf-content-text-color-alt1); cursor: pointer;
}
.sgaap-refresh:hover { background: var(--color-sf-content-bg-color-alt1); }

.sgaap-msg {
    margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; font-size: 0.82rem;
    background: color-mix(in srgb, #0ea5e9 10%, transparent); color: var(--color-sf-content-text-color);
    border: 1px solid color-mix(in srgb, #0ea5e9 30%, transparent);
}

.sgaap-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.sgaap-tab {
    padding: 6px 14px; border: none; background: transparent; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: var(--color-sf-content-text-color-alt1);
    border-bottom: 2px solid transparent;
}
.sgaap-tab--active { color: #7c3aed; border-bottom-color: #7c3aed; }
.sgaap-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
    padding: 0 5px; border-radius: 9px; font-size: 0.65rem; font-weight: 200;
    background: var(--color-sf-content-bg-color-alt1, #eef0f3); color: var(--color-sf-content-text-color-alt1);
}

.sgaap-empty { text-align: center; padding: 48px 0; color: var(--color-sf-content-text-color-alt1); }
.sgaap-empty span[class*="icon-"] { font-size: 34px; opacity: 0.7; }
.sgaap-spin { animation: sg-spin 1s linear infinite; display: inline-block; }
@keyframes sg-spin { to { transform: rotate(360deg); } }

.sgaap-card {
    border: 1px solid var(--color-sf-border-light, #e5e7eb); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px; background: var(--color-sf-content-bg-color, #fff);
}
.sgaap-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sgaap-card-id { font-weight: 700; color: var(--color-sf-content-text-color); }
.sgaap-card-meta { font-size: 0.74rem; color: var(--color-sf-content-text-color-alt1); }
.sgaap-status {
    font-size: 0.66rem; font-weight: 200; padding: 2px 9px; border-radius: 9px; text-transform: uppercase;
}
.sgaap-status--pendente { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.sgaap-status--aprovado, .sgaap-status--aplicado { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.sgaap-status--rejeitado { background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c; }
.sgaap-status--erro { background: color-mix(in srgb, #ef4444 18%, transparent); color: #b91c1c; }

.sgaap-prompt, .sgaap-justif, .sgaap-rejmotivo, .sgaap-decidido {
    font-size: 0.8rem; margin: 4px 0; color: var(--color-sf-content-text-color);
}
.sgaap-justif { color: var(--color-sf-content-text-color-alt1); }
.sgaap-decidido { font-size: 0.72rem; color: var(--color-sf-content-text-color-alt1); }

.sgaap-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 8px 0; }
.sgaap-table th, .sgaap-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--color-sf-border-light, #eef0f3); }
.sgaap-table th { font-weight: 600; color: var(--color-sf-content-text-color-alt1); }
.sgaap-de { color: #ef4444; }
.sgaap-para { color: #16a34a; font-weight: 600; }
.sgaap-item-ok { color: #16a34a; } .sgaap-item-err { color: #f59e0b; }

.sgaap-actions { display: flex; gap: 8px; margin-top: 8px; }
.sgaap-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 600; cursor: pointer; border: none; color: #fff;
    transition: filter 0.15s ease;
}
.sgaap-btn:hover { filter: brightness(1.05); }
.sgaap-btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.sgaap-btn--approve { background: linear-gradient(135deg, #15803d, #22c55e); }
.sgaap-btn--reject { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.sgaap-btn--ghost { background: transparent; color: var(--color-sf-content-text-color-alt1); border: 1px solid var(--color-sf-border-light, #d1d5db); }

.sgaap-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 11000;
    display: flex; align-items: center; justify-content: center;
}
.sgaap-modal {
    background: var(--color-sf-content-bg-color, #fff); border-radius: 12px; padding: 20px;
    width: 440px; max-width: 92vw; box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.sgaap-modal h3 { margin: 0 0 12px; font-size: 0.95rem; color: var(--color-sf-content-text-color); }
.sgaap-modal-input {
    width: 100%; resize: vertical; border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 0.84rem;
    border: 1px solid var(--color-sf-border-light, #d1d5db);
    background: var(--color-sf-content-bg-color, #fff); color: var(--color-sf-content-text-color);
}
.sgaap-modal-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }

body.e-dark-mode .sgaap-card { background: rgba(255,255,255,0.03); }
body.e-dark-mode .sgaap-status--pendente { color: #fbbf24; }
body.e-dark-mode .sgaap-status--aprovado, body.e-dark-mode .sgaap-status--aplicado { color: #4ade80; }
body.e-dark-mode .sgaap-status--rejeitado, body.e-dark-mode .sgaap-status--erro { color: #f87171; }
body.e-dark-mode .sgaap-de { color: #f87171; }
body.e-dark-mode .sgaap-para { color: #4ade80; }
body.e-dark-mode .sgaap-tab--active { color: #c4b5fd; border-bottom-color: #c4b5fd; }
.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(0, 102, 255,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 (círculos planos concêntricos) ──
   Vista de topo: anéis planos giram no plano (rotateZ), cada um com um arco
   colorido que varre em torno da logo. App plano → sem perspectiva 3D. */
.sg-app-loader-visual {
    position: relative; width: 160px; height: 160px;
    display: flex; align-items: center; justify-content: center;
}
.sg-app-loader-ring-outer {
    position: absolute; inset: 0; border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #0066FF;
    border-bottom-color: color-mix(in srgb, #0066FF 30%, transparent);
    animation: sg-loader-spin 1.6s linear infinite;
}
.sg-app-loader-ring-inner {
    position: absolute; inset: 16px; border-radius: 50%;
    border: 5px solid transparent;
    border-left-color: #0099FF;
    border-right-color: color-mix(in srgb, #0099FF 30%, transparent);
    animation: sg-loader-spin 1.9s linear infinite reverse;
}
.sg-app-loader-ring-core {
    position: absolute; inset: 32px; border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #00B2FF;
    border-left-color: color-mix(in srgb, #00B2FF 40%, transparent);
    animation: sg-loader-spin 2.4s linear infinite;
}
.sg-app-loader-vela {
    width: 104px; height: 104px; object-fit: contain;
    position: relative; z-index: 2;
    opacity: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 102, 255, .22));
    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); }
    to   { transform: rotateZ(360deg); }
}

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

/* 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, #0066FF 0%, #00B2FF 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.40);
}
.sg-app-loader-pct {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.68rem; font-weight: 700; color: #0066FF;
    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: #0066FF;
    background: rgba(0, 102, 255, 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: #0066FF; }
.sg-app-loader-step--active .sg-app-loader-step-ico::before { color: #0066FF !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: 1;
    filter: drop-shadow(0 3px 10px rgba(0, 178, 255, .28));
}
.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: #00B2FF;
    border-bottom-color: color-mix(in srgb, #00B2FF 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(0, 178, 255, 0.4));
}
.e-dark-mode .sg-app-loader-bar-track { background: #1e293b; }
.e-dark-mode .sg-app-loader-bar-fill { background: linear-gradient(90deg, #0066FF 0%, #00B2FF 100%); }
.e-dark-mode .sg-app-loader-pct { color: #00B2FF; }
.e-dark-mode .sg-app-loader-step { color: #334155; }
.e-dark-mode .sg-app-loader-step--active { color: #00B2FF; background: rgba(0, 178, 255, 0.06); }
.e-dark-mode .sg-app-loader-step--active .sg-app-loader-step-ico::before { color: #00B2FF !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;
}
/* A .sg-app-loader-vela é global em 104px (dimensionada p/ o splash de 160px).
   Neste container de 96px a logo estourava e os anéis "vazavam" por fora — escopa
   p/ ~65% do container para a logo nunca exceder o anel externo. */
.sgrid-loader-visual .sg-app-loader-vela {
    width: 62px;
    height: 62px;
}
/* Os insets dos anéis (.sg-app-loader-ring-inner/core) são absolutos (16/32px),
   dimensionados p/ o splash de 160px. Num container de 96px isso espalha demais
   os anéis ("arcos grandes fora da logo"). Escopa insets proporcionais para
   replicar a razão do splash (anéis em ~100/79/60% do container). */
.sgrid-loader-visual .sg-app-loader-ring-inner { inset: 10px; }
.sgrid-loader-visual .sg-app-loader-ring-core  { inset: 19px; }

.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, #0066FF 0%, #00B2FF 100%);
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.40);
}
.sg-export-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0066FF;
    letter-spacing: 0.04em;
}
.e-dark-mode .sg-export-pct { color: #00B2FF; }
.e-dark-mode .sg-export-bar-fill {
    background: linear-gradient(90deg, #0066FF 0%, #00B2FF 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/SeglaLogo3D-trans.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 62px 62px !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: #0066FF;
    border-bottom-color: color-mix(in srgb, #0066FF 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: #0099FF;
    border-right-color: color-mix(in srgb, #0099FF 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: #00B2FF;
    border-left-color: color-mix(in srgb, #00B2FF 40%, transparent);
    animation: sg-spin-3d-z 2.4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* O Menu do Sistema fica de fora: o SfTreeView monta a árvore a partir do
   LocalData, que já está em memória. Não há espera nenhuma para sinalizar —
   o spinner só piscava por cima dos itens do menu. Regra depois das de cima
   e com a mesma especificidade (0,2,0), então vence pela ordem. */
.sg-menu .e-spinner-pane,
.sg-menu .e-spinner-pane::before { display: none !important; }

/* 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). */
/* Achatados: app plano → giro no plano (rotateZ), sem tilt 3D.
   x = horário, y = anti-horário (anéis concêntricos contra-giram). */
@keyframes sg-spin-3d-x {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(360deg); }
}
@keyframes sg-spin-3d-y {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(-360deg); }
}
@keyframes sg-spin-3d-z {
    from { transform: translate(-50%, -50%) rotateZ(0deg); }
    to   { transform: translate(-50%, -50%) rotateZ(360deg); }
}

.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: #0066FF;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sgdev-query-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 102, 255, 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: 200;
    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: 22px;
    height: 22px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

/* ── Skeleton de carregamento dos cards (shimmer) ───────────────── */
.sg-skel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    height: 100%;
    min-height: 120px;
    box-sizing: border-box;
}
.sg-skel-row { display: flex; align-items: center; gap: 10px; }
.sg-skel-avatar { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.sg-skel-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sg-skel-line { height: 12px; border-radius: 6px; }
.sg-skel-block { flex: 1; min-height: 60px; border-radius: 8px; }
.sg-skel-sh {
    background: linear-gradient(90deg,
        rgba(120, 135, 155, 0.16) 25%,
        rgba(120, 135, 155, 0.34) 37%,
        rgba(120, 135, 155, 0.16) 63%);
    background-size: 400% 100%;
    animation: sg-skel-shimmer 1.35s ease infinite;
}
/* O app marca o tema escuro com body.e-dark-mode (App.razor) — data-theme e
   html.dark não são setados em lugar nenhum, então estas duas nunca valeram. */
body.e-dark-mode .sg-skel-sh,
:root[data-theme="dark"] .sg-skel-sh,
html.dark .sg-skel-sh {
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.10) 25%,
        rgba(148, 163, 184, 0.26) 37%,
        rgba(148, 163, 184, 0.10) 63%);
    background-size: 400% 100%;
}
@keyframes sg-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.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;
    }
}

/* Cabeçalho do diálogo de impressão de comissões (fora do escopo isolado) */
.sg-print-dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.sg-print-dlg-title { font-weight: 600; font-size: 0.95rem; color: #1e293b; }
.sg-print-dialog .sg-print-dlg-head .sg-com-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 6px;
    background: #0851a3;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}
.sg-print-dialog .sg-print-dlg-head .sg-com-print-btn:hover { background: #0a5fc0; }

/* ════════════════════════════════════════════════════════════════
   @media print — Relatório Simplificado de Comissões (sg-print-dialog)
   Regras condicionadas em body.printing-com (adicionada por sgComissoesPrint
   em segla-detail.js) pra não vazar pra outras impressões da app.
   ════════════════════════════════════════════════════════════════ */
@media print {
    body.printing-com > *:not(.e-dlg-container) { display: none !important; }
    body.printing-com .e-dlg-overlay { display: none !important; }
    body.printing-com .sg-print-dialog .e-dlg-header-content { display: none !important; }
    body.printing-com .sg-print-dlg-head { display: none !important; }

    body.printing-com .sg-print-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-com .sg-print-dialog .e-dlg-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* page breaks da seção de detalhamento */
    body.printing-com .sg-relc-dup,
    body.printing-com .sg-relc-det-vend { page-break-inside: avoid; }
    body.printing-com .sg-relc-tbl--det tr { page-break-inside: avoid; }

    /* preserva cores dos cabeçalhos/realces */
    body.printing-com .sg-relc-grp td,
    body.printing-com .sg-relc-total td,
    body.printing-com .sg-relc-det-vend,
    body.printing-com .sg-relc-dup-head {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ════════════════════════════════════════════════════════════════
   @media print — Relatório de Conferência de Pesagens (sgfat-conferencia-dialog)
   Funciona de forma idêntica ao bloco printing-fat mas isola o dialog
   de conferência (sgFatConferPrint adiciona body.printing-fat-conf).
   ════════════════════════════════════════════════════════════════ */
@media print {
    body.printing-fat-conf > *:not(.e-dlg-container) {
        display: none !important;
    }
    body.printing-fat-conf .e-dlg-overlay {
        display: none !important;
    }
    body.printing-fat-conf .sgfat-conferencia-dialog .e-dlg-header-content {
        display: none !important;
    }
    body.printing-fat-conf .sgfat-conferencia-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-conf .sgfat-conferencia-dialog .e-dlg-content {
        overflow: visible !important;
        max-height: none !important; height: auto !important;
    }
    body.printing-fat-conf .sgfat-conferencia-dialog .sgfat-conf-report {
        background: #fff !important; color: #1e293b !important;
        overflow: visible !important;
    }
    body.printing-fat-conf .sgfat-conf-table { page-break-inside: auto; }
    body.printing-fat-conf .sgfat-conf-row { page-break-inside: avoid; }
    body.printing-fat-conf .sgfat-conf-th,
    body.printing-fat-conf .sgfat-conf-total-row .sgfat-conf-td {
        -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(0, 102, 255,0.15) !important;
    border-color: rgba(0, 102, 255,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.78rem; 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: 200; }
.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: 200; 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: 200; 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: 200; 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; }

/* ── Designer de layout (sgdes-layout-dlg) — dark mode ──
   O corpo do designer usa color-mix sobre --color-sf-* e vira sozinho; só a
   cromagem do diálogo (que é DOM do Syncfusion) precisa de regra explícita. */
body.e-dark-mode .e-dialog.sgdes-layout-dlg .e-dlg-header-content {
    border-bottom-color: rgba(255,255,255,.08);
}
body.e-dark-mode .sgdes-canvas::-webkit-scrollbar-thumb,
body.e-dark-mode .sgdes-insp-body::-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: 200;
    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: 200;
    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: 200;
    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;
}

/* ============================================================
   sgwa-nova-info-async — aviso "enfileirado como Pendente"
   GLOBAL porque os diálogos de Nova mensagem / Enviar template
   (SfDialog) são teleportados pro body, fora do escopo do .razor.css.
   ============================================================ */
.sgwa-nova-info-async {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 9px 12px !important;
    background: color-mix(in srgb, var(--color-sf-primary) 8%, var(--color-sf-content-bg-color)) !important;
    border: 1px solid color-mix(in srgb, var(--color-sf-primary) 25%, transparent) !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    color: var(--color-sf-content-text-color) !important;
    line-height: 1.45 !important;
}
.sgwa-nova-info-async [class*="icon-"],
.sgwa-nova-info-async [class*="icon-"]::before { color: var(--color-sf-primary) !important; }
.sgwa-nova-info-async strong { color: var(--color-sf-primary) !important; font-weight: 600 !important; }

/* ============================================================
   sg-subform-drawer — Side Drawer do Sub-formulário
   Dialog ancorado na borda direita com slide-in animation.
   CssClass aplicada via SubFormDrawerParams em Formularios.razor.
   Regras GLOBAIS porque .e-dialog é teleportado pro body pelo
   Syncfusion — fora do escopo do CSS isolation do componente.
   Prefixos: sg-subform-drawer (dialog wrapper) + sgmsub- (conteúdo)
   ============================================================ */

/* ── Keyframes de animação ── */
@keyframes sgmsub-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes sgmsub-slide-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* ── Wrapper do dialog — ancorado à direita, altura total ── */
.e-dialog.sg-subform-drawer {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;
    width: 650px !important;
    max-width: calc(100vw - 32px) !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: -6px 0 32px rgba(0, 0, 0, 0.16), -2px 0 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: sgmsub-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    overflow: hidden !important;
    border: 1px solid var(--color-sf-border-light, #e5e7eb) !important;
    z-index: 100020 !important;   /* acima do painel de Metadado (1200) e do form atrás */
}
/* Container do dialog (posiciona/empilha) — z-index explícito, senão o Syncfusion
   usa um valor dinâmico que pode cair ATRÁS do formulário/painel. */
.e-dlg-container.sg-subform-drawer,
.e-dlg-container:has(> .sg-subform-drawer) {
    z-index: 100020 !important;
}

/* ── Overlay escurecido apenas à esquerda do drawer, logo abaixo do dialog ── */
.e-dialog.sg-subform-drawer ~ .e-dlg-overlay,
.e-dlg-container:has(> .sg-subform-drawer) > .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.22) !important;
    z-index: 100019 !important;
}

/* ── Header do dialog: área fixa no topo ── */
.e-dialog.sg-subform-drawer > .e-dlg-header-content {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--color-sf-border-light, #e5e7eb) !important;
    background: var(--color-sf-content-bg-color, #fff) !important;
    position: relative !important;
}

/* Botão X do Syncfusion — posiciona no canto direito do header */
.e-dialog.sg-subform-drawer .e-btn.e-dlg-closeicon-btn {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 10 !important;
}

/* ── Área de conteúdo: flex grow + scroll próprio ── */
.e-dialog.sg-subform-drawer > .e-dlg-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 24px 8px !important;
    background: var(--color-sf-content-bg-color, #fff) !important;
}

/* Scrollbar fina no conteúdo do drawer */
.e-dialog.sg-subform-drawer > .e-dlg-content::-webkit-scrollbar { width: 5px; }
.e-dialog.sg-subform-drawer > .e-dlg-content::-webkit-scrollbar-track { background: transparent; }
.e-dialog.sg-subform-drawer > .e-dlg-content::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 3px;
}

/* ── Footer fixo: botões Salvar / Cancelar ── */
.e-dialog.sg-subform-drawer > .e-footer-content {
    flex: 0 0 auto !important;
    border-top: 1px solid var(--color-sf-border-light, #e5e7eb) !important;
    padding: 12px 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: var(--color-sf-content-bg-color-alt1, #fafafa) !important;
}

/* Botão Salvar — primário Fluent */
.e-dialog.sg-subform-drawer > .e-footer-content .e-primary {
    background: var(--color-sf-primary, #0078d4) !important;
    border-color: var(--color-sf-primary, #0078d4) !important;
    color: #fff !important;
    font-weight: 600 !important;
    min-width: 90px !important;
    border-radius: 6px !important;
}
.e-dialog.sg-subform-drawer > .e-footer-content .e-primary:hover {
    background: color-mix(in srgb, var(--color-sf-primary, #0078d4) 88%, #000) !important;
}

/* Botão Cancelar — neutro outlined */
.e-dialog.sg-subform-drawer > .e-footer-content .e-btn:not(.e-primary) {
    background: transparent !important;
    border: 1px solid var(--color-sf-border-light, #d1d5db) !important;
    color: var(--color-sf-content-text-color, #374151) !important;
    border-radius: 6px !important;
    min-width: 80px !important;
}
.e-dialog.sg-subform-drawer > .e-footer-content .e-btn:not(.e-primary):hover {
    background: var(--color-sf-content-bg-color-alt1, #f3f4f6) !important;
}

/* ── Telas estreitas: drawer ocupa largura total ── */
@media (max-width: 639px) {
    .e-dialog.sg-subform-drawer {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
}

/* ── Dark mode ── */
body.e-dark-mode .e-dialog.sg-subform-drawer {
    border-left-color: var(--color-sf-border-light) !important;
    box-shadow: -6px 0 32px rgba(0, 0, 0, 0.4), -2px 0 8px rgba(0, 0, 0, 0.2) !important;
}
body.e-dark-mode .e-dialog.sg-subform-drawer > .e-dlg-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
}

/* ── Header do conteúdo do drawer (sgmsub-drawer-header) ── */
.sgmsub-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 16px 20px;
    min-height: 68px;
}

.sgmsub-drawer-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-sf-primary, #0078d4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
}

.sgmsub-drawer-header-icon span::before {
    color: #fff !important;
}

.sgmsub-drawer-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sgmsub-drawer-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgmsub-drawer-subtitle {
    font-size: 0.7rem;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
    opacity: 0.8;
}

.sgmsub-mode-badge {
    font-size: 0.65rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.sgmsub-mode-badge--new {
    background: color-mix(in srgb, #107c10 15%, transparent);
    color: #107c10;
    border: 1px solid color-mix(in srgb, #107c10 30%, transparent);
}

.sgmsub-mode-badge--edit {
    background: color-mix(in srgb, var(--color-sf-primary, #0078d4) 12%, transparent);
    color: var(--color-sf-primary, #0078d4);
    border: 1px solid color-mix(in srgb, var(--color-sf-primary, #0078d4) 25%, transparent);
}

body.e-dark-mode .sgmsub-mode-badge--new {
    background: color-mix(in srgb, #1a9e1a 15%, transparent);
    color: #1a9e1a;
    border-color: color-mix(in srgb, #1a9e1a 30%, transparent);
}

/* ── Formulário dentro do drawer (sgmsub-form) ── */
.e-dialog.sg-subform-drawer .sgmsub-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

/* Fieldsets das seções */
.e-dialog.sg-subform-drawer .sgmsub-section {
    border: 1px solid var(--color-sf-border-light, #e5e7eb);
    border-radius: 10px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Legend vira uma barra horizontal de header da seção */
.e-dialog.sg-subform-drawer .sgmsub-section legend {
    float: none;
    display: block;
    width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-sf-primary, #0078d4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    margin: 0;
    background: color-mix(in srgb, var(--color-sf-primary, #0078d4) 6%, var(--color-sf-content-bg-color-alt1, #f9fafb));
    border-bottom: 1px solid var(--color-sf-border-light, #e5e7eb);
    border-radius: 9px 9px 0 0;
}

/* Corpo interno do fieldset */
.e-dialog.sg-subform-drawer .sgmsub-section > :not(legend) {
    padding: 14px 16px;
}

/* Grids de campos */
.e-dialog.sg-subform-drawer .sgmsub-row {
    display: grid;
    gap: 14px 16px;
}
.e-dialog.sg-subform-drawer .sgmsub-row-2 {
    grid-template-columns: 1fr 1fr;
}
.e-dialog.sg-subform-drawer .sgmsub-row-3 {
    grid-template-columns: 5fr 3fr 2fr;
}
.e-dialog.sg-subform-drawer .sgmsub-row-2 + .sgmsub-row-2 {
    margin-top: 0;
}

/* Segunda linha dentro do fieldset — gap extra do fieldset body */
.e-dialog.sg-subform-drawer .sgmsub-section > div + div {
    padding-top: 0;
    margin-top: 14px;
}

/* Checkboxes em grid 3 colunas (comportamento) */
.e-dialog.sg-subform-drawer .sgmsub-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 14px;
    padding: 14px 16px;
}

/* Linha de visibilidade (campo / tipo / valor / ativo) */
.e-dialog.sg-subform-drawer .sgmsub-vis-row {
    display: grid;
    grid-template-columns: 4fr 2fr 4fr auto;
    gap: 12px 14px;
    align-items: end;
    padding: 0 16px 14px;
}
.e-dialog.sg-subform-drawer .sgmsub-vis-row .e-checkbox-wrapper {
    padding-bottom: 8px;
}

/* Labels de direção (pai/filho) dentro da seção visibilidade */
.e-dialog.sg-subform-drawer .sgmsub-vis-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #374151);
    padding: 10px 16px 6px;
}
.e-dialog.sg-subform-drawer .sgmsub-vis-label span::before {
    color: var(--color-sf-content-text-color-alt1) !important;
}

/* Divisor entre pai/filho */
.e-dialog.sg-subform-drawer .sgmsub-vis-divider {
    border: 0;
    border-top: 1px dashed var(--color-sf-border-light, #e5e7eb);
    margin: 0 16px 10px;
}

/* Hints de ajuda */
.e-dialog.sg-subform-drawer .sgmsub-hint {
    font-size: 0.68rem;
    color: var(--color-sf-content-text-color-alt1, #6b7280);
    margin-top: 3px;
    line-height: 1.35;
}

/* Mensagem inline de feedback do formulário (SfMessage abaixo da barra de
   tarefas) — substitui os toasts flutuantes. Pequeno respiro até os campos. */
/* Notificação de gravação/atualização: fixa no topo do container de scroll do form
   (logo abaixo da barra de tarefas), sempre visível mesmo com o form rolado para baixo.
   Espelha o padrão do footer sticky (sg-subform-panel-footer, sticky bottom:0). */
.sgform-inline-msg {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 12px;
    /* fundo opaco garante legibilidade ao sobrepor o conteúdo que rola por baixo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Utilitário global */
.regular { font-size: 12px; }

/* ===== Processamento Picker — painel lateral (global; movido do Grid.razor.css: Blazor CSS isolation não suporta :global) ===== */
/* ── Processamento Picker — Painel lateral flutuante ──────── */

/* Backdrop escurecido com fade */
.sgprc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.32);
    animation: sgprc-backdrop-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

.sgprc-backdrop--closing {
    animation: sgprc-backdrop-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sgprc-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sgprc-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Painel lateral */
.sgprc-panel {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1100;
    width: min(520px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--color-sf-content-bg-color, #ffffff);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    outline: none;
    overflow: hidden;
    animation: sgprc-panel-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

.sgprc-panel--closing {
    animation: sgprc-panel-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sgprc-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes sgprc-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* Header do painel */
.sgprc-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--color-sf-border-light, #e0e0e0);
    background: var(--color-sf-content-bg-color-alt1, #f5f5f5);
    border-radius: 12px 0 0 0;
}

.sgprc-panel-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #0f172a);
}

.sgprc-panel-header-icon {
    font-size: 20px;
    color: var(--color-sf-primary, #0f6cbd);
}

.sgprc-panel-header-icon::before {
    color: var(--color-sf-primary, #0f6cbd);
}

.sgprc-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-sf-content-text-color-alt1, #605e5c);
    transition: background 0.15s, color 0.15s;
}

.sgprc-panel-close:hover {
    /* tom suave — primary-bg saía azul forte e escondia o ✕ */
    background: color-mix(in srgb, var(--color-sf-primary, #0f6cbd) 12%, transparent);
    color: var(--color-sf-primary, #0f6cbd);
}

.sgprc-panel-close .e-icons {
    font-size: 14px;
}

/* Body com scroll */
.sgprc-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* A LISTA do picker de Processamentos (.sgprc-list / .sgprc-item*) mora em
   Components/Pages/Forms/Grid.razor.css — é markup exclusivo do Grid, então
   CSS isolation dá conta. Aqui ficam só as classes do SHELL do painel, que
   SidePanel.razor também usa (isolation não compartilha entre componentes). */

/* ===== Toolbar do grid: ícones na cor primária (padrão "Processar") ===== */
/* Mistura e-icons (Syncfusion) + icon-ic_fluent_* dentro do SfMenu — todos ficam
   primários. Exceção: "Última query", que mantém o status (sg-diag-icon--ok/--error). */
.sg-grid-toolbar-menu .e-menu-item .e-menu-icon:not(.sg-diag-icon--ok):not(.sg-diag-icon--error),
.sg-grid-toolbar-menu .e-menu-item .e-menu-icon:not(.sg-diag-icon--ok):not(.sg-diag-icon--error)::before {
    color: var(--color-sf-icon-color, #0f6cbd) !important;
}

/* Footer do painel */
.sgprc-panel-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--color-sf-border-light, #e0e0e0);
    background: var(--color-sf-content-bg-color-alt1, #f5f5f5);
    border-radius: 0 0 0 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   ProcessFlow — regras de tema (dark / light) que precisam do seletor body
   Prefixo: pf-   (CSS scoped isolado em ProcessFlow.razor.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* Light mode: fundo pontilhado mais sutil */
body:not(.e-dark-mode) .pf-scroll-wrap {
    --pf-dot-color: rgba(148, 163, 184, 0.28);
}

/* Dark mode: pontilhado mais visível sobre fundo dark */
body.e-dark-mode .pf-scroll-wrap {
    --pf-dot-color: rgba(51, 65, 85, 0.85);
}

/* Light mode: card com borda sutil padrão */
body:not(.e-dark-mode) .pf-card {
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
body:not(.e-dark-mode) .pf-card:not(.pf-dragging):hover {
    border-color: var(--color-sf-primary, #0078d4);
    box-shadow: 0 0 0 1px rgba(0, 120, 212, .18), 0 3px 12px rgba(0, 0, 0, .12);
}
body:not(.e-dark-mode) .pf-card--root {
    border-color: var(--color-sf-primary, #0078d4);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, .22), 0 3px 12px rgba(0, 0, 0, .12);
}

/* Light mode: header mais suave (fundo alt1 com toque da cor do sistema) */
body:not(.e-dark-mode) .pf-card-header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-sys-color, #0078d4) 16%, var(--color-sf-content-bg-color-alt1)) 0%,
        var(--color-sf-content-bg-color-alt1) 100%);
    border-bottom-color: var(--color-sf-border-light);
}
body:not(.e-dark-mode) .pf-card--root .pf-card-header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-sys-color, #0078d4) 82%, #0c4a6e) 0%,
        color-mix(in srgb, var(--pf-sys-color, #0078d4) 55%, #0c4a6e) 100%);
}

/* Light mode: texto do header readjustado (fundo claro = texto escuro) */
body:not(.e-dark-mode) .pf-card-header .pf-card-title {
    color: var(--color-sf-content-text-color);
}
body:not(.e-dark-mode) .pf-card-header .pf-card-pk {
    color: var(--color-sf-content-text-color-alt1);
    font-family: 'Cascadia Code', 'Consolas', monospace;
}
body:not(.e-dark-mode) .pf-card-header .pf-card-badge {
    background: rgba(0, 0, 0, .10);
    color: rgba(30, 30, 30, .80);
    border-color: rgba(0, 0, 0, .08);
}
/* Raiz no light: badge sobre fundo escuro — mantém branco */
body:not(.e-dark-mode) .pf-card--root .pf-card-header .pf-card-title { color: #fff; }
body:not(.e-dark-mode) .pf-card--root .pf-card-header .pf-card-pk   { color: rgba(255,255,255,.75); }
body:not(.e-dark-mode) .pf-card--root .pf-card-header .pf-card-badge {
    background: rgba(255,255,255,.20);
    color: #fff;
    border-color: rgba(255,255,255,.15);
}

/* Dark mode: card com borda mais pronunciada */
body.e-dark-mode .pf-card {
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* ── Modal de reconexão do Blazor (deploy/restart) ──────────────────────
   Aparece quando o circuito SignalR cai. O blazor-reconnect-reload.js
   recarrega sozinho ao confirmar que o servidor voltou. Overlay no app.css
   global (regra do projeto: fixed/overlay não vai em .razor.css). */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.sg-reconnect-card {
    background: var(--bs-white, #fff);
    color: #0f172a;
    border-radius: 14px;
    padding: 28px 34px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
    max-width: 360px;
}

.sg-reconnect-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid rgba(102, 126, 234, .25);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: sg-reconnect-spin .8s linear infinite;
}

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

.sg-reconnect-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.sg-reconnect-text {
    font-size: .85rem;
    color: #64748b;
}

body.e-dark-mode .sg-reconnect-card {
    background: #1e293b;
    color: #e2e8f0;
}

body.e-dark-mode .sg-reconnect-text {
    color: #94a3b8;
}

/* ════════════════════════════════════════════════════════════════════════════
   MetadataEditorPanel — painel flutuante com o Editor de Metadado (SYS_FORMULARIO)
   renderizado DIRETO (FormularioMetadataEditor — sem iframe). Só para DEV (botão
   "Metadado" nos toolbars de grid/formulário). Prefixo: sgmep- (Metadata Editor
   Panel). CSS fica global (não em .razor.css) — overlays fixed/backdrop deste
   projeto sempre vivem em app.css.
   ════════════════════════════════════════════════════════════════════════════ */

.sgmep-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0, 0, 0, 0.32);
    animation: sgmep-backdrop-in 0.3s ease both;
}

.sgmep-backdrop--closing {
    animation: sgmep-backdrop-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sgmep-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sgmep-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Painel flutuante — ~72% da largura, descolado de todos os lados (não encosta
   mais na borda direita), 4 cantos arredondados + sombra elegante. Animação
   "float-right" de 2s na entrada (mesma duração, só que agora "pousa" a
   1.5vw da borda em vez de 0). */
.sgmep-panel {
    position: fixed;
    top: 2vh;
    right: 1.5vw;
    bottom: 2vh;
    z-index: 1200;
    width: 72vw;
    min-width: 720px;
    max-width: calc(100vw - 3vw);
    display: flex;
    flex-direction: column;
    background: var(--color-sf-content-bg-color, #ffffff);
    border-radius: 14px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    outline: none;
    overflow: hidden;
    animation: sgmep-panel-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

.sgmep-panel--closing {
    animation: sgmep-panel-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sgmep-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes sgmep-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@media (max-width: 900px) {
    .sgmep-panel {
        top: 1vh;
        right: 2vw;
        bottom: 1vh;
        width: 96vw;
        min-width: 0;
        max-width: 96vw;
        border-radius: 12px;
    }
}

/* Header do painel */
.sgmep-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    height: 56px;
    border-bottom: 1px solid var(--color-sf-border-light, #e0e0e0);
    background: var(--color-sf-content-bg-color-alt1, #f5f5f5);
}

.sgmep-panel-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sgmep-panel-header-icon {
    font-size: 20px;
    color: var(--color-sf-primary, #0f6cbd);
    flex-shrink: 0;
}

.sgmep-panel-header-icon::before {
    color: var(--color-sf-primary, #0f6cbd);
}

.sgmep-panel-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sgmep-panel-header-title-main {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sf-content-text-color-alt1, #605e5c);
}

.sgmep-panel-header-title-sub {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ação primária do cabeçalho: abre o Designer de layout. margin-left:auto
   empurra ela E o X para a direita (o header é space-between com 3 filhos);
   a separação do fechar é feita só por espaço em branco — nada de moldura
   extra competindo com o X. */
.sgmep-panel-layout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 30px;
    margin-left: auto;
    margin-right: 12px;
    padding: 0 11px;
    border: 1px solid var(--color-sf-border-light, #e0e0e0);
    border-radius: 6px;
    background: var(--color-sf-content-bg-color, #fff);
    color: var(--color-sf-content-text-color, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Só o PRIMEIRO botão de ação empurra para a direita. Com dois irmãos usando
   `margin-left:auto`, cada um reivindica o espaço livre e ele acaba dividido
   entre os dois — o Layout ficava boiando no meio da barra em vez de colado
   no Colunas. */
.sgmep-panel-layout + .sgmep-panel-layout { margin-left: 0; }

.sgmep-panel-layout:hover {
    border-color: var(--color-sf-primary, #0f6cbd);
    color: var(--color-sf-primary, #0f6cbd);
}

.sgmep-panel-layout span,
.sgmep-panel-layout span::before {
    font-size: 16px;
    color: inherit !important;
}

.sgmep-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-sf-content-text-color-alt1, #605e5c);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sgmep-panel-close:hover {
    background: color-mix(in srgb, var(--color-sf-primary, #0f6cbd) 12%, transparent);
    color: var(--color-sf-primary, #0f6cbd);
}

.sgmep-panel-close .e-icons {
    font-size: 14px;
}

/* Corpo — FormularioMetadataEditor renderizado direto (sem iframe) */
.sgmep-panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px 20px;
}

/* ════════════════════════════════════════════════════════════════════════════
   HelpSidePanel — painel flutuante à direita (50vw) com a documentação do
   formulário (/Help/{COD_FORMULARIO}) embutida via iframe, lado a lado com a
   tela de trabalho, em vez de abrir aba nova. Disponível para todos os
   usuários (não é dev-only). Prefixo: sghelp- (Help Side Panel). CSS fica
   global (não em .razor.css) — overlays fixed/backdrop deste projeto sempre
   vivem em app.css. Animação ágil (~450ms) — mais rápida que o sgmep-.
   ════════════════════════════════════════════════════════════════════════════ */

.sghelp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0, 0, 0, 0.32);
    animation: sghelp-backdrop-in 0.2s ease both;
}

.sghelp-backdrop--closing {
    animation: sghelp-backdrop-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sghelp-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sghelp-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Painel flutuante — 50% da largura, descolado de todos os lados, 4 cantos
   arredondados + sombra elegante. Animação "float-right" ágil (~450ms). */
.sghelp-panel {
    position: fixed;
    top: 2vh;
    right: 1.5vw;
    bottom: 2vh;
    z-index: 1200;
    width: 62.5vw;
    min-width: 700px;
    max-width: calc(100vw - 3vw);
    display: flex;
    flex-direction: column;
    background: var(--color-sf-content-bg-color, #ffffff);
    border-radius: 14px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    outline: none;
    overflow: hidden;
    animation: sghelp-panel-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

.sghelp-panel--closing {
    animation: sghelp-panel-out 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sghelp-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes sghelp-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@media (max-width: 900px) {
    .sghelp-panel {
        top: 1vh;
        right: 2vw;
        bottom: 1vh;
        width: 96vw;
        min-width: 0;
        max-width: 96vw;
        border-radius: 12px;
    }
}

/* Header do painel */
.sghelp-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    height: 56px;
    border-bottom: 1px solid var(--color-sf-border-light, #e0e0e0);
    background: var(--color-sf-content-bg-color-alt1, #f5f5f5);
}

.sghelp-panel-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sghelp-panel-header-icon {
    font-size: 20px;
    color: var(--color-sf-primary, #0f6cbd);
    flex-shrink: 0;
}

.sghelp-panel-header-icon::before {
    color: var(--color-sf-primary, #0f6cbd);
}

.sghelp-panel-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sghelp-panel-header-title-main {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sf-content-text-color-alt1, #605e5c);
}

.sghelp-panel-header-title-sub {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-sf-content-text-color, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sghelp-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-sf-content-text-color-alt1, #605e5c);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sghelp-panel-close:hover {
    background: color-mix(in srgb, var(--color-sf-primary, #0f6cbd) 12%, transparent);
    color: var(--color-sf-primary, #0f6cbd);
}

.sghelp-panel-close .e-icons {
    font-size: 14px;
}

/* Corpo — iframe com o Help standalone (@page "/Help/{COD_FORMULARIO}") */
.sghelp-panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sghelp-iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   Botão de ação inline em grid — .sg-grid-act-btn (PADRÃO GLOBAL, aprovado)
   Aprovado pelo usuário em EstabUsuariosTab.razor (aba "Usuários" do
   Estabelecimento — "ficaram perfeitos em todo sentido", 05/07/2026) como o
   modelo definitivo para TODA ação de linha (por linha) em SfGrid daqui em
   diante. Generalizado a partir do protótipo local `.sgeut-act-*` daquele
   componente (Components/Pages/Admin/Tabs/EstabUsuariosTab.razor.css) —
   aquele arquivo NÃO foi alterado (zero risco), este bloco é a versão
   reutilizável global.

   Uso:
     <div class="sg-grid-actions">
       <button type="button" class="sg-grid-act-btn" title="Editar"
               @onclick="() => Editar(item)">
         <span class="icon-ic_fluent_edit_24_regular"></span>
         <span class="sg-grid-act-lbl">Editar</span>
       </button>
       <button type="button" class="sg-grid-act-btn" title="Aprovar"
               @onclick="() => Aprovar(item)">
         <span class="icon-ic_fluent_checkmark_24_regular sg-grid-act-icon--ok"></span>
         <span class="sg-grid-act-lbl sg-grid-act-lbl--ok">Aprovar</span>
       </button>
       <button type="button" class="sg-grid-act-btn" title="Excluir"
               @onclick="() => Excluir(item)">
         <span class="icon-ic_fluent_delete_24_regular sg-grid-act-icon--danger"></span>
         <span class="sg-grid-act-lbl sg-grid-act-lbl--danger">Excluir</span>
       </button>
     </div>

   Semântica de cor — aplicada SÓ no hover, a base é sempre neutra/transparente:
     (sem modificador) → neutro/índigo → editar, ver, abrir, processar
     --ok              → verde         → aprovar, ativar, confirmar, faturar
     --danger          → vermelho      → excluir, rejeitar, desativar, cancelar
   O modificador vai no <span> do ÍCONE (sg-grid-act-icon--ok/--danger) e no
   <span> do RÓTULO (sg-grid-act-lbl--ok/--danger); o :has() no botão detecta
   qual variante está presente e pinta o hover de acordo.

   CSS isolation (.razor.css) não compartilha classes entre componentes — por
   isso este padrão fica aqui, global, e não em nenhum *.razor.css específico.
   ════════════════════════════════════════════════════════════════════════════ */

.sg-grid-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.sg-grid-act-btn {
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-sf-content-text-color-alt1, #64748b);
    transition: background .15s, border-color .15s, color .15s;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.sg-grid-act-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: #4f46e5;
}

.sg-grid-act-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.sg-grid-act-btn:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-sf-content-text-color-alt1, #64748b);
}

.sg-grid-act-btn span[class*="icon-"] { font-size: 16px; line-height: 1; }
.sg-grid-act-btn span[class*="icon-"]::before { color: inherit !important; }

.sg-grid-act-lbl { line-height: 1; }
.sg-grid-act-lbl--ok { color: #047857; }
.sg-grid-act-lbl--danger { color: #dc2626; }

.sg-grid-act-icon--ok { color: #047857; }
.sg-grid-act-icon--ok::before { color: #047857 !important; }
.sg-grid-act-icon--danger { color: #dc2626; }
.sg-grid-act-icon--danger::before { color: #dc2626 !important; }

.sg-grid-act-btn:has(.sg-grid-act-icon--danger):hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

.sg-grid-act-btn:has(.sg-grid-act-icon--ok):hover {
    background: rgba(4, 120, 87, 0.1);
    border-color: rgba(4, 120, 87, 0.3);
    color: #047857;
}

/* Ribbon de edição do form: aba única → esconde o header "Ações" (redundante). */
.sgdlg-edit-ribbon .e-ribbon-tab .e-tab-header,
.sgdlg-edit-ribbon .e-tab-header { display: none !important; }

/* Ribbon de edição: itens em Template (Anexos/Followup/Query Log) usavam a "caixa"
   de toolbar-button (e-tbar-btn) + ícone 32px, destoando dos itens nativos do Ribbon.
   Achata (sem borda/box) e alinha o tamanho do ícone/peso do texto. */
.sgdlg-edit-ribbon .e-tbar-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto;
    padding: 3px 8px;
    font-weight: 400;
}
.sgdlg-edit-ribbon .e-tbar-btn:hover {
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
    border-radius: 4px;
}
.sgdlg-edit-ribbon .e-tbar-btn span[class*="icon-"]::before { font-size: 16px !important; }
.sgdlg-edit-ribbon .e-tbar-btn .e-tbar-btn-text { font-weight: 400; }

/* Ícone do "Atualizar" maior SÓ no estado Large (expandido). Em condensado o wrapper
   do item deixa de ser .e-ribbon-large-item → volta ao tamanho normal. */
.sgdlg-edit-ribbon .e-ribbon-large-item .sg-ribbon-atualizar span[class*="icon-"]::before,
.sgdlg-edit-ribbon .e-ribbon-large-item .sg-ribbon-atualizar .e-icons::before { font-size: 28px !important; }

/* Condensado: itens em Template (Anexos/Followup/Query Log) escondem o texto quando o
   item está em Small (.e-ribbon-small-item) → ficam ícone+badge iguais aos nativos.
   O texto segue no tooltip (atributo title do botão). */
.sgdlg-edit-ribbon .e-ribbon-small-item .e-tbar-btn-text { display: none; }

/* Condensado (simplified): forms com poucos itens (ex.: Contratos #1097) têm largura
   sobrando e o Syncfusion mantém os itens em Medium (ícone+TEXTO, e-ribbon-medium-item),
   enquanto forms com mais itens (ex.: NFS-e) colapsam p/ Small (só ícone). Isso deixava
   o ribbon do contrato "irregular" (ícone+texto espalhado). Igualamos: no modo simplified,
   o texto do botão nativo (text node solto dentro do .e-btn) some via font-size:0 e o
   ícone é restaurado → ícone-só compacto igual aos demais forms.
   ESCOPO: só .e-ribbon-simplified-mode — o layout Classic (expandido/agrupado, quando
   a classe simplified-mode sai do root) mantém o texto normalmente. */
.sgdlg-edit-ribbon.e-ribbon-simplified-mode .e-ribbon-medium-item .e-btn {
    font-size: 0 !important;
}
.sgdlg-edit-ribbon.e-ribbon-simplified-mode .e-ribbon-medium-item .e-btn .e-btn-icon {
    font-size: 16px !important;
}
.sgdlg-edit-ribbon.e-ribbon-simplified-mode .e-ribbon-medium-item .e-tbar-btn-text {
    display: none !important;
}

/* Ribbon: remove o padding de 10px do conteúdo (visual mais limpo/higiênico). */
.sgdlg-edit-ribbon .e-content.e-lib.e-touch { padding: 0 !important; }

/* Ribbon com no máx. 2 linhas por bloco: o padrão reserva 3 linhas (.e-ribbon-group
   com height fixo ~100/130px), sobrando linha vazia — e um height fixo cortava o header
   e deixava gap no condensado. height:auto → o grupo se ajusta ao conteúdo (2 linhas +
   título no expandido, 1 linha no condensado). Alta especificidade p/ vencer a regra
   .e-ribbon.e-rbn .e-ribbon-group; o header do bloco continua visível. */
.sgdlg-edit-ribbon.e-ribbon.e-rbn .e-ribbon-group,
.sgdlg-edit-ribbon .e-ribbon-group { height: auto !important; }
.sgdlg-edit-ribbon.e-ribbon.e-rbn .e-ribbon-content-height,
.sgdlg-edit-ribbon .e-ribbon-content-height { height: auto !important; }

/* Badge de contagem em botão NATIVO do Ribbon (Anexos/Followup/Query Log):
   agora são RibbonButton comuns (iguais aos demais) e o contador vem via
   HtmlAttributes data-badge → desenha o pill via ::after (posição notificação). */
.sgdlg-edit-ribbon .sg-ribbon-badge { position: relative; overflow: visible; }
.sgdlg-edit-ribbon .sg-ribbon-badge[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--color-sf-primary, #2563eb);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 200;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg-primary, #fff);
    pointer-events: none;
}

/* Ribbon mais compacto para caber todos os grupos sem overflow (o Metadado saía
   pro "..."). O padrão usa margin:8px no ícone (16px/item) + padding 0 8px por grupo;
   com ~18 itens isso estoura a largura. Reduz o footprint horizontal. */
.sgdlg-edit-ribbon .e-ribbon-medium-item .e-btn .e-btn-icon { margin: 6px 4px !important; }
.sgdlg-edit-ribbon .e-ribbon-group-container { padding: 0 5px !important; }

/* (Padrão de campo obrigatório consolidado acima, no bloco CAMPO OBRIGATÓRIO.) */

/* ── Marcador de veículo do mapa de frota (Leaflet divIcon, injetado FORA do escopo
   de componente; por isso global — usado em FrotaAoVivo e no painel GestaoColeta).
   Pin gota (rotate -45) com ícone de caminhão branco (contra-rotacionado). ── */
.frt-pin-wrap { background: transparent; border: none; }
.frt-pin {
    width: 28px; height: 28px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    display: flex; align-items: center; justify-content: center;
}
.frt-pin .frt-pin-ico { display: flex; transform: rotate(45deg); }
.frt-pin .frt-pin-ico::before { color: #fff; font-size: 15px; line-height: 1; }

/* Botão flutuante "SUPORTE" (widget injetado externamente, #sd-widget-sidebar-btn):
   força o fundo azul translúcido por cima do estilo inline/próprio do widget. */
#sd-widget-sidebar-btn { background: #0f6cbd8a !important; }


/* ══ Rodapé do wizard de processamento (ExecutaSP) ═════════════════════════
   GLOBAL de propósito: o SfButton renderiza o <button> fora do escopo do
   .razor.css do componente, então regra escopada não o alcança (era a causa do
   "ícone não está visível": o fundo azul não aplicava, mas o ícone branco sim).
   `color: inherit` no ::before evita a outra armadilha conhecida — o glifo mora
   no pseudo-elemento e um reset global venceria a cor herdada. */
body .sgexe-btn-primary,
body .sgexe-btn-primary:not(:disabled) {
    background: var(--color-sf-primary, #0851a3) !important;
    border-color: var(--color-sf-primary, #0851a3) !important;
    color: #fff !important;
}
body .sgexe-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-sf-primary, #0851a3) 85%, #000) !important;
}
body .sgexe-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
body .sgexe-btn-primary span,
body .sgexe-btn-primary span[class*="icon-"],
body .sgexe-btn-primary span[class*="icon-"]::before { color: inherit !important; }

body .sgexe-btn-ghost {
    background: var(--color-sf-content-bg-color, #fff) !important;
    color: var(--color-sf-content-text-color-alt1, #475569) !important;
    border: 1px solid var(--color-sf-border-light, #cbd5e1) !important;
}
body .sgexe-btn-ghost:hover {
    background: color-mix(in srgb, var(--color-sf-content-text-color, #1e293b) 6%, var(--color-sf-content-bg-color, #fff)) !important;
}
body .sgexe-btn-ghost span,
body .sgexe-btn-ghost span[class*="icon-"]::before { color: inherit !important; }

/* ══════════════════════════════════════════════════════════════════════
   Designer de COLUNAS do grid (98% × 98%)
   Espelha o chrome do Designer de layout (.sgdes-*) — mesmo z-index alto pelo
   mesmo motivo: o SfDialog é teleportado pro body e precisa passar por cima do
   painel de metadado (1200) e do dialog de edição do grid (100020).
   ══════════════════════════════════════════════════════════════════════ */
.e-dlg-container.sggrd-layout-dlg,
.e-dlg-container:has(> .sggrd-layout-dlg),
.e-dialog.sggrd-layout-dlg,
.e-dlg-container.sggrd-layout-dlg > .e-dialog,
.e-dlg-container:has(> .sggrd-layout-dlg) > .e-dialog {
    z-index: 100040 !important;
}
.e-dlg-container.sggrd-layout-dlg > .e-dlg-overlay,
.e-dlg-container:has(> .sggrd-layout-dlg) > .e-dlg-overlay {
    z-index: 100039 !important;
}

.e-dialog.sggrd-layout-dlg {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
}
/* Mesmo conserto do sgdes: o global `.e-dlg-header { display:block }` empurra
   o X pra uma segunda faixa. Volta a ser flex row sem quebra. */
.e-dialog.sggrd-layout-dlg .e-dlg-header-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
.e-dialog.sggrd-layout-dlg .e-dlg-header { flex: 1 1 auto; width: auto !important; }
.e-dialog.sggrd-layout-dlg .e-dlg-content { padding: 0; overflow: hidden; }

.sggrd-dlg-head { display: flex; align-items: center; gap: 11px; width: 100%; }
.sggrd-dlg-head-icon { font-size: 22px; opacity: .85; }
.sggrd-dlg-head-text { display: flex; flex-direction: column; line-height: 1.25; }
.sggrd-dlg-head-title { font-size: .92rem; font-weight: 600; }
.sggrd-dlg-head-sub { font-size: .7rem; opacity: .6; }
.sggrd-dlg-head-hint {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: .7rem; font-weight: 400; opacity: .55; white-space: nowrap;
}

/* ── Shell: canvas + inspetor ── */
.sggrd-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    height: 100%;
    overflow: hidden;
}
.sggrd-canvas { overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 18px; }

.sggrd-secao-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sggrd-secao-title { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.sggrd-secao-count {
    font-size: .66rem; font-weight: 600; padding: 1px 7px; border-radius: 9px;
    background: rgba(0,0,0,.06);
}
.sggrd-secao-warn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; color: #b45309;
}

/* Cards TODOS do mesmo tamanho: auto-fill + altura fixa. É o ponto do designer
   — comparar rótulo e conteúdo, não tamanho de caixa. O conteúdo que passar do
   card é cortado no próprio slot, sem empurrar os vizinhos. */
.sggrd-zone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    min-height: 92px;
    align-content: start;
}
.sggrd-zone--fora { opacity: .92; }

.sggrd-card {
    height: 118px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--color-sf-border, rgba(0,0,0,.12));
    border-radius: 8px;
    background: var(--color-sf-content-bg-color, #fff);
    cursor: grab;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.sggrd-card:hover { border-color: rgba(0,102,255,.45); }
.sggrd-card--selected { border-color: #0066FF; box-shadow: 0 0 0 2px rgba(0,102,255,.16); }
.sggrd-card--fora { background: rgba(0,0,0,.02); border-style: dashed; }
.sggrd-card--fixo { border-left: 3px solid #7c3aed; }
.sggrd-card--total { border-left: 3px solid #059669; }

.sggrd-card-head { display: flex; align-items: flex-start; gap: 6px; }
.sggrd-card-name {
    font-size: .78rem; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sggrd-card-edit {
    margin-left: auto; flex: 0 0 auto; border: none; background: transparent;
    cursor: pointer; padding: 2px; border-radius: 4px; opacity: .45; line-height: 1;
}
.sggrd-card-edit:hover { opacity: 1; background: rgba(0,0,0,.07); }
.sggrd-card-col {
    font-size: .64rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* O valor real ganha o maior peso visual do card: é por ele que se decide se a
   coluna merece estar no grid. */
.sggrd-card-sample {
    flex: 1 1 auto; min-height: 0;
    margin: 4px 0 2px;
    font-size: .72rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .92;
}
.sggrd-card-foot { display: flex; flex-direction: column; gap: 1px; }
.sggrd-card-type { font-size: .63rem; font-weight: 600; opacity: .65; }
.sggrd-card-dims { font-size: .62rem; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sggrd-card--ghost { opacity: .35; }
.sggrd-card--chosen { cursor: grabbing; }
.sggrd-card--drag { box-shadow: 0 8px 22px rgba(0,0,0,.18); }

.sggrd-empty {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: center;
    min-height: 76px; border: 1px dashed rgba(0,0,0,.16); border-radius: 8px;
    font-size: .72rem; opacity: .5;
}

/* ── Inspetor ── */
.sggrd-inspector {
    border-left: 1px solid var(--color-sf-border, rgba(0,0,0,.12));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-sf-content-bg-color, #fff);
}
.sggrd-insp-head {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.sggrd-insp-head-text { display: flex; flex-direction: column; min-width: 0; }
.sggrd-insp-title { font-size: .82rem; font-weight: 600; }
.sggrd-insp-sub { font-size: .66rem; opacity: .55; }
.sggrd-insp-close {
    margin-left: auto; border: none; background: transparent; cursor: pointer;
    padding: 3px; border-radius: 4px; opacity: .5;
}
.sggrd-insp-close:hover { opacity: 1; background: rgba(0,0,0,.07); }
.sggrd-insp-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 18px; }
.sggrd-insp-section { display: flex; flex-direction: column; gap: 12px; }
.sggrd-insp-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .5; }
.sggrd-insp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sggrd-insp-checks { display: flex; flex-direction: column; gap: 8px; }
.sggrd-insp-footer {
    display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.08);
}
.sggrd-insp-empty {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; padding: 24px; text-align: center;
}
.sggrd-insp-empty-icon { font-size: 30px; opacity: .28; }
.sggrd-insp-empty-title { font-size: .8rem; font-weight: 600; opacity: .75; }
.sggrd-insp-empty-text { font-size: .7rem; opacity: .55; line-height: 1.5; max-width: 240px; }
.sggrd-legend { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sggrd-legend-item { display: flex; align-items: center; gap: 7px; font-size: .68rem; opacity: .6; }
.sggrd-legend-swatch { width: 3px; height: 14px; border-radius: 2px; }
.sggrd-legend-swatch--fixo { background: #7c3aed; }
.sggrd-legend-swatch--total { background: #059669; }
.sggrd-legend-swatch--fora { background: rgba(0,0,0,.22); }

/* ── Dark mode ── */
body.e-dark-mode .sggrd-card { border-color: rgba(255,255,255,.14); }
body.e-dark-mode .sggrd-card--fora { background: rgba(255,255,255,.03); }
body.e-dark-mode .sggrd-secao-count { background: rgba(255,255,255,.1); }
body.e-dark-mode .sggrd-card-edit:hover,
body.e-dark-mode .sggrd-insp-close:hover { background: rgba(255,255,255,.12); }
body.e-dark-mode .sggrd-inspector { border-left-color: rgba(255,255,255,.14); }
body.e-dark-mode .sggrd-insp-head { border-bottom-color: rgba(255,255,255,.1); }
body.e-dark-mode .sggrd-insp-footer { border-top-color: rgba(255,255,255,.1); }
body.e-dark-mode .sggrd-empty { border-color: rgba(255,255,255,.16); }
body.e-dark-mode .sggrd-secao-warn { color: #fbbf24; }

/* ══════════════════════════════════════════════════════════════════════
   Formulário translúcido sobre o grid
   O diálogo de edição usa a MESMA cor de fundo da área de dados do grid,
   com 90% de opacidade, deixando as linhas aparecerem por baixo.

   Alpha no background, NÃO `opacity` no elemento: `opacity` rebaixa também
   rótulos, inputs e ícones, e o formulário ficaria ilegível. Com rgba/color-mix
   só o fundo é translúcido — o conteúdo continua sólido.

   A cor acompanha o tema: o .e-gridcontent é transparente e herda o fundo da
   página (--bs-white no claro, --color-sf-content-bg-color no escuro).
   ══════════════════════════════════════════════════════════════════════ */
.e-dialog:has(.sgdlg-header-wrap) {
    background-color: color-mix(in srgb, var(--bs-white) 90%, transparent) !important;
}

/* As camadas internas do Syncfusion pintam fundo próprio e anulariam o alpha
   do container — o conjunto voltaria a ficar opaco sem nenhum erro aparente. */
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-header-content,
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content,
.e-dialog:has(.sgdlg-header-wrap) .e-dlg-content .content-wrapper,
.e-dialog:has(.sgdlg-header-wrap) .sgdlg-header-wrap {
    background-color: transparent !important;
}

/* O overlay modal escurece tudo que está atrás: sem clarear, a transparência
   revelaria um grid acinzentado e o efeito se perderia. */
.e-dlg-container:has(> .e-dialog .sgdlg-header-wrap) > .e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

body.e-dark-mode .e-dialog:has(.sgdlg-header-wrap) {
    background-color: color-mix(in srgb, var(--color-sf-content-bg-color) 90%, transparent) !important;
}

/* ── Mesmo translúcido no diálogo de PROCESSAMENTO ────────────────────────
   Um processamento abre por cima do grid que o disparou, exatamente como o
   formulário de edição, e ficar opaco quebrava a continuidade entre os dois.
   Mesmos valores de propósito: dois alphas parecidos leem como erro de
   renderização, não como estilo — mexeu em um, mexe no outro.
   Vale para todo processamento — o componente que pintar fundo próprio
   simplesmente continua opaco, como já era. */
.sg-processamento-dlg {
    background-color: color-mix(in srgb, var(--bs-white) 90%, transparent) !important;
    /* Cantos arredondados nos quatro lados. O overflow:hidden é o que faz o
       conteúdo respeitar a curva — sem ele o rail escuro do processamento
       continua quadrado e reaparece por baixo do canto, que é a mesma pegadinha
       da gaveta do menu do sistema.
       Não corta popup de combo/calendário: o Syncfusion os renderiza no body,
       fora deste elemento. */
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* As camadas internas herdam o retângulo do fluent2 e desenham por cima da
   curva do container. Arredondar só o canto que cada uma encosta. */
.sg-processamento-dlg .e-dlg-header-content {
    border-radius: 12px 12px 0 0 !important;
}

.sg-processamento-dlg .e-dlg-content,
.sg-processamento-dlg .e-dlg-body-content {
    border-radius: 0 0 12px 12px !important;
}

/* As camadas internas do Syncfusion pintam fundo próprio e anulariam o alpha
   do container sem deixar nenhum sintoma além do "não funcionou". */
.sg-processamento-dlg .e-dlg-header-content,
.sg-processamento-dlg .e-dlg-content,
.sg-processamento-dlg .e-dlg-body-content {
    background-color: transparent !important;
}

.e-dlg-container:has(> .sg-processamento-dlg) > .e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

body.e-dark-mode .sg-processamento-dlg {
    background-color: color-mix(in srgb, var(--color-sf-content-bg-color) 90%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Degradê do módulo — continuidade sobre o rodapé e a rolagem do grid
   O radial de --sys-color mora no .ws-main (WorkspaceLayout.razor.css) e
   atravessa as linhas porque .e-content/.e-gridcontent já são transparentes.
   Faltavam as camadas abaixo, que cortavam o degradê numa emenda dura.
   ══════════════════════════════════════════════════════════════════════ */

/* Trilha da rolagem do grid: era --color-sf-content-bg-color-alt1, uma faixa
   opaca cruzando o degradê. O thumb continua sólido — é o que se agarra. */
.e-grid .e-content::-webkit-scrollbar,
.e-grid .e-content::-webkit-scrollbar-track,
.e-grid .e-gridcontent::-webkit-scrollbar,
.e-grid .e-gridcontent::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Células congeladas — TRANSLÚCIDAS, não transparentes.
   O fundo opaco aqui não é decoração: é o que impede as colunas roláveis de
   aparecerem deslizando por baixo das congeladas. A 92% a emenda com o
   degradê some a olho nu e a máscara continua funcionando. Zerar de vez
   devolveria o bug de sobreposição durante a rolagem horizontal. */
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: color-mix(in srgb, var(--bs-white) 92%, transparent) !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: color-mix(in srgb, var(--color-sf-content-bg-color) 92%, transparent) !important;
}

/* Linha de somatório: o .e-gridfooter já era transparente, mas as células
   dentro dele carregavam fundo próprio do tema. */
body .e-grid .e-gridfooter .e-summarycell,
body .e-grid .e-gridfooter .e-summaryrow,
body .e-grid .e-gridfooter table { background-color: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════
   Botões da Matriz de Matching (.sg-fmat-btn-*)
   GLOBAIS de propósito, não em RegrasMatching.razor.css: o SfButton monta o
   próprio markup e não herda o [b-xxx] do componente, e o editor de regra é
   teleportado para o body pelo SfDialog — nem `::deep` alcança ele lá.
   Foi por isso que a versão isolada não pegava no dark mode.

   As cores vivem em variáveis porque os valores levam !important (necessário
   para vencer o tema do Syncfusion) e !important não se sobrescreve por
   cascata — só trocando o valor da variável.
   ══════════════════════════════════════════════════════════════════════ */
.sg-fmat-btn-primary,
.sg-fmat-btn-secondary,
.sg-fmat-btn-cancel,
.sg-fmat-btn-danger {
    --sgb-primary-bg:   #6366f1;
    --sgb-primary-hov:  #4338ca;
    --sgb-sec-bg:       #f1f5f9;
    --sgb-sec-bd:       #cbd5e1;
    --sgb-sec-fg:       #334155;
    --sgb-sec-bd-hov:   #94a3b8;
    --sgb-cancel-bd:    #cbd5e1;
    --sgb-cancel-fg:    #475569;
    --sgb-danger-bg:    #fee2e2;
    --sgb-danger-bd:    #fca5a5;
    --sgb-danger-fg:    #b91c1c;
    --sgb-danger-hov:   #fecaca;
}

body.e-dark-mode .sg-fmat-btn-primary,
body.e-dark-mode .sg-fmat-btn-secondary,
body.e-dark-mode .sg-fmat-btn-cancel,
body.e-dark-mode .sg-fmat-btn-danger {
    --sgb-primary-bg:   #6366f1;
    --sgb-primary-hov:  #818cf8;
    --sgb-sec-bg:       rgba(255,255,255,.07);
    --sgb-sec-bd:       rgba(255,255,255,.20);
    --sgb-sec-fg:       rgba(255,255,255,.90);
    --sgb-sec-bd-hov:   rgba(255,255,255,.38);
    --sgb-cancel-bd:    rgba(255,255,255,.20);
    --sgb-cancel-fg:    rgba(255,255,255,.82);
    --sgb-danger-bg:    rgba(220,38,38,.18);
    --sgb-danger-bd:    rgba(248,113,113,.48);
    --sgb-danger-fg:    #fca5a5;
    --sgb-danger-hov:   rgba(220,38,38,.30);
}

.sg-fmat-btn-primary {
    background:   var(--sgb-primary-bg) !important;
    border-color: var(--sgb-primary-bg) !important;
    color: #fff !important;
}
.sg-fmat-btn-primary:hover:not(:disabled) {
    background:   var(--sgb-primary-hov) !important;
    border-color: var(--sgb-primary-hov) !important;
}

.sg-fmat-btn-secondary {
    background:   var(--sgb-sec-bg) !important;
    border-color: var(--sgb-sec-bd) !important;
    color:        var(--sgb-sec-fg) !important;
}
.sg-fmat-btn-secondary:hover:not(:disabled) { border-color: var(--sgb-sec-bd-hov) !important; }

.sg-fmat-btn-cancel {
    background: transparent !important;
    border-color: var(--sgb-cancel-bd) !important;
    color:        var(--sgb-cancel-fg) !important;
}
.sg-fmat-btn-cancel:hover:not(:disabled) { border-color: var(--sgb-sec-bd-hov) !important; }

.sg-fmat-btn-danger {
    background:   var(--sgb-danger-bg) !important;
    border-color: var(--sgb-danger-bd) !important;
    color:        var(--sgb-danger-fg) !important;
}
.sg-fmat-btn-danger:hover:not(:disabled) { background: var(--sgb-danger-hov) !important; }

/* Desabilitado precisa continuar LEGÍVEL: rebaixado, não apagado. Sem isto o
   tema deixa "Duplicar"/"Editar regra" quase invisíveis no fundo escuro. */
.sg-fmat-btn-primary:disabled,
.sg-fmat-btn-secondary:disabled,
.sg-fmat-btn-cancel:disabled,
.sg-fmat-btn-danger:disabled {
    opacity: .55 !important;
    cursor: not-allowed;
}

/* O glifo mora no ::before e o reset global o pinta — sem herdar, o ícone
   some mesmo existindo na fonte e com a cor do botão correta. */
.sg-fmat-btn-primary   .e-icons::before, .sg-fmat-btn-primary   .e-btn-icon::before,
.sg-fmat-btn-secondary .e-icons::before, .sg-fmat-btn-secondary .e-btn-icon::before,
.sg-fmat-btn-cancel    .e-icons::before, .sg-fmat-btn-cancel    .e-btn-icon::before,
.sg-fmat-btn-danger    .e-icons::before, .sg-fmat-btn-danger    .e-btn-icon::before { color: inherit; }

/* ── Diálogo do gráfico do Painel de Estoque ──────────────────────────
   Vai no app.css e não no .razor.css do componente: o SfDialog renderiza
   em Target="body", fora da árvore do componente, então .e-dlg-content não
   recebe o atributo de escopo e nem ::deep o alcança.
   SEM height:100% aqui — com ele o Syncfusion perdia o card e o conteúdo
   se espalhava pela tela. O tamanho do gráfico é fixo, em px, definido no
   componente. */
.sgest-graf-dlg .e-dlg-content {
    overflow: hidden;
    padding-top: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   CAMADA DE TOQUE — tablet e celular
   ════════════════════════════════════════════════════════════════════════
   `(hover: none) and (pointer: coarse)` é o par que descreve dedo: sem
   hover confiável e sem precisão de pixel. NÃO usar largura de tela para
   isso — tablet em paisagem tem a largura de um notebook, e notebook com
   tela sensível tem mouse E dedo.

   Por que !important aqui: estas regras competem com o CSS isolation dos
   componentes, cujos seletores carregam o atributo [b-hash] e por isso têm
   especificidade maior. Sem !important a camada não venceria o estado
   "escondido" que ela existe para desfazer. É o caso legítimo — uma camada
   de acessibilidade que precisa ganhar de todas as outras.

   Três problemas, nesta ordem de gravidade:
     1. conteúdo que só existe no :hover — no dedo simplesmente não existe;
     2. alvo pequeno demais para o dedo;
     3. hover decorativo que "gruda" depois do toque.
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

    /* ── 1. O que só aparecia no hover passa a estar sempre visível ──────
       Lista explícita, e não um seletor genérico: cada um destes é um botão
       ou um dado que o usuário de tablet simplesmente não alcança hoje.
       Ao criar um novo "aparece no hover", incluir aqui — ou o recurso
       nasce inacessível no tablet. */
    .sgch-btn,
    .sgch-pin-btn,
    .sgdes-field-edit,
    .sgdes-field-dims,
    .sgprc-item-go,
    .sgfav-item-go,
    .sgprf-fav-arrow,
    .sgprf-hist-arrow,
    .sgwac-nome-edit-btn,
    .sg-medloc-ref-ico,
    .sgfat-faixa-clear,
    .sgrid-subform-link,
    .sgfat-info-btn,
    .sgfat-edit-btn {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Este nasce em display:none — opacity não o traz de volta. */
    .sgwac-nome-edit-btn {
        display: inline-flex !important;
    }

    /* ── 2. Alvo de toque ────────────────────────────────────────────────
       44px é o mínimo consagrado (Apple HIG; o Material usa 48). Vale só
       para BOTÃO — subir a altura de linha de grid ou de campo de texto
       reduziria demais o que cabe na tela, e esses não são alvos de erro
       frequente. min-*, nunca height fixa: o conteúdo continua mandando
       quando já é maior. */
    .e-btn,
    .e-toolbar .e-tbar-btn,
    .e-pager .e-numericitem,
    .e-pager .e-icons,
    .e-grid .e-headercell .e-filtermenuicon,
    .e-dlg-header-content .e-dlg-closeicon-btn,
    .sg-icon-btn,
    .sgch-btn,
    .sgfat-info-btn,
    .sgfat-edit-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ícone dentro de alvo ampliado continua do tamanho que era: o que
       cresce é a área de toque, não o desenho. */
    .e-btn [class*="icon-"],
    .sg-icon-btn [class*="icon-"] {
        font-size: inherit;
    }

    /* ── 3. Hover decorativo não "gruda" ─────────────────────────────────
       No toque o navegador aplica :hover no elemento tocado e só tira no
       próximo toque em outro lugar — a linha fica destacada como se
       estivesse selecionada, competindo com a seleção de verdade. */
    .e-grid .e-row:hover .e-rowcell {
        background-color: inherit !important;
    }

    /* Tooltip que depende de hover não aparece no dedo; deixá-la fora do
       fluxo evita o retângulo vazio pairando sobre o conteúdo. */
    .sgagc-card-info-tooltip {
        display: none !important;
    }

    /* Rolagem com inércia dentro dos contêineres roláveis da app. */
    .e-grid .e-content,
    .e-dlg-content,
    .ws-main {
        -webkit-overflow-scrolling: touch;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   BARRAS EM ESPAÇO ESTREITO — só os ícones
   ════════════════════════════════════════════════════════════════════════
   Três barras disputam a mesma faixa horizontal no topo: a navbar
   (Home/Histórico/Favoritos), o alternador de visões (Padrão/Gráficos/
   Analisar com IA/Grid/Kanban/Pivot/Histórico) e a toolbar do grid
   (Atualizar/Adicionar/Exportar/…). Somadas, passam de 1400px de texto e
   começam a se atropelar muito antes de o layout "quebrar".

   Aqui a medida é LARGURA e não ponteiro: o problema é espaço, não dedo.
   Um notebook com a janela pela metade sofre o mesmo que um tablet.

   O texto vira tooltip, não desaparece: os botões Syncfusion já trazem
   title, e os três da navbar receberam um.

   As duas técnicas são as que este projeto já usa no ribbon do formulário
   de edição (ver .sgdlg-edit-ribbon, acima):
     • rótulo em <span> próprio → display: none;
     • rótulo em TEXT NODE solto dentro do <button> → font-size: 0 no
       botão e tamanho restaurado no <span> do ícone, porque não há como
       endereçar um text node por seletor.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {

    /* ── Navbar: "Home", "Histórico", "Favoritos" ────────────────────────
       Texto solto ao lado do ícone — daí o font-size: 0. */
    .sg-appbar-btn {
        font-size: 0 !important;
        gap: 0 !important;
    }
    .sg-appbar-btn [class*="icon-"],
    .sg-appbar-btn .e-icons {
        font-size: 1.15rem !important;
    }

    /* ── Alternador de visões: rótulo em span próprio ────────────────────
       Vale para .sgvb-view-btn (Grid/Kanban/Pivot) e .sgvb-ctrl-btn
       (Padrão/Gráficos/Analisar com IA/Histórico) — ambos usam a mesma
       classe de rótulo. */
    .sgvb-view-label {
        display: none !important;
    }

    /* ── Toolbar do grid (Atualizar/Adicionar/Exportar/…) ────────────────
       Apesar da aparência, NÃO são botões de toolbar: é um SfMenu
       horizontal (.sg-grid-toolbar-menu) dentro do SfToolbar. Por isso
       .e-tbar-btn-text não alcança nada aqui — o rótulo é um TEXT NODE
       solto dentro do <li class="e-menu-item">, ao lado do <span> do
       ícone. Mesma técnica da navbar: font-size: 0 no item, tamanho
       restaurado no ícone.

       FILHO DIRETO (>) de propósito: os submenus (Exportar, Processar)
       abrem em popup com os mesmos .e-menu-item, e lá o texto é a única
       coisa que identifica a opção — sem a restrição, o menu ficaria
       inutilizável. */
    .sg-grid-toolbar-menu > .e-menu-parent > .e-menu-item {
        font-size: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .sg-grid-toolbar-menu > .e-menu-parent > .e-menu-item > .e-menu-icon,
    .sg-grid-toolbar-menu > .e-menu-parent > .e-menu-item > [class*="icon-"],
    .sg-grid-toolbar-menu > .e-menu-parent > .e-menu-item > .e-icons {
        font-size: 16px !important;
        margin-right: 0 !important;
    }
    /* A setinha do submenu continua legível — é ela que avisa que há mais. */
    .sg-grid-toolbar-menu > .e-menu-parent > .e-menu-item > .e-caret {
        font-size: 10px !important;
    }

    /* Toolbars de botão comuns (diálogos, subgrid) seguem a mesma ideia. */
    .e-grid .e-toolbar .e-tbar-btn-text {
        display: none !important;
    }
    .e-grid .e-toolbar .e-tbar-btn {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── KPIs do topo recolhidos ───────────────────────────────────────────
   O botão agrupador só existe quando falta espaço; acima disso ele não
   ocupa lugar nenhum. Fora do breakpoint o grupo é uma fileira normal e
   .is-aberto não significa nada. */
.sg-appbar-kpi-more { display: none; }

@media (max-width: 1100px) {
    .sg-appbar-kpi-more { display: inline-flex; }

    /* O grupo vira painel ancorado ao topo, e não fileira. position: fixed
       e não absolute: a navbar tem overflow controlado e o painel seria
       recortado por ela.

       !important porque .sg-appbar-kpi-group nasce num <style> INLINE dentro
       do NavMenu.razor. Style inline de componente não é scoped, mas entra no
       DOM depois do <link> do app.css — com a mesma especificidade ele vence
       o empate, e o painel apareceria aberto o tempo todo. */
    .sg-appbar-kpi-group {
        display: none !important;
        position: fixed;
        top: 52px;
        right: 12px;
        /* Acima do .sg-estab-overlay (100010), que é o scrim de clicar-fora
           usado pelos popovers da barra. Abaixo dele, o scrim engoliria os
           cliques nos próprios itens do painel. */
        z-index: 100011;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        border-radius: 10px;
        background: var(--color-sf-content-bg-color, #fff);
        border: 1px solid var(--color-sf-border-light, #e2e8f0);
        box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    }
    .sg-appbar-kpi-group.is-aberto { display: flex !important; }

    /* Recolhido, o ícone sozinho não diz o que é — aqui há espaço para o
       rótulo que a barra não tinha. Vem do title, sem duplicar texto no
       markup. */
    .sg-appbar-kpi-group .sg-appbar-kpi {
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-height: 40px;
        padding: 6px 12px 6px 10px;
        white-space: nowrap;
    }
    .sg-appbar-kpi-group .sg-appbar-kpi::after {
        content: attr(title);
        font-size: .78rem;
    }
}

/* ── Busca da navbar: só some abaixo de 750px ──────────────────────────
   Ela cabe no tablet e é caminho de uso frequente — some apenas quando a
   barra fica realmente sem espaço. 749.98 e não 750 para que EM 750px a
   busca ainda apareça, como pedido.
   Aqui o número é de uso, não do Bootstrap: os breakpoints da grade não
   dizem nada sobre quando este campo específico deixa de caber.
   O acesso não se perde: o mesmo campo existe na Home e o atalho de
   pesquisa continua funcionando. */
@media (max-width: 749.98px) {
    .sg-navbar-search-wrap {
        display: none !important;
    }
}