/*
 * SGA — superfícies de diálogo, seleção e filtros.
 * Somente apresentação: não controla abertura, envio, seleção ou permissões.
 * Os nomes legados são adaptadores explícitos, inclusive para conteúdo AJAX.
 */
body.sga-interface {
  --sga-ui-surface: #202225;
  --sga-ui-header: #252629;
  --sga-ui-field: #2b2d31;
  --sga-ui-border: #45474b;
  --sga-ui-text: #eeeef0;
  --sga-ui-muted: #b4b6bc;
  --sga-ui-accent: #e8ad80;
  --sga-ui-selected: #38312c;
  --sga-ui-hover: #34363a;
  --sga-ui-ring: rgba(225, 153, 96, .14);
}

/* Superfícies: nenhuma regra de display/visibility nos controladores de modal. */
:root body.sga-interface :is(
  .modal-panel, .modal-window, .device-edit-modal, .sga-modal-card,
  .drive-modal-card, .kb-modal-card, .cfg-template-dialog, .cud-modal,
  .im-modal-dialog, .wp-modal-dialog, .wu-schedule-dialog, .wc-category-dialog,
  .wa-modal-box, .sr-chat-dialog, .sta-dialog, .us-modal-dialog, .nb-modal-card,
  dialog.nd-modal:not(.nd-map-dialog)
) {
  color-scheme: dark;
  color: var(--sga-ui-text) !important;
  background: var(--sga-ui-surface) !important;
  border: 1px solid var(--sga-ui-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55) !important;
  scrollbar-width: thin;
  scrollbar-color: #606166 var(--sga-ui-surface);
  overscroll-behavior: contain;
}
:root body.sga-interface :is(
  .modal-panel, .modal-window, .device-edit-modal, .sga-modal-card,
  .drive-modal-card, .kb-modal-card, .cfg-template-dialog, .cud-modal,
  .im-modal-dialog, .wu-schedule-dialog, .sta-dialog, .us-modal-dialog
):not(.tech-modal > .modal-panel) {
  max-height: calc(100dvh - 40px) !important;
}
:root body.sga-interface :is(.sga-modal-card, .wu-schedule-dialog, .sta-dialog) {
  overflow-y: auto;
}
:root body.sga-interface :is(
  .modal-backdrop, .modal-overlay, .device-edit-modal-backdrop,
  .drive-modal-backdrop, .kb-modal, .cud-backdrop,
  .sga-modal-backdrop, .im-modal-backdrop, .wp-modal-backdrop,
  .wu-schedule-backdrop, .wc-category-backdrop, .wa-modal-backdrop,
  .sr-chat-backdrop, .nb-modal-backdrop, .us-modal-backdrop
) {
  background: rgba(5, 6, 8, .72) !important;
  backdrop-filter: blur(6px);
}
/* Os modais antigos de Conhecimento/Ajustes não podem ficar atrás da sidebar. */
:root body.sga-interface :is(.kb-modal, .sga-modal) { z-index: 11000; }
:root body.sga-interface dialog.nd-modal::backdrop {
  background: rgba(5, 6, 8, .72);
  backdrop-filter: blur(6px);
}

/* Cabeçalhos, com uma faixa discreta da identidade SGA. */
:root body.sga-interface :is(
  .modal-panel > .modal-header, .modal-panel > .modal-head,
  .modal-window > .modal-head, .device-edit-head, .sga-modal-head,
  .drive-modal-head, .kb-modal-head, .cfg-template-head, .cud-head,
  .im-modal-dialog > header, .wp-modal-head, .wu-schedule-head,
  .wc-category-dialog > header, .wa-modal-box > header, .sr-chat-head,
  .sta-dialog > header, .us-modal-dialog > header, .nb-modal-header,
  dialog.nd-modal > header
) {
  background: radial-gradient(ellipse at 0 0, rgba(117, 77, 47, .19), transparent 68%), var(--sga-ui-header) !important;
  border-bottom: 1px solid #3d3f43 !important;
  color: var(--sga-ui-text) !important;
  gap: 16px;
}
/* Diálogos cujo painel já tem margem interna. */
:root body.sga-interface :is(.modal-panel, .modal-window):not(.tech-modal > .modal-panel) {
  --sga-dialog-pad: 24px;
  padding: var(--sga-dialog-pad) !important;
}
:root body.sga-interface :is(.modal-panel > .modal-header, .modal-panel > .modal-head, .modal-window > .modal-head) {
  position: sticky;
  top: calc(-1 * var(--sga-dialog-pad, 24px));
  z-index: 3;
  margin: calc(-1 * var(--sga-dialog-pad, 24px)) calc(-1 * var(--sga-dialog-pad, 24px)) 20px !important;
  padding: 20px var(--sga-dialog-pad, 24px) !important;
}
:root body.sga-interface :is(.device-edit-head, .sga-modal-head, .cfg-template-head, .cud-head) {
  padding: 14px;
  border-radius: 12px;
}
:root body.sga-interface :is(.drive-modal-head, .kb-modal-head, .im-modal-dialog > header, .wa-modal-box > header) {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 20px 24px !important;
  flex-shrink: 0;
}
:root body.sga-interface :is(
  .modal-header, .modal-head, .sga-modal-head, .drive-modal-head,
  .kb-modal-head, .cfg-template-head, .cud-head, .wp-modal-head, .wu-schedule-head,
  .wc-category-dialog > header, .im-modal-dialog > header, .wa-modal-box > header
) :is(h2, h3) {
  color: var(--sga-ui-text) !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  letter-spacing: -.02em;
  line-height: 1.25;
}
:root body.sga-interface :is(.modal-header, .modal-head, .cfg-template-head, .wp-modal-head, .wu-schedule-head) :is(p, small) {
  color: var(--sga-ui-muted) !important;
  line-height: 1.5;
}
:root body.sga-interface :is(
  .modal-close, .device-edit-close, .drive-close-x, .cud-close,
  .wp-modal-close, .wu-schedule-close, .kb-modal-head > button,
  .sga-modal-head > button, .im-modal-dialog > header > button,
  .wa-modal-box > header > button, .cfg-template-head > button
) {
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  border: 1px solid #505054 !important;
  border-radius: 10px !important;
  background: #303135 !important;
  color: #dddde1 !important;
  box-shadow: none !important;
}
/* Mantém os editores/tabelas com seu próprio scroll e as ações acessíveis. */
:root body.sga-interface .drive-modal-card {
  display: flex;
  flex-direction: column;
}
:root body.sga-interface .drive-modal-body { min-height: 0; overflow-y: auto; }
:root body.sga-interface :is(.drive-modal-head, .drive-modal-foot) { flex: none; }
:root body.sga-interface .wp-schedule-form { min-height: 0; overflow-y: auto; }
:root body.sga-interface :is(
  .modal-panel .modal-actions, .modal-window .modal-actions,
  .drive-modal-foot, .kb-modal-actions, .sga-modal-actions, .cud-actions, .device-edit-actions,
  .wp-schedule-form > .wp-form-actions,
  .cfg-template-dialog .modal-actions, .wa-ticket-form > footer,
  .im-modal-dialog form > footer, .wu-schedule-actions, .sta-dialog-actions
) {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--sga-ui-header) !important;
  border-top: 1px solid #3d3f43 !important;
  padding: 14px 16px !important;
  gap: 10px;
  border-radius: 0 0 12px 12px;
}

/* Campos dentro de diálogos. Nunca inclui checkbox, radio, hidden ou submit. */
:root body.sga-interface :is(
  .modal-panel, .modal-window, .device-edit-modal, .sga-modal-card,
  .drive-modal-card, .kb-modal-card, .cfg-template-dialog, .cud-modal,
  .im-modal-dialog, .wp-modal-dialog, .wu-schedule-dialog, .wc-category-dialog,
  .wa-modal-box, .sta-dialog, dialog.nd-modal
) :is(
  input:not([type]), input[type=text], input[type=email], input[type=password],
  input[type=search], input[type=tel], input[type=url], input[type=number],
  input[type=date], input[type=time], input[type=datetime-local], select, textarea
) {
  background-color: var(--sga-ui-field) !important;
  color: var(--sga-ui-text) !important;
  border: 1px solid var(--sga-ui-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  color-scheme: dark;
}
:root body.sga-interface :is(.modal-panel, .modal-window, .kb-modal-card, .drive-modal-card) :is(input, textarea)::placeholder {
  color: #9da0a7;
}

/* Editor de descrição do novo chamado: mesma paleta dos demais campos. */
:root body.sga-interface .modal-panel .create-editor-toolbar {
  background: var(--sga-ui-header) !important;
  border-color: var(--sga-ui-border) !important;
}
:root body.sga-interface .modal-panel :is(.create-editor, .create-editor-tool, .create-quick-trigger) {
  background: var(--sga-ui-field) !important;
  border-color: var(--sga-ui-border) !important;
  color: var(--sga-ui-text) !important;
}
:root body.sga-interface .modal-panel :is(.create-editor-tool, .create-quick-trigger):is(:hover, [aria-expanded=true]) {
  background: var(--sga-ui-hover) !important;
  border-color: #76604d !important;
  color: var(--sga-ui-text) !important;
}
:root body.sga-interface .modal-panel .create-quick-trigger span {
  color: var(--sga-ui-muted) !important;
}
:root body.sga-interface .modal-panel .create-quick-menu {
  background: #27292d !important;
  border-color: var(--sga-ui-border) !important;
}
:root body.sga-interface .modal-panel .create-quick-option {
  color: var(--sga-ui-text) !important;
}
:root body.sga-interface .modal-panel .create-quick-option:is(:hover, :focus) {
  background: var(--sga-ui-hover) !important;
}
:root body.sga-interface .modal-panel .create-editor:empty::before {
  color: var(--sga-ui-muted) !important;
}
:root body.sga-interface .modal-panel .create-editor a {
  color: var(--sga-ui-accent) !important;
  text-decoration: underline;
}

/* Filtros — inclui listas AJAX e filtros que não são formulários GET. */
:root body.sga-interface :is(
  form[method=get], .sga-filter-panel, .sga-filter-grid, .sga-filters,
  .filters, .noc-filters, .audit-filters-v2, .auto-list-filters,
  .tickets-filter-panel, .inbox-filters, .hours-filters, .history-filters,
  .pol-filters, .report-filter, .inv-filter-card, .sga-agent-filterbar,
  .wc-live-filters, .wc-device-filters, .wc-event-filters, .wc-report-filters,
  .sga-rr-filters, .wp-filters, .wu-update-filters, .us-filters,
  .nd-map-filters, .nd-map-filterbar, .nd-inventory-filter, .ai-history-filters,
  .nb-modal-tools
) {
  background: var(--sga-ui-header) !important;
  border-color: #3d3f43 !important;
  border-radius: 14px;
  box-shadow: none !important;
}
:root body.sga-interface :is(
  form[method=get], .sga-filter-panel, .sga-filter-grid, .sga-filters,
  .filters, .noc-filters, .audit-filters-v2, .auto-list-filters,
  .tickets-filter-panel, .inbox-filters, .hours-filters, .history-filters,
  .pol-filters, .report-filter, .inv-filter-card, .sga-agent-filterbar,
  .wc-live-filters, .wc-device-filters, .wc-event-filters, .wc-report-filters,
  .sga-rr-filters, .wp-filters, .wu-update-filters, .us-filters,
  .nd-map-filters, .nd-map-filterbar, .nd-inventory-filter, .ai-history-filters,
  .nb-modal-tools
) :is(input:not([type]), input[type=text], input[type=search], input[type=date], input[type=datetime-local], input[type=number], select) {
  background-color: var(--sga-ui-field) !important;
  color: var(--sga-ui-text) !important;
  border: 1px solid var(--sga-ui-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  color-scheme: dark;
}

/* Adaptadores dos dropdowns existentes: não recria selects nem muda eventos. */
:root body.sga-interface :is(
  .custom-select-trigger, .sga-custom-select-trigger, .wa-custom-select-button,
  .audit-custom-select-button, .sga-select-button, .sga-select-trigger,
  .sga-select-btn, .hd-theme-select-btn, .sr-custom-select > button
) {
  background: var(--sga-ui-field) !important;
  border: 1px solid var(--sga-ui-border) !important;
  border-radius: 10px !important;
  color: var(--sga-ui-text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-align: left;
  text-shadow: none !important;
  filter: none !important;
}
:root body.sga-interface :is(
  .custom-select-menu, .sga-custom-select-options, .wa-custom-select-options,
  .audit-custom-select-list, .sga-select-menu, .hd-theme-select-menu,
  .sr-custom-options, .wc-category-select-menu, .wc-device-select-menu
) {
  background: #27292d !important;
  border: 1px solid #4b4d52 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42) !important;
  padding: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: #64656a #27292d;
  color-scheme: dark;
}
:root body.sga-interface :is(
  .custom-select-option, .sga-custom-select-option, .wa-custom-select-option,
  .audit-custom-option, .sga-select-option, .sga-select-menu > button,
  .hd-theme-select-option, .sr-custom-options > button
) {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #dedee2 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
:root body.sga-interface :is(
  .custom-select-option, .sga-custom-select-option, .wa-custom-select-option,
  .audit-custom-option, .sga-select-option, .sga-select-menu > button,
  .hd-theme-select-option, .sr-custom-options > button
):is(:hover, :focus-visible, .is-focused) {
  background: var(--sga-ui-hover) !important;
  color: #fff !important;
}
:root body.sga-interface :is(
  .custom-select-option, .sga-custom-select-option, .wa-custom-select-option,
  .audit-custom-option, .sga-select-option, .sga-select-menu > button,
  .hd-theme-select-option, .sr-custom-options > button
):is(.is-selected, .selected, .active, [aria-selected=true]) {
  background: var(--sga-ui-selected) !important;
  border-color: #76604d !important;
  color: #f1c6a4 !important;
  box-shadow: inset 3px 0 0 #bc8458 !important;
}
:root body.sga-interface select:not([multiple]) {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #bab7b3 50%), linear-gradient(135deg, #bab7b3 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important;
  background-size: 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 34px !important;
  background-color: var(--sga-ui-field) !important;
  color: var(--sga-ui-text) !important;
  border-color: var(--sga-ui-border) !important;
  border-radius: 10px !important;
  color-scheme: dark;
}
:root body.sga-interface select option { background: #27292d !important; color: #eeeef0 !important; }
:root body.sga-interface select option:checked { background: var(--sga-ui-selected) !important; color: #f1c6a4 !important; }
:root body.sga-interface :is(.custom-select-trigger, .sga-select-button)::after { border-top-color: #bab7b3 !important; }
:root body.sga-interface :is(.wa-custom-select-arrow, .custom-select-arrow, .sga-custom-select-trigger i) { color: #bab7b3 !important; }
:root body.sga-interface :is(.custom-select-menu, .sga-custom-select-options, .wa-custom-select-options, .sga-select-menu)::-webkit-scrollbar-thumb { background: #64656a !important; border-color: #27292d !important; }
:root body.sga-interface :is(.custom-select-menu, .sga-custom-select-options, .wa-custom-select-options, .sga-select-menu)::-webkit-scrollbar-track { background: #27292d !important; }

/* Foco perceptível, sem preenchimento laranja; estados desabilitados preservados. */
:root body.sga-interface .custom-select.opens-up > .custom-select-menu {
  top: auto;
  bottom: calc(100% + 8px);
}
:root body.sga-interface .custom-select.is-open { z-index: 6; }
/* Acima do cabeçalho sticky (8), abaixo dos drawers/modais de dispositivos. */
:root body.sga-interface.hd-devices-list .noc-toolbar-card {
  position: relative;
  z-index: 10;
}
:root body.sga-interface :is(
  .custom-select-trigger, .sga-custom-select-trigger, .wa-custom-select-button,
  .audit-custom-select-button, .sga-select-button, .sga-select-trigger,
  .sga-select-btn, .hd-theme-select-btn, .sr-custom-select > button,
  select, form[method=get] input,
  .modal-panel input, .modal-panel select, .modal-panel textarea,
  .modal-panel .create-editor, .modal-panel .create-editor-tool,
  .modal-panel .create-quick-trigger, .modal-panel .create-quick-option,
  .kb-modal-card input, .kb-modal-card textarea, .drive-form-control
):focus-visible {
  outline: 2px solid #c09270 !important;
  outline-offset: 2px;
  border-color: #9b785c !important;
  box-shadow: 0 0 0 3px var(--sga-ui-ring) !important;
}
:root body.sga-interface :is(.custom-select-trigger, .sga-custom-select-trigger, .wa-custom-select-button):disabled {
  color: #999ba1 !important;
  background: #26282c !important;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  :root body.sga-interface :is(.modal-panel, .modal-window):not(.tech-modal > .modal-panel) { --sga-dialog-pad: 16px; }
  :root body.sga-interface :is(.drive-modal-head, .kb-modal-head, .im-modal-dialog > header, .wa-modal-box > header) { padding: 16px !important; }
  :root body.sga-interface :is(.drive-modal-foot, .kb-modal-actions, .sga-modal-actions, .cud-actions, .wu-schedule-actions) { flex-wrap: wrap; }
  :root body.sga-interface :is(.drive-modal-foot, .kb-modal-actions, .sga-modal-actions, .cud-actions, .wu-schedule-actions) > :is(button, .btn) { min-height: 42px; }
}
/* Conteúdo interno de cadastros: separação por superfície, não por saturação. */
:root body.sga-interface .modal-panel :is(.popup-card, .services-box, .devices-box, .sla-box, .list-row),
:root body.sga-interface .kb-modal-card .kb-editor {
  background: #282a2e !important;
  border-color: #404247 !important;
  color: var(--sga-ui-text) !important;
}
:root body.sga-interface :is(.wc-category-close, .nb-modal-header button, .us-modal-dialog > header > button) {
  background: #303135 !important;
  border-color: #505054 !important;
  color: #dddde1 !important;
}
@media (prefers-reduced-motion: reduce) {
  :root body.sga-interface :is(.modal-panel, .modal-window, .custom-select-trigger, .custom-select-option) { animation: none !important; transition: none !important; }
}