/* FortiGate Inventory Design System V3 - filters and form layouts */
.fi-section,
.ds-card-shell .fi-section {
  margin-bottom: var(--fi-space-5);
}

.fi-section-title,
.ds-card-body > h5,
.ds-card-body > h6,
#sectionTop h1,
.section-title {
  color: var(--fi-text) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

.fi-section-description,
.ds-card-body > p.text-muted,
.text-muted.small,
.small.text-muted {
  color: var(--fi-text-muted) !important;
  line-height: 1.55;
}

.fi-filter-panel,
.ds-card-body .ds-form-row,
.ds-card-body .ds-row.align-items-end,
.ds-card-body .ds-row.mb-3,
.ds-card-body .ds-row.g-2,
.ds-card-body .ds-row.g-3 {
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-xl);
  background: linear-gradient(180deg, var(--fi-surface) 0%, var(--fi-surface-soft) 100%);
  padding: var(--fi-space-4);
  margin-left: 0;
  margin-right: 0;
  box-shadow: var(--fi-shadow-xs);
}

.ds-card-body .ds-form-row + .ds-table-wrap,
.ds-card-body .ds-row.mb-3 + .ds-table-wrap,
.ds-card-body .ds-row.align-items-end + .ds-table-wrap {
  margin-top: var(--fi-space-4);
}

.fi-filter-panel label,
.ds-card-body .ds-form-row label,
.ds-card-body .ds-row.align-items-end label,
.ds-card-body .ds-row.mb-3 label {
  margin-bottom: .35rem;
  color: var(--fi-text-muted) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 850 !important;
}

.ds-card-body .ds-form-row .ds-button,
.ds-card-body .ds-row.align-items-end .ds-button,
.ds-card-body .ds-row.mb-3 .ds-button {
  min-height: calc(1.5em + .75rem + 2px);
}

.fi-action-bar,
.ds-card-body .ds-button-toolbar,
.ds-card-body .d-flex.justify-content-between,
.ds-card-body .d-flex.justify-content-end {
  gap: var(--fi-space-2);
  flex-wrap: wrap;
}

.fi-muted-helper,
.ds-form-text,
small.form-text {
  color: var(--fi-text-muted) !important;
  font-size: .78rem;
}

body.app-dark-mode .fi-filter-panel,
body.app-dark-mode .ds-card-body .ds-form-row,
body.app-dark-mode .ds-card-body .ds-row.align-items-end,
body.app-dark-mode .ds-card-body .ds-row.mb-3,
body.app-dark-mode .ds-card-body .ds-row.g-2,
body.app-dark-mode .ds-card-body .ds-row.g-3 {
  background: linear-gradient(180deg, var(--fi-surface) 0%, rgba(17,24,39,.72) 100%);
}