/* Syncfusion Fluent2 com as cores DeTrigo (tokens.css). O tema base muda o desenho dos componentes, não a paleta. */
:root {
  --color-sf-primary: var(--cor-marca);
  --color-sf-primary-bg-color: var(--cor-marca);
  --color-sf-primary-bg-color-hover: var(--cor-marca-clara);
  --color-sf-primary-bg-color-focus: var(--cor-marca);
  --color-sf-primary-bg-color-pressed: var(--cor-marca);
  --color-sf-primary-bg-color-selected: var(--cor-marca);
  --color-sf-primary-border-color: var(--cor-marca);
  --color-sf-primary-border-color-hover: var(--cor-marca-clara);
  --color-sf-primary-border-color-focus: var(--cor-marca);
  --color-sf-primary-border-color-pressed: var(--cor-marca);
  --color-sf-primary-border-color-selected: var(--cor-marca);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: var(--cor-marca-fundo);
  --color-sf-primary-lighter: var(--cor-marca-fundo);
  --color-sf-primary-dark: var(--cor-marca-clara);
  --color-sf-primary-darker: var(--cor-marca);
  --color-sf-border: var(--cor-linha-forte);
  --color-sf-content-bg-color: var(--cor-superficie);
  --color-sf-border-light: var(--cor-linha-suave);
  --color-sf-border-hover: var(--cor-linha-forte);
  --color-sf-border-focus: var(--cor-marca);
  --color-sf-content-text-color: var(--cor-texto);
  --color-sf-content-text-color-alt: var(--cor-texto-suave);
  --color-sf-success: var(--cor-ok);
  --color-sf-warning: var(--cor-aviso);
  --color-sf-danger: var(--cor-erro);
  --color-sf-info: var(--cor-info);
  --color-sf-font-family: var(--letra, Inter, system-ui, sans-serif);
}


/* Painéis flutuantes (dropdowns, calendário, diálogos) por cima de tudo, incl. janelas do DeTrigo. */
.e-popup, .e-dialog, .e-toast-container { z-index: 3000; }

/* Toasts iguais aos do Enki: cantos 12px, sombra forte e sem bloquear cliques por baixo (só o × é clicável). */
.e-toast-container .e-toast { border-radius: 12px; box-shadow: var(--sombra-flutuante, 0 12px 32px rgba(23, 49, 43, 0.12)); }
.e-toast-container, .e-toast-container .e-toast { pointer-events: none !important; }
.e-toast-container .e-toast-close-icon { pointer-events: auto !important; }

/* ---- Campos Syncfusion nos wrappers El* (ElInput, ElInputNumber, ElSelect, ElDatePicker) ---- */
.sf-input-host, .sf-field-host { display: block; width: 100%; min-width: 0; }
.sf-input-host .e-input-group, .sf-input-host .e-input-group.e-control-wrapper,
.sf-field-host .e-input-group, .sf-field-host .e-input-group.e-control-wrapper { width: 100%; box-sizing: border-box; }
.sf-input-host .e-input-group:not(.e-multi-line-input),
.sf-field-host .e-input-group:not(.e-multi-line-input) { min-height: var(--alvo-min, 40px); border-radius: var(--raio-s, 6px); }
.sf-input-host .e-input-group .e-input, .sf-field-host .e-input-group .e-input { font-size: var(--t-m, 14px); }
.sf-input-host--small .e-input-group:not(.e-multi-line-input), .sf-field-host--small .e-input-group:not(.e-multi-line-input) { min-height: 32px; }
.sf-input-host .e-input-group.e-multi-line-input textarea.e-input { min-height: 72px; resize: vertical; }

.sf-input-host .e-input-group, .sf-field-host .e-input-group, .sf-field-host .e-multi-select-wrapper { background: var(--cor-superficie, #fff); }
.sf-input-host .e-input-group.e-multi-line-input { border-radius: var(--raio-s, 6px); }

/* ---- Cabeçalho de separadores (SfTab só com cabeçalho) dentro dos editores ---- */
.sf-tabs-header .e-tab { background: transparent; }
.sf-tabs-header .e-tab .e-content { display: none; }
.sf-tabs-header .e-tab .e-tab-header { border-bottom: 1px solid var(--cor-linha); background: transparent; }
.sf-tabs-header .e-tab .e-tab-header .e-toolbar-item .e-tab-text { font-weight: 600; font-size: var(--t-m, 14px); }
.sf-tabs-header .e-tab .e-tab-header .e-toolbar-item { min-height: var(--alvo-min, 40px); }
.sf-tabs-header .e-tab .e-tab-header .e-toolbar-item .e-tab-text { display: inline-flex; align-items: center; gap: 6px; }
.sf-tabs-header .e-tab .e-tab-header .e-toolbar-item .e-tab-text .el-icon { font-size: 16px; }
.sf-tabs-header .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--cor-marca); }

/* O texto não pode ficar colado ao topo quando a caixa tem a altura de toque (40px). */
.sf-input-host .e-input-group:not(.e-multi-line-input) input.e-input,
.sf-field-host .e-input-group input.e-input { min-height: calc(var(--alvo-min, 40px) - 2px); padding-top: 0; padding-bottom: 0; }
.sf-field-host .e-multi-select-wrapper { min-height: var(--alvo-min, 40px); border-radius: var(--raio-s, 6px); }
.sf-input-host--small .e-input-group:not(.e-multi-line-input) input.e-input,
.sf-field-host--small .e-input-group input.e-input { min-height: 30px; }

/* Checkbox/interruptor Syncfusion dentro dos wrappers ElCheckbox/ElSwitch. */
.sf-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 24px; vertical-align: middle; }
.sf-checkbox .e-checkbox-wrapper { margin: 0; }
.sf-checkbox .sf-checkbox__label { padding: 0; cursor: pointer; font-size: var(--t-m, 14px); }
.sf-switch { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.sf-switch .el-switch__label { font-size: var(--t-m, 14px); }

/* ---- Caixa de confirmação (ElMessageBoxHost → SfDialog) ---- */
.detrigo-msgbox.e-dialog .e-dlg-content { padding-top: 8px; }
.detrigo-msgbox__body { display: flex; align-items: flex-start; gap: 12px; }
.detrigo-msgbox__status { flex: 0 0 auto; font-size: 24px; margin-top: 2px; }
.detrigo-msgbox__status.el-message-box-icon--success { color: var(--cor-ok); }
.detrigo-msgbox__status.el-message-box-icon--warning { color: var(--cor-aviso); }
.detrigo-msgbox__status.el-message-box-icon--error { color: var(--cor-erro); }
.detrigo-msgbox__status.el-message-box-icon--info { color: var(--cor-info); }
.detrigo-msgbox__message { margin: 0; line-height: 1.5; color: var(--cor-texto); overflow-wrap: anywhere; }
.detrigo-msgbox__input { margin-top: 14px; }
.detrigo-msgbox__error { margin-top: 6px; color: var(--cor-erro); font-size: var(--t-s, 13px); }
.detrigo-msgbox .e-footer-content .e-btn { min-height: var(--alvo-min, 40px); padding-inline: 18px; border-radius: var(--raio-s, 6px); }
.sf-checkbox .e-checkbox-wrapper .e-frame { margin: 0; }
.sf-checkbox .e-checkbox-wrapper .e-label { margin: 0 0 0 8px; padding: 0; font-size: var(--t-m, 14px); }
.sf-checkbox .e-checkbox-wrapper .e-label:empty { display: none; }

/* Filtros compactos (Size="small", p.ex. widgets do dashboard): menos padding para o texto caber na largura dada. */
.sf-field-host--small .e-input-group input.e-input,
.sf-field-host--small .e-input-group.e-control-wrapper input.e-input { padding-left: 8px; padding-right: 2px; font-size: var(--t-s, 13px); }
.sf-field-host--small .e-input-group .e-input-group-icon { min-width: 24px; margin: 0; padding: 0 4px; }
.sf-field-host--small .e-input-group:not(.e-multi-line-input) { min-height: 32px; border-radius: var(--raio-s, 6px); }
.sf-input-host .e-input-group .e-input-group-icon, .sf-field-host .e-input-group .e-input-group-icon { color: var(--cor-texto-suave, #4d5b55); }