/* FortiGate Inventory Design System V3.1
 * Polimento fino: consistência de telas, relatórios, mensagens e tabelas longas.
 * Camada incremental sobre a V3, sem alterar regra de negócio.
 */

/* 1) Cabeçalhos de seção existentes: melhora hierarquia sem criar novo fluxo */
.content-header,
.page-title,
.section-title,
.ds-card-shell .ds-card-header,
.ds-card-header.py-3,
.ds-card-header:first-child {
  letter-spacing: -0.01em;
}

.ds-card-shell .ds-card-header,
.ds-card-header.py-3 {
  background: linear-gradient(180deg, rgba(249, 250, 251, 0.96), rgba(255, 255, 255, 0.98));
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
}

.ds-card-shell .ds-card-header h6,
.ds-card-header .m-0,
.ds-card-header h6 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ds-text-strong, #111827);
}

/* 2) Blocos de filtro e formulários: espaçamento mais consistente */
.ds-card-body .ds-form-row,
.ds-card-body .ds-row.align-items-end,
.ds-filter-row {
  row-gap: 0.85rem;
}

.form-group label,
label.form-label,
.ds-form-label {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-muted-strong, #4b5563);
}

.ds-form-control,
.ds-form-control,
select.form-control,
textarea.form-control {
  min-height: 2.35rem;
}

textarea.form-control {
  line-height: 1.45;
}

/* 3) Área de relatório/análise: status visual mais claro quando usar cards/listas */
.report-readiness,
.report-status,
.analysis-status,
.quality-check,
.report-quality,
#reportReadiness,
#reportQualityStatus {
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: var(--ds-radius-lg, 0.75rem);
  background: var(--ds-surface-soft, #f9fafb);
  padding: 1rem;
}

.report-readiness .ds-badge,
.report-status .ds-badge,
.analysis-status .ds-badge,
.quality-check .ds-badge,
.report-quality .ds-badge {
  font-weight: 700;
}

/* 4) Mensagens de erro/sucesso: aparência mais profissional */
.ds-alert {
  border-radius: var(--ds-radius-lg, 0.75rem);
  border-width: 1px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.ds-alert--success {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065f46;
}

.ds-alert--danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.24);
  color: #991b1b;
}

.ds-alert--warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.28);
  color: #92400e;
}

.ds-alert--info {
  background: rgba(6, 182, 212, 0.09);
  border-color: rgba(6, 182, 212, 0.25);
  color: #155e75;
}

/* 5) Tabelas longas: leitura melhor para achados, higienização e logs */
.ds-table thead th,
.dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ds-table-head-bg, #f9fafb);
}

.ds-table td,
.ds-table th {
  vertical-align: middle;
}

.ds-table td .ds-button,
.ds-table .ds-button--sm {
  white-space: nowrap;
}

.ds-table-wrap {
  border-radius: var(--ds-radius-lg, 0.75rem);
}

.ds-table-wrap > .ds-table {
  margin-bottom: 0;
}

/* Limita células textuais muito longas sem ocultar totalmente */
.ds-table td.long-text,
.ds-table td.description,
.ds-table td.recommendation,
.ds-table td.evidence,
.ds-table td:nth-child(3):not(:last-child),
.ds-table td:nth-child(4):not(:last-child) {
  max-width: 34rem;
  overflow-wrap: anywhere;
}

/* 6) Badges/status legíveis e consistentes */
.ds-badge,
.status-pill,
.ds-badge {
  letter-spacing: 0.01em;
}

.ds-badge--danger,
.badge-critical,
.badge-p3,
.status-critical,
.priority-p3 {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.ds-badge--warning,
.badge-p2,
.status-warning,
.priority-p2 {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.ds-badge--success,
.badge-p1,
.status-success,
.priority-p1 {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
}

/* 7) Botões de ação em grupos: menos poluição visual */
.ds-button-toolbar,
.action-toolbar,
.ds-table-actions,
.ds-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ds-button + .ds-button {
  margin-left: 0.25rem;
}

.ds-button-toolbar .ds-button + .ds-button,
.action-toolbar .ds-button + .ds-button,
.ds-table-actions .ds-button + .ds-button,
.ds-actions .ds-button + .ds-button,
.ds-input-group .ds-button + .ds-button {
  margin-left: 0;
}

/* 8) Empty states V3.1: mais direcionados sem JS */
.ds-empty-state,
.empty-state,
.no-data,
.ds-table-empty,
[data-empty-state="true"] {
  border: 1px dashed var(--ds-border, #d1d5db);
  border-radius: var(--ds-radius-xl, 1rem);
  background: var(--ds-surface-soft, #f9fafb);
  padding: 1.5rem;
  text-align: center;
  color: var(--ds-muted, #6b7280);
}

.ds-empty-state strong,
.empty-state strong,
.no-data strong,
.ds-table-empty strong {
  color: var(--ds-text-strong, #111827);
}

/* 9) Login: acabamento sem alterar estrutura */
.login-card,
.ds-card-shell.o-hidden.border-0.shadow-lg {
  border-radius: 1.25rem !important;
  overflow: hidden;
}

.login-card .ds-card-body,
.ds-card-shell.o-hidden.border-0.shadow-lg .ds-card-body {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,251,0.94));
}

/* 10) Dark mode V3.1 */
body.app-dark-mode .ds-card-shell .ds-card-header,
body.app-dark-mode .ds-card-header.py-3 {
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.98));
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body.app-dark-mode .ds-card-shell .ds-card-header h6,
body.app-dark-mode .ds-card-header .m-0,
body.app-dark-mode .ds-card-header h6 {
  color: #f9fafb;
}

body.app-dark-mode .form-group label,
body.app-dark-mode label.form-label,
body.app-dark-mode .ds-form-label {
  color: #cbd5e1;
}

body.app-dark-mode .report-readiness,
body.app-dark-mode .report-status,
body.app-dark-mode .analysis-status,
body.app-dark-mode .quality-check,
body.app-dark-mode .report-quality,
body.app-dark-mode #reportReadiness,
body.app-dark-mode #reportQualityStatus,
body.app-dark-mode .ds-empty-state,
body.app-dark-mode .empty-state,
body.app-dark-mode .no-data,
body.app-dark-mode .ds-table-empty,
body.app-dark-mode [data-empty-state="true"] {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.20);
  color: #cbd5e1;
}

body.app-dark-mode .ds-empty-state strong,
body.app-dark-mode .empty-state strong,
body.app-dark-mode .no-data strong,
body.app-dark-mode .ds-table-empty strong {
  color: #f9fafb;
}

body.app-dark-mode .ds-table thead th,
body.app-dark-mode .dataTable thead th {
  background: #111827;
}

body.app-dark-mode .ds-alert--success {
  background: rgba(16, 185, 129, 0.13);
  color: #a7f3d0;
}
body.app-dark-mode .ds-alert--danger {
  background: rgba(239, 68, 68, 0.13);
  color: #fecaca;
}
body.app-dark-mode .ds-alert--warning {
  background: rgba(245, 158, 11, 0.13);
  color: #fde68a;
}
body.app-dark-mode .ds-alert--info {
  background: rgba(6, 182, 212, 0.13);
  color: #a5f3fc;
}

/* 11) Responsividade fina */
@media (max-width: 991.98px) {
  .ds-card-body {
    padding: 1rem;
  }

  .ds-button-toolbar,
  .action-toolbar,
  .ds-table-actions,
  .ds-actions {
    width: 100%;
  }

  .ds-button-toolbar .ds-button,
  .action-toolbar .ds-button,
  .ds-actions .ds-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .ds-card-shell .ds-card-header,
  .ds-card-header.py-3 {
    padding: 0.85rem 1rem;
  }

  .ds-table td,
  .ds-table th {
    padding: 0.65rem;
  }

  .ds-alert {
    padding: 0.85rem 1rem;
  }
}
/* =========================================================
   Busca Universal - Correção de sobreposição
   Garante que os resultados fiquem acima do conteúdo da página
   ========================================================= */

/* Garante que a topbar e a área da busca tenham prioridade visual */
.topbar,
.ds-navbar,
.app-topbar,
#topbar,
#content-wrapper .ds-navbar {
  position: relative;
  z-index: 3000;
}

/* Container principal da Busca Universal */
.global-search,
.global-search-wrapper,
.global-search-container,
#globalSearchContainer {
  position: relative;
  z-index: 4000;
}

/* Input da busca */
#globalSearchInput,
.global-search-input {
  position: relative;
  z-index: 4001;
}

/* Dropdown/resultado da busca */
.global-search-results,
.global-search-dropdown,
#globalSearchResults,
#globalSearchDropdown,
.search-results-dropdown {
  position: absolute !important;
  z-index: 99999 !important;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  overflow: visible !important;
}

/* Card/lista de resultados */
.global-search-results .ds-card-shell,
.global-search-dropdown .ds-card-shell,
#globalSearchResults .ds-card-shell,
#globalSearchDropdown .ds-card-shell,
.search-results-dropdown .ds-card-shell {
  position: relative;
  z-index: 100000 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

/* Evita que cards e áreas do dashboard fiquem acima da busca */
.ds-card-shell,
.dashboard-card,
.kpi-card,
.filter-card,
.section-card,
.content-card {
  z-index: auto;
}

/* Alguns wrappers antigos do SB Admin podem criar corte por overflow */
#wrapper,
#content-wrapper,
#content,
.ds-container-fluid,
.page-content,
.main-content {
  overflow: visible !important;
}

/* Mantém tabelas com scroll sem prejudicar a busca */
.ds-table-wrap {
  overflow-x: auto;
}

/* Caso a busca fique dentro de algum container com overflow */
.global-search-container,
.global-search-wrapper,
.app-topbar,
.topbar,
.ds-navbar {
  overflow: visible !important;
}

/* Ajuste visual dos resultados */
.global-search-results,
.global-search-dropdown,
#globalSearchResults,
#globalSearchDropdown,
.search-results-dropdown {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  max-height: 70vh;
  overflow-y: auto !important;
}

/* Dark mode */
[data-theme='dark'] .global-search-results,
[data-theme='dark'] .global-search-dropdown,
[data-theme='dark'] #globalSearchResults,
[data-theme='dark'] #globalSearchDropdown,
[data-theme='dark'] .search-results-dropdown,
.app-dark-mode .global-search-results,
.app-dark-mode .global-search-dropdown,
.app-dark-mode #globalSearchResults,
.app-dark-mode #globalSearchDropdown,
.app-dark-mode .search-results-dropdown {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}
/* =========================================================
   Botão "Como usar" / Ajuda - Correção de sobreposição
   Mantém a Busca Universal acima do conteúdo, mas garante que
   popovers/dropdowns/modais de ajuda abram acima da busca.
   ========================================================= */

/* Popovers e tooltips do ajuda precisam ficar acima da Busca Universal */
.popover,
.tooltip,
.bs-popover-auto,
.bs-popover-top,
.bs-popover-right,
.bs-popover-bottom,
.bs-popover-left {
  z-index: 2147482500 !important;
}

/* Dropdowns de ajuda/ações rápidas também devem ficar acima da busca */
.ds-dropdown-menu,
.help-menu,
.help-dropdown,
.how-to-menu,
.how-to-dropdown,
#howToMenu,
#howToDropdown {
  z-index: 2147482500 !important;
}

/* Containers comuns de ajuda/guia, caso o "Como usar" renderize painel próprio */
.help-panel,
.help-popover,
.help-card,
.how-to-panel,
.how-to-popover,
.how-to-card,
#helpPanel,
#helpPopover,
#howToPanel,
#howToPopover {
  position: absolute;
  z-index: 2147482500 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

/* Caso o conteúdo do "Como usar" seja renderizado como alerta/card flutuante */
.help-panel.ds-card-shell,
.help-popover.ds-card-shell,
.how-to-panel.ds-card-shell,
.how-to-popover.ds-card-shell,
.help-panel.ds-card,
.help-popover.ds-card,
.how-to-panel.ds-card,
.how-to-popover.ds-card {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  overflow: hidden;
}

/* Mantém modais oficiais acima de qualquer elemento da topbar/busca */
.ds-modal {
  z-index: 2147482600 !important;
}

.ds-modal-backdrop {
  z-index: 2147482550 !important;
}

/* Dark mode para os painéis de ajuda, quando existirem */
body.app-dark-mode .help-panel,
body.app-dark-mode .help-popover,
body.app-dark-mode .how-to-panel,
body.app-dark-mode .how-to-popover,
body.app-dark-mode .popover,
body.app-dark-mode .ds-dropdown-menu {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.24);
  color: #f9fafb;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

body.app-dark-mode .popover .popover-header {
  background: rgba(31, 41, 55, 0.96);
  border-bottom-color: rgba(148, 163, 184, 0.18);
  color: #f9fafb;
}

body.app-dark-mode .popover .popover-body {
  color: #cbd5e1;
}