/* =============================================================================
   Syncfusion Blazor (tema Fluent 2) com a identidade i9 (azul royal, slate, Inter).
   Carregar DEPOIS de fluent2.css e i9core.css (App.razor). Ver docs/SYNCFUSION.md.

   1. troca a paleta do Fluent 2 pela do i9Core (custom properties --color-sf-*, que o tema usa em
      todos os componentes — grelha, paginacao, listas, calendario);
   2. alinha medidas (altura dos campos, raios, sombras) com i9core.css;
   3. desenha os dialogos (.i9-dialog), a grelha (.i9-grid), o paginador (.i9-pager) e as mensagens (.i9-toast).

   Camadas: sidebar 2003, dialogos 2200, listas/calendarios 2300, mensagens 2500.
   ============================================================================= */

:root {
    --e-font-name: "Inter", "Segoe UI", system-ui, sans-serif;

    --color-sf-primary: #2563eb;
    --color-sf-primary-light: #93b4fb;
    --color-sf-primary-lighter: #eef4ff;
    --color-sf-primary-dark: #1d4ed8;
    --color-sf-primary-darker: #1e40af;
    --color-sf-primary-bg-color-hover: #1d4ed8;
    --color-sf-primary-bg-color-pressed: #1e40af;
    --color-sf-primary-bg-color-selected: #1d4ed8;
    --color-sf-primary-bg-color-disabled: #93b4fb;
    --color-sf-primary-text-disabled: #ffffff;
    --color-sf-primary-cell-selection: #eef4ff;

    --color-sf-success: #16a34a;
    --color-sf-success-bg-color: #16a34a;
    --color-sf-success-bg-color-hover: #15803d;
    --color-sf-success-bg-color-pressed: #166534;
    --color-sf-success-light-alt: #ecfdf3;
    --color-sf-warning: #d97706;
    --color-sf-warning-bg-color: #d97706;
    --color-sf-warning-bg-color-hover: #b45309;
    --color-sf-warning-bg-color-pressed: #92400e;
    --color-sf-warning-light-alt: #fffaeb;
    --color-sf-danger: #dc2626;
    --color-sf-danger-bg-color: #dc2626;
    --color-sf-danger-bg-color-hover: #b91c1c;
    --color-sf-danger-bg-color-pressed: #991b1b;
    --color-sf-danger-light-alt: #fef3f2;
    --color-sf-info: #0ea5e9;
    --color-sf-info-bg-color: #0ea5e9;

    --color-sf-content-text-color: #1e293b;
    --color-sf-content-text-color-alt1: #475569;
    --color-sf-content-text-color-alt2: #64748b;
    --color-sf-content-text-color-alt3: #94a3b8;
    --color-sf-content-text-color-disabled: #94a3b8;
    --color-sf-placeholder-text-color: #94a3b8;
    --color-sf-border-light: #eef2f7;
    --color-sf-border: #cbd5e1;
    --color-sf-border-hover: #94a3b8;
    --color-sf-border-error: #dc2626;
    --color-sf-border-success: #16a34a;
    --color-sf-border-warning: #d97706;
    --color-sf-content-bg-color-hover: #f7f9fc;
    --color-sf-content-bg-color-disabled: #f1f5f9;
    --color-sf-flyout-bg-color-hover: #f7f9fc;
    --color-sf-flyout-bg-color-focus: #f7f9fc;
    --color-sf-flyout-bg-color-selected: #eef4ff;
    --color-sf-table-bg-color-selected: #eef4ff;
    --color-sf-cell-selection-bg-color: #eef4ff;
    --color-sf-overlay-bg-color: rgb(15 23 42 / 55%);
}

/* ---------- Campos (altura e raio unicos, como o resto do i9Core) ---------- */

.i9-field-box { display: block; width: 100%; }
.i9-field-box .e-input-group,
.i9-field-box .e-input-group.e-control-wrapper {
    min-height: var(--i9-control-h, 32px);
    border-radius: var(--i9-radius, 8px);
    background: var(--i9-surface, #fff);
}
.i9-field-box .e-input-group input.e-input,
.i9-field-box .e-input-group textarea.e-input,
.i9-field-box .e-input-group .e-input { font-size: .84rem; color: var(--i9-text, #1e293b); }
.i9-field-box .e-input-group:not(.e-disabled):not(.e-input-focus):hover { border-color: var(--i9-border-strong, #cbd5e1); }
.i9-field-box .e-input-group.e-input-focus { border-color: var(--i9-primary, #2563eb); box-shadow: 0 0 0 3px rgb(37 99 235 / 15%); }
.i9-number input.e-input { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Botoes ---------- */

.i9-button.e-btn {
    min-height: var(--i9-control-h, 32px);
    border-radius: var(--i9-radius, 8px);
    font-weight: 500;
    font-size: .84rem;
    box-shadow: none;
}
.i9-button.e-btn.e-small { min-height: 28px; font-size: .78rem; padding: 0 10px; }
.i9-button.e-btn.e-link { background: transparent; border-color: transparent; color: var(--i9-primary, #2563eb); }
/* Botao so com icone: o icone ao centro (o e-icon-left do Syncfusion empurra-o para a esquerda). */
.i9-button.i9-button--icon.e-btn .e-btn-icon,
.i9-button.i9-button--icon.e-btn .e-btn-icon.e-icon-left { margin-left: 0; margin-right: 0; }
/* Icone escrito no texto do botao (ex.: "Seguinte >" do I9Pager): centrado na altura do texto, nao na linha de base. */
.i9-button.e-btn > .e-icons:not(.e-btn-icon) { vertical-align: middle; line-height: 1; margin-top: -2px; }
.i9-btn__spin {
    width: 12px; height: 12px; margin-right: 6px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; display: inline-block;
    animation: i9-spin .7s linear infinite; vertical-align: -2px;
}
@keyframes i9-spin { to { transform: rotate(360deg); } }

/* ---------- Interruptor ---------- */

.i9-switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .84rem; color: var(--i9-text, #1e293b); }

/* ---------- Dialogos ---------- */

.e-dialog.i9-dialog {
    border-radius: var(--i9-radius-lg, 12px);
    box-shadow: 0 20px 50px rgb(15 23 42 / 25%);
    max-height: 92vh;
}
.e-dialog.i9-dialog .e-dlg-header-content { padding: 16px 20px; border-bottom: 1px solid var(--i9-border, #e2e8f0); }
.e-dialog.i9-dialog .e-dlg-header { font-size: 1.05rem; font-weight: 700; color: var(--i9-text, #1e293b); }
.e-dialog.i9-dialog .e-dlg-content { padding: 18px 20px; color: var(--i9-text, #1e293b); font-size: .88rem; }
.e-dialog.i9-dialog .e-footer-content { padding: 12px 20px 16px; border-top: 1px solid var(--i9-border, #e2e8f0); }
.i9-dialog__footer { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* ---------- Grelha ---------- */

/* Cartao da grelha: moldura subtil, cantos redondos; a barra de ferramentas, a tabela e o paginador empilham-se la dentro. */
.i9-grid {
    position: relative; background: var(--i9-surface, #fff); border: 1px solid var(--i9-border, #e3e8ef);
    border-radius: var(--i9-radius-lg, 12px); box-shadow: var(--i9-shadow-xs); overflow: hidden;
}
/* Barra de progresso discreta quando se recarregam dados que ja estavam visiveis */
.i9-grid.is-loading::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
    background: linear-gradient(90deg, transparent, var(--i9-primary, #2563eb), transparent); background-size: 40% 100%;
    background-repeat: no-repeat; animation: i9-grid-progress 1.1s ease-in-out infinite;
}
@keyframes i9-grid-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.i9-grid .e-grid { border: 0; border-radius: 0; font-family: inherit; background: transparent; }
.i9-grid .e-grid .e-gridheader { border: 0; padding-right: 0 !important; }
.i9-grid .e-grid .e-headercontent { border: 0; }

/* Cabecalho: pequeno, em maiusculas suaves, sem fundo carregado */
.i9-grid .e-grid .e-headercell, .i9-grid .e-grid .e-columnheader .e-headercell {
    background: var(--i9-surface-2, #f8fafc);
    border: 0; border-bottom: 1px solid var(--i9-border, #e3e8ef);
    padding: 0 14px; height: 40px;
}
.i9-grid .e-grid .e-headercell:hover { background: var(--i9-surface-3, #f0f3f8); }
.i9-grid--clickable .e-grid .e-row { cursor: pointer; }
.i9-grid .e-grid .e-headercelldiv { padding: 0; margin: 0; }
.i9-grid .e-grid .e-headertext {
    font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--i9-text-2nd, #667085);
}
.i9-grid .e-grid .e-columnheader .e-sortfilterdiv { color: var(--i9-text-placeholder, #98a2b3); }
.i9-grid .e-grid .e-columnheader .e-sortfilterdiv.e-icons { font-size: 10px; }
.i9-grid .e-grid .e-headercell[aria-sort="ascending"] .e-headertext,
.i9-grid .e-grid .e-headercell[aria-sort="descending"] .e-headertext { color: var(--i9-primary-700, #1d4ed8); }
.i9-grid .e-grid .e-headercell .e-rhandler { height: 60% !important; top: 20%; }
.i9-grid .e-grid .e-rightalign .e-headercelldiv, .i9-grid .e-grid .e-headercell.e-rightalign { text-align: right; }

/* Linhas: espacamento folgado, separador horizontal fino, hover/seleccao discretos */
.i9-grid .e-grid .e-rowcell {
    font-size: .84rem; color: var(--i9-text, #172033); padding: 0 14px; height: 48px; line-height: 1.35;
    border: 0; border-bottom: 1px solid var(--i9-border-2, #edf0f5); font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.i9-grid .e-grid .e-row:last-child .e-rowcell { border-bottom: 0; }
.i9-grid .e-grid .e-row { cursor: default; }
.i9-grid .e-grid .e-row:hover .e-rowcell, .i9-grid .e-grid .e-row.e-hover .e-rowcell { background: var(--i9-primary-softer, #f6f9ff); }
.i9-grid .e-grid .e-row.e-active .e-rowcell, .i9-grid .e-grid .e-row[aria-selected="true"] .e-rowcell { background: var(--i9-primary-soft, #eef4ff); }
.i9-grid .e-grid .e-row.e-active .e-rowcell:first-child, .i9-grid .e-grid .e-row[aria-selected="true"] .e-rowcell:first-child { box-shadow: inset 3px 0 0 var(--i9-primary, #2563eb); }
.i9-grid .e-grid .e-rowcell.e-rightalign, .i9-grid .e-grid .e-rowcell.e-righttext { text-align: right; }
.i9-grid .e-grid .e-rowcell:first-child, .i9-grid .e-grid .e-headercell:first-child { padding-left: 18px; }
.i9-grid .e-grid .e-rowcell:last-child, .i9-grid .e-grid .e-headercell:last-child { padding-right: 18px; }
.i9-grid .e-grid .e-rowcell.e-selectionbackground, .i9-grid .e-grid td.e-active { background: var(--i9-primary-soft, #eef4ff); }
.i9-grid .e-grid .e-emptyrow td { padding: 0; height: auto; border: 0; }
.i9-grid .e-grid .e-emptyrow:hover td { background: transparent; }

/* Densidade compacta */
.i9-grid--compact .e-grid .e-rowcell { height: 34px; font-size: .8rem; }
.i9-grid--compact .e-grid .e-headercell, .i9-grid--compact .e-grid .e-columnheader .e-headercell { height: 34px; }

/* Caixas de selecao */
.i9-grid .e-grid .e-checkbox-wrapper .e-frame { border-radius: 4px; }
.i9-grid .e-grid .e-gridcheckselect { padding: 0; }
.i9-grid .e-grid .e-headercell.e-gridchkbox, .i9-grid .e-grid .e-rowcell.e-gridchkbox { padding: 0 0 0 16px; width: 44px; }
.i9-grid .e-grid .e-row.e-active .e-rowcell.e-gridchkbox { box-shadow: inset 3px 0 0 var(--i9-primary, #2563eb); }

/* Totais (rodape) */
.i9-grid .e-grid .e-summarycontent, .i9-grid .e-grid .e-gridfooter { border: 0; }
.i9-grid .e-grid .e-summaryrow .e-summarycell, .i9-grid .e-grid .e-summarycell {
    background: var(--i9-surface-2, #f8fafc); border: 0; border-top: 1px solid var(--i9-border, #e3e8ef);
    font-size: .84rem; font-weight: 650; color: var(--i9-text, #172033); height: 44px; padding: 0 14px;
    font-variant-numeric: tabular-nums; text-align: right;
}
.i9-grid__total { font-weight: 650; }

/* Colunas fixas: sombra suave na aresta */
.i9-grid .e-grid .e-leftfreeze.e-freezeleftborder, .i9-grid .e-grid .e-leftfreeze.e-freezerightborder { border-right: 1px solid var(--i9-border, #e3e8ef); }
.i9-grid .e-grid .e-rightfreeze.e-freezeleftborder { border-left: 1px solid var(--i9-border, #e3e8ef); }
.i9-grid .e-grid .e-row .e-leftfreeze, .i9-grid .e-grid .e-row .e-rightfreeze, .i9-grid .e-grid .e-row .e-fixedfreeze { background: var(--i9-surface, #fff); }
.i9-grid .e-grid .e-row:hover .e-leftfreeze, .i9-grid .e-grid .e-row:hover .e-rightfreeze, .i9-grid .e-grid .e-row:hover .e-fixedfreeze { background: var(--i9-primary-softer, #f6f9ff); }

.i9-grid__empty { text-align: center; color: var(--i9-text-2nd, #667085); padding: 1.6rem .9rem; font-size: .86rem; }
.i9-grid .i9-pager { border-top: 1px solid var(--i9-border, #e3e8ef); border-radius: 0; margin: 0; background: var(--i9-surface-2, #f8fafc); }

/* ---------- Paginador ---------- */

.i9-pager { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; font-size: .8rem; color: var(--i9-text-2nd, #64748b); flex-wrap: wrap; }
.i9-pager__size { display: inline-flex; align-items: center; gap: .4rem; }
.i9-pager__spacer { flex: 1; }
.i9-pager .i9-pager__select.e-input-group { min-height: 28px; }
.i9-pager__page { min-width: 5.5rem; text-align: center; }

/* ---------- Listas ---------- */

.i9-dropdown .e-ddl.e-input-group { width: 100%; }
.i9-select__empty { color: var(--i9-text-2nd, #64748b); padding: .5rem .75rem; display: block; }

/* ---------- Campos e listas «estilo Apple»: limpos, cantos macios, linha fina, foco suave, lista flutuante com vidro ----------
   Valem para todos os campos Syncfusion do i9Core (.i9-field-box): texto, número, data, lista e caixa pesquisável. */

.i9-field-box .e-input-group,
.i9-field-box .e-input-group.e-control-wrapper {
    min-height: 34px;
    /* !important: o tema Fluent 2 acerta no mesmo elemento com seletores :not(...) bem mais específicos (e linha de baixo mais grossa). */
    border: 1px solid var(--i9-border-strong, #cdd5df) !important;
    border-radius: 10px !important;
    background: var(--i9-surface, #fff);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.i9-field-box .e-input-group:not(.e-disabled):not(.e-input-focus):hover { border-color: #a9b4c4 !important; }
.i9-field-box .e-input-group.e-input-focus,
.i9-field-box .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--i9-primary, #2563eb) !important;
    box-shadow: 0 0 0 4px rgb(37 99 235 / 16%);
}
.i9-field-box .e-input-group.e-disabled { background: var(--i9-surface-2, #f8fafc); opacity: .7; }
.i9-field-box .e-input-group::before, .i9-field-box .e-input-group::after { display: none; }   /* sublinhado do tema Fluent */
.i9-field-box .e-input-group input.e-input,
.i9-field-box .e-input-group textarea.e-input {
    min-height: 32px; height: 32px; line-height: 32px; padding: 0 12px; font-size: .86rem; background: transparent;
}
.i9-field-box .e-input-group textarea.e-input { height: auto; line-height: 1.45; padding: 7px 12px; }
.i9-field-box .e-input-group input.e-input::placeholder { color: var(--i9-text-placeholder, #98a2b3); }

/* Valor mostrado numa lista (ValueTemplate): centrado na vertical, com reticências, sem colidir com a seta. */
.i9-dropdown .e-ddl.e-input-group { position: relative; display: flex; align-items: center; }
.i9-dropdown .e-ddl .e-input-value {
    position: absolute; inset: 0 34px 0 0; display: flex; align-items: center; padding: 0 0 0 12px;
    font-size: .86rem; color: var(--i9-text, #172033); overflow: hidden; white-space: nowrap; pointer-events: none;
}
.i9-dropdown .e-ddl .e-input-value > span { overflow: hidden; text-overflow: ellipsis; }
.i9-dropdown .e-ddl.e-input-group input.e-input { padding-right: 34px; cursor: pointer; }

/* Seta: o par de chevrons «subir/descer» do macOS, em vez da seta do tema. */
.i9-dropdown .e-input-group-icon.e-ddl-icon,
.i9-combo .e-input-group-icon.e-ddl-icon { min-width: 30px !important; width: 30px !important; margin: 0 0 0 auto !important; background: transparent; border: 0; display: grid; place-items: center; }
.i9-dropdown .e-input-group-icon.e-ddl-icon::before,
.i9-combo .e-input-group-icon.e-ddl-icon::before {
    content: ""; display: block; width: 14px; height: 14px; background: var(--i9-text-2nd, #667085); font-size: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.i9-dropdown .e-input-group:hover .e-ddl-icon::before,
.i9-combo .e-input-group:hover .e-ddl-icon::before { background: var(--i9-text, #172033); }
/* A cruz de limpar vai junto da seta (à direita); o valor ocupa o resto. !important: o tema Fluent 2 zera a margem com
   «.e-input-group.e-control-wrapper .e-clear-icon» e, com valor escolhido (o input fica escondido), cruz e seta iam
   para a esquerda, por cima do texto. */
.i9-dropdown .e-clear-icon, .i9-combo .e-clear-icon { opacity: .55; margin-left: auto !important; }
.i9-dropdown .e-ddl:has(.e-clear-icon:not(.e-clear-icon-hide)) .e-input-value { right: 62px; }
/* O tema roda a seta 180° ao abrir; com o par de chevrons parecia um ícone a girar. */
.i9-dropdown .e-ddl-icon, .i9-dropdown .e-ddl-icon::before,
.i9-combo .e-ddl-icon, .i9-combo .e-ddl-icon::before { transform: none !important; transition: none !important; }
.i9-dropdown .e-clear-icon:not(.e-clear-icon-hide) ~ .e-ddl-icon, .i9-combo .e-clear-icon:not(.e-clear-icon-hide) ~ .e-ddl-icon { margin-left: 0 !important; }
.i9-dropdown .e-clear-icon.e-clear-icon-hide, .i9-combo .e-clear-icon.e-clear-icon-hide { display: none; }
.i9-dropdown .e-clear-icon:hover, .i9-combo .e-clear-icon:hover { opacity: 1; }

/* Listas e calendarios dos I9Select/I9Combo/I9DatePicker sempre por cima dos dialogos (2300 > 2200), mesmo que a app
   baixe o z-index generico das listas Syncfusion (senao, dentro de um I9Modal, a lista abria escondida por tras). */
body .e-popup.e-popup-open.i9-select-pop, body .e-popup.e-popup-open.i9-combo-pop, body .e-popup-wrapper.i9-date-pop { z-index: 2300 !important; }

/* Lista que abre (popup): cartão flutuante com cantos grandes, sombra em camadas e opções arredondadas. */
.e-popup.e-ddl.e-popup-open, .e-popup.i9-combo-pop, .e-popup.i9-select-pop {
    margin-top: 6px; border: 1px solid rgb(16 24 40 / 10%); border-radius: 14px; overflow: hidden; padding: 0;
    background: color-mix(in srgb, var(--i9-surface, #fff) 94%, transparent); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 2px 6px rgb(16 24 40 / 6%), 0 18px 44px -12px rgb(16 24 40 / 28%);
}
.e-popup.e-ddl .e-content, .e-popup.i9-combo-pop .e-content { padding: 6px; }
.e-popup.e-ddl .e-list-parent, .e-popup.i9-combo-pop .e-list-parent { padding: 0; margin: 0; }
.e-popup.e-ddl .e-list-item, .e-popup.i9-combo-pop .e-list-item {
    position: relative; min-height: 34px; line-height: 20px; margin: 1px 0; padding: 7px 32px 7px 12px;
    border: 0; border-radius: 8px; font-size: .86rem; color: var(--i9-text, #172033); transition: background-color .1s ease;
}
.e-popup.e-ddl .e-list-item.e-hover, .e-popup.i9-combo-pop .e-list-item.e-hover,
.e-popup.e-ddl .e-list-item.e-item-focus, .e-popup.i9-combo-pop .e-list-item.e-item-focus { background: var(--i9-surface-3, #f0f3f8); color: var(--i9-text, #172033); }
.e-popup.e-ddl .e-list-item.e-active, .e-popup.i9-combo-pop .e-list-item.e-active {
    background: var(--i9-primary-soft, #eef4ff); color: var(--i9-primary-700, #1e40af); font-weight: 600;
}
/* Visto à direita da opção escolhida. */
.e-popup.e-ddl .e-list-item.e-active::after, .e-popup.i9-combo-pop .e-list-item.e-active::after {
    content: ""; position: absolute; right: 11px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--i9-primary, #2563eb);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Caixa de pesquisa dentro da lista. */
.e-popup.e-ddl .e-filter-parent { padding: 8px 8px 2px; background: transparent; border: 0; }
.e-popup.e-ddl .e-filter-parent .e-input-group { min-height: 34px; border: 1px solid var(--i9-border-strong, #cdd5df); border-radius: 10px; background: var(--i9-surface-2, #f8fafc); }
.e-popup.e-ddl .e-filter-parent .e-input-group.e-input-focus { border-color: var(--i9-primary, #2563eb); box-shadow: 0 0 0 4px rgb(37 99 235 / 16%); background: var(--i9-surface, #fff); }
.e-popup.e-ddl .e-filter-parent .e-input-group::before, .e-popup.e-ddl .e-filter-parent .e-input-group::after { display: none; }
.e-popup.e-ddl .e-filter-parent .e-input-group input.e-input { height: 32px; line-height: 32px; padding: 0 10px; font-size: .86rem; }
.i9-combo-pop .i9-combo__opt { padding: 0; }
.i9-combo-pop .e-list-item.e-active .i9-combo__label { color: var(--i9-primary-700, #1e40af); }

@media (prefers-reduced-motion: reduce) {
    .i9-field-box .e-input-group, .e-popup .e-list-item { transition: none; }
}

/* ---------- Mensagens flutuantes ---------- */

.e-toast-container.i9-toast-host { z-index: 2500 !important; }
.e-toast.i9-toast { border-radius: var(--i9-radius, 8px); box-shadow: 0 8px 24px rgb(15 23 42 / 18%); border-left: 4px solid var(--i9-info, #0ea5e9); }
.e-toast.i9-toast--success { border-left-color: var(--i9-success, #16a34a); }
.e-toast.i9-toast--warning { border-left-color: var(--i9-warning, #d97706); }
.e-toast.i9-toast--error { border-left-color: var(--i9-danger, #dc2626); }

/* ---------- Ajustes finos ---------- */

.e-checkbox-wrapper { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; }
.e-checkbox-wrapper .e-label { margin: 0; }

/* ---------- Correcoes de colisao com o CSS antigo e com o markup do Syncfusion ---------- */

/* O .i9-form-grid label (antigo) empilha o texto; o SfCheckBox/I9Switch tem o seu proprio label. */
.i9-form-grid .e-checkbox-wrapper,
.i9-form-grid .e-checkbox-wrapper label { display: inline-flex; flex-direction: row; align-items: center; gap: .45rem; }
.i9-number .e-input-group,
.i9-number .e-input-group input.e-input { width: 100%; min-width: 0; }
.i9-switch__label { cursor: pointer; user-select: none; }

.i9-search-box { max-width: 360px; min-width: 220px; flex: 1; }

/* O grupo do Syncfusion ja desenha o proprio anel de foco: o contorno global (:focus-visible) nao se repete no <input> de dentro. */
.e-input-group input.e-input:focus-visible,
.e-input-group textarea.e-input:focus-visible,
.e-input-group .e-input:focus-visible { outline: none; }

/* =========================== Tema escuro dos componentes Syncfusion ===========================
   O tema carregado (fluent2.css) e o claro; no escuro so se trocam as variaveis --color-sf-* (o resto deriva delas). */
html[data-theme="dark"] {
    --color-sf-primary-light: #1e3a5f;
    --color-sf-primary-lighter: #172554;
    --color-sf-primary-cell-selection: #1e3a5f;
    --color-sf-content-bg-color: #121a2b;
    --color-sf-content-bg-color-alt1: #161f33;
    --color-sf-content-bg-color-alt2: #0e1626;
    --color-sf-content-bg-color-alt3: #1c273d;
    --color-sf-content-bg-color-alt4: #0e1626;
    --color-sf-content-bg-color-alt5: #0a101d;
    --color-sf-content-bg-color-alt6: #0a101d;
    --color-sf-content-bg-color-hover: #1c273d;
    --color-sf-content-bg-color-pressed: #243044;
    --color-sf-content-bg-color-focus: #1c273d;
    --color-sf-content-bg-color-selected: #1e3a5f;
    --color-sf-content-bg-color-dragged: #172554;
    --color-sf-content-bg-color-disabled: #0e1626;
    --color-sf-flyout-bg-color: #161f33;
    --color-sf-flyout-bg-color-hover: #1c273d;
    --color-sf-flyout-bg-color-pressed: #243044;
    --color-sf-flyout-bg-color-selected: #1e3a5f;
    --color-sf-flyout-bg-color-focus: #1c273d;
    --color-sf-overlay-bg-color: rgb(2 6 15 / 65%);
    --color-sf-table-bg-color-hover: #172554;
    --color-sf-table-bg-color-pressed: #1e3a5f;
    --color-sf-table-bg-color-selected: #1e3a5f;
    --color-sf-content-text-color: #e8eef8;
    --color-sf-content-text-color-alt1: #c5d0e0;
    --color-sf-content-text-color-alt2: #93a0b5;
    --color-sf-content-text-color-alt3: #6b7a90;
    --color-sf-content-text-color-disabled: #56647a;
    --color-sf-placeholder-text-color: #6b7a90;
    --color-sf-icon-color: #c5d0e0;
    --color-sf-border-light: #1c2638;
    --color-sf-border: #334155;
    --color-sf-border-alt: #93a0b5;
    --color-sf-border-dark: #475569;
    --color-sf-border-hover: #475569;
    --color-sf-border-pressed: #64748b;
    --color-sf-border-selected: #475569;
    --color-sf-border-disabled: #243044;
    --color-sf-flyout-border: #243044;
    --color-sf-secondary-bg-color: #161f33;
    --color-sf-secondary-border-color: #334155;
    --color-sf-secondary-bg-color-hover: #1c273d;
    --color-sf-secondary-border-color-hover: #475569;
    --color-sf-secondary-bg-color-pressed: #243044;
    --color-sf-secondary-border-color-pressed: #64748b;
    --color-sf-secondary-bg-color-selected: #1e3a5f;
    --color-sf-secondary-bg-color-disabled: #0e1626;
    --color-sf-secondary-border-color-disabled: #243044;
    --color-sf-secondary-text-color-selected: #e8eef8;
    --color-sf-primary-bg-color-disabled: #1e3a5f;
    --color-sf-primary-text-disabled: #6b7a90;
}
html[data-theme="dark"] .i9-grid .e-grid .e-row:hover .e-rowcell { background: var(--i9-primary-softer); }
html[data-theme="dark"] .e-dialog.i9-dialog { box-shadow: 0 20px 50px rgb(0 0 0 / 55%); }

/* Linha selecionada (tambem com o rato por cima): fundo suave, nunca o azul do tema. */
.i9-grid .e-grid .e-row .e-rowcell.e-selectionbackground,
.i9-grid .e-grid .e-row:hover .e-rowcell.e-selectionbackground,
.i9-grid .e-grid .e-row .e-rowcell.e-active { background-color: var(--i9-primary-soft, #eef4ff); color: var(--i9-text, #172033); }
.i9-grid .e-grid .e-row:hover .e-rowcell.e-selectionbackground { background-color: color-mix(in srgb, var(--i9-primary-soft, #eef4ff) 82%, var(--i9-primary, #2563eb) 6%); }