/**
 * Admin Dashboard Page Styles
 * Following STYLE_GUIDE.md dark theme specification
 */

.container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 32px);
}

.section {
  display: flex;
  flex-direction: column;
}

.sectionTitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary, #f8fafc);
  margin: 0 0 var(--spacing-md, 16px) 0;
}

.error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 16px);
  padding: var(--spacing-md, 16px);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--color-error, #f87171);
  border-left: 4px solid var(--color-error, #f87171);
  border-radius: 12px;
  margin-bottom: var(--spacing-md, 16px);
}

.error p {
  margin: 0;
  font-size: 0.875rem;
  color: #fee2e2;
}

.dismissButton {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-error, #f87171);
  cursor: pointer;
  transition: all 0.2s;
}

.dismissButton:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* Admin Tools Grid */
.adminTools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md, 16px);
}

.adminToolCard {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 16px);
  padding: var(--spacing-lg, 24px);
  background: var(--color-surface, rgba(30, 41, 59, 0.5));
  border: 1px solid var(--color-border, rgba(71, 85, 105, 0.5));
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s;
}

.adminToolCard:hover {
  border-color: var(--color-primary-accent, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
}

.adminToolIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  color: var(--color-primary-accent, #3b82f6);
}

.adminToolInfo h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #f8fafc);
  margin: 0 0 4px 0;
}

.adminToolInfo p {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #94a3b8);
  margin: 0;
}

/* Button variant of .adminToolCard for actions that don't navigate (e.g.,
 * opens a modal). Resets browser button styles while preserving the same
 * visual treatment as the <Link> cards above. box-sizing: border-box so
 * width:100% + the card's 24px padding doesn't overflow the grid column. */
.adminToolCardButton {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
}

/* At-Risk card variant: warning-colored icon to signal the compliance surface. */
.atRiskIcon {
  background: rgba(248, 113, 113, 0.1);
  color: var(--color-error, #f87171);
}

/* Count badge shown inline with the card title when total > 0. */
.atRiskBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: var(--spacing-sm, 8px);
  padding: 0 8px;
  border-radius: 11px;
  background: var(--color-error, #f87171);
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Platform Analytics card: green-tinted icon */
.platformAnalyticsIcon {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* Trend indicators in the card subtitle */
.platformTrendUp {
  color: #22c55e;
  font-weight: 600;
}

.platformTrendDown {
  color: var(--color-error, #f87171);
  font-weight: 600;
}

/* Subtle dim while the preview metric is still loading (distinct from the
   error/empty fallback, which renders at full opacity). */
.platformLoading {
  opacity: 0.6;
}