/* Admin Layout Styles - Refactored to use CSS Zero utilities where possible */

/* Component-specific grid layouts - keep as semantic classes */
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Component-specific card styles - metric-value class removed as unused */

/* Component-specific grid layouts */
.performance-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.performance-card {
  padding: 1.25rem;
}

/* Component-specific gauge styles */
.performance-gauge {
  padding: 1rem;
}

.performance-note {
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Component-specific analytics styles */
.analytics-filter-form {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.filter-input {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* Responsive styles - keep as component-specific */
@media (min-width: 480px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .performance-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 48rem) {
  .filter-grid {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    flex-direction: column;
  }


}