/* FortiGate Inventory - Skeleton Loading States */

.skeleton-wrapper,
.skeleton-card,
.skeleton-list,
.skeleton-chart {
  width: 100%;
}

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--fi-gray-200, #e5e7eb) 25%,
    var(--fi-gray-100, #f3f4f6) 50%,
    var(--fi-gray-200, #e5e7eb) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--fi-radius-md, 0.625rem);
  animation: skeleton-load 1.35s ease-in-out infinite;
}

.skeleton-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.45rem;
}

.skeleton-table td {
  padding: 0.45rem 0.35rem;
}

.skeleton-cell {
  height: 1.05rem;
}

.skeleton-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border: 1px solid var(--fi-border, #e5e7eb);
  border-radius: var(--fi-radius-xl, 1rem);
  background: var(--fi-surface, #fff);
  padding: 1rem;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
}

.skeleton-content {
  flex: 1 1 auto;
  min-width: 0;
}

.skeleton-line {
  height: 0.78rem;
  margin: 0.42rem 0;
}

.skeleton-list {
  display: grid;
  gap: 0.85rem;
}

.skeleton-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  border: 1px solid var(--fi-border, #e5e7eb);
  border-radius: var(--fi-radius-lg, 0.75rem);
  background: var(--fi-surface, #fff);
  padding: 0.85rem;
}

.skeleton-thumbnail {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
}

.skeleton-chart {
  border: 1px solid var(--fi-border, #e5e7eb);
  border-radius: var(--fi-radius-xl, 1rem);
  background: var(--fi-surface, #fff);
  padding: 1rem;
}

.skeleton-chart-title {
  width: 38%;
  height: 1rem;
  margin-bottom: 1rem;
}

.skeleton-chart-area {
  width: 100%;
  height: 12rem;
  border-radius: var(--fi-radius-lg, 0.75rem);
}

.skeleton-chart-legend {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.skeleton-pill {
  width: 5.5rem;
  height: 0.9rem;
  border-radius: 999px;
}

.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

body.app-dark-mode .skeleton {
  background: linear-gradient(
    90deg,
    rgba(51, 65, 85, 0.80) 25%,
    rgba(71, 85, 105, 0.80) 50%,
    rgba(51, 65, 85, 0.80) 75%
  );
  background-size: 200% 100%;
}

body.app-dark-mode .skeleton-card,
body.app-dark-mode .skeleton-item,
body.app-dark-mode .skeleton-chart {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.22);
}

@keyframes skeleton-load {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation-duration: 2.4s;
  }
}