/* FortiGate Inventory Design System V3 - empty/loading/error states */
.fi-empty-state {
  border: 1px dashed var(--fi-border);
  border-radius: var(--fi-radius-xl);
  background: var(--fi-surface-soft);
  padding: var(--fi-space-8) var(--fi-space-6);
  text-align: center;
  color: var(--fi-text-muted);
}

.fi-empty-state .fi-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--fi-space-3);
  border-radius: var(--fi-radius-xl);
  background: rgba(15, 95, 217, .10);
  color: var(--fi-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.fi-empty-state .fi-empty-title {
  color: var(--fi-text);
  font-weight: 850;
  margin-bottom: .25rem;
}

.fi-state-inline,
.ds-table td[colspan].text-center,
.ds-table td[colspan].text-muted,
.ds-table td[colspan][class*="text-center"] {
  padding: var(--fi-space-6) !important;
  color: var(--fi-text-muted) !important;
  background: linear-gradient(180deg, var(--fi-surface) 0%, var(--fi-surface-soft) 100%);
  border-radius: var(--fi-radius-lg);
}

.fi-loading-skeleton {
  border-radius: var(--fi-radius-md);
  background: linear-gradient(90deg, var(--fi-gray-200) 25%, var(--fi-gray-100) 50%, var(--fi-gray-200) 75%);
  background-size: 220% 100%;
  animation: fiSkeleton 1.4s ease-in-out infinite;
}

.fi-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-pill);
  padding: .25rem .6rem;
  background: var(--fi-surface);
  color: var(--fi-text-muted);
  font-size: .78rem;
  font-weight: 800;
}

.fi-status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--fi-gray-400);
  box-shadow: 0 0 0 3px rgba(100,116,139,.12);
}
.fi-status-pill.is-ok .fi-status-dot { background: var(--fi-success); box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.fi-status-pill.is-warning .fi-status-dot { background: var(--fi-warning); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.fi-status-pill.is-danger .fi-status-dot { background: var(--fi-danger); box-shadow: 0 0 0 3px rgba(239,68,68,.16); }

.ds-alert.alert-light,
.ds-alert.alert-secondary {
  background: var(--fi-surface-soft) !important;
  color: var(--fi-text-muted) !important;
  border-color: var(--fi-border) !important;
}

@keyframes fiSkeleton {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

body.app-dark-mode .fi-empty-state,
body.app-dark-mode .fi-state-inline,
body.app-dark-mode .ds-table td[colspan].text-center,
body.app-dark-mode .ds-table td[colspan].text-muted,
body.app-dark-mode .ds-table td[colspan][class*="text-center"] {
  background: rgba(17,24,39,.62);
}