/* ═══════════════════════════════════════════════════════════════════════════════
   SUPERADMIN LIGHT THEME
   Shared CSS for all SuperAdmin pages to ensure visual consistency
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens) — Light Theme
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --sa-bg-primary: #f5f5f5;
  --sa-bg-surface: #ffffff;
  --sa-bg-elevated: #f8fafc;
  --sa-bg-hover: #f1f5f9;

  /* Borders */
  --sa-border-default: #e2e8f0;
  --sa-border-light: #cbd5e1;
  --sa-border-hover: #94a3b8;

  /* Accent Colors */
  --sa-accent-primary: #1976d2;
  --sa-accent-success: #388e3c;
  --sa-accent-warning: #f57c00;
  --sa-accent-danger: #d32f2f;
  --sa-accent-info: #0288d1;
  --sa-accent-purple: #7b1fa2;

  /* Text Colors */
  --sa-text-primary: #1e293b;
  --sa-text-secondary: #64748b;
  --sa-text-muted: #94a3b8;
  --sa-text-on-gradient: #ffffff;

  /* Shadows */
  --sa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sa-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --sa-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* Border Radius */
  --sa-radius-sm: 6px;
  --sa-radius-md: 8px;
  --sa-radius-lg: 12px;
  --sa-radius-xl: 16px;

  /* Transitions */
  --sa-transition-fast: all 0.15s ease;
  --sa-transition-normal: all 0.2s ease;
  --sa-transition-slow: all 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE HEADER STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */
.sa-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--sa-bg-surface);
  border-radius: var(--sa-radius-lg);
  border: 1px solid var(--sa-border-default);
}

.sa-page-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sa-page-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sa-radius-md);
  background: linear-gradient(
    135deg,
    var(--sa-accent-primary) 0%,
    #2d7dd2 100%
  );
}

.sa-page-title h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sa-text-primary);
  margin: 0;
}

.sa-page-subtitle {
  font-size: 0.875rem;
  color: var(--sa-text-secondary);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STAT/KPI CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.sa-stat-card {
  padding: 1.25rem;
  border-radius: var(--sa-radius-lg);
  background: var(--sa-bg-surface);
  border: 1px solid var(--sa-border-default);
  transition: var(--sa-transition-normal);
}

.sa-stat-card:hover {
  border-color: var(--sa-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--sa-shadow-md);
}

.sa-stat-card.gradient-primary {
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  border: none;
}

.sa-stat-card.gradient-success {
  background: linear-gradient(135deg, #388e3c 0%, #81c784 100%);
  border: none;
}

.sa-stat-card.gradient-warning {
  background: linear-gradient(135deg, #f57c00 0%, #ffb74d 100%);
  border: none;
}

.sa-stat-card.gradient-danger {
  background: linear-gradient(135deg, #d32f2f 0%, #ef5350 100%);
  border: none;
}

.sa-stat-card.gradient-info {
  background: linear-gradient(135deg, #0288d1 0%, #4fc3f7 100%);
  border: none;
}

.sa-stat-card.gradient-purple {
  background: linear-gradient(135deg, #7b1fa2 0%, #ba68c8 100%);
  border: none;
}

.sa-stat-card.gradient-teal {
  background: linear-gradient(135deg, #00796b 0%, #4db6ac 100%);
  border: none;
}

.sa-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sa-text-on-gradient);
  line-height: 1.2;
}

.sa-stat-label {
  font-size: 0.875rem;
  color: var(--sa-text-on-gradient);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DATA CARDS / CONTENT SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.sa-card {
  background: var(--sa-bg-surface);
  border: 1px solid var(--sa-border-default);
  border-radius: var(--sa-radius-lg);
  overflow: hidden;
}

.sa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sa-border-default);
  background: var(--sa-bg-elevated);
}

.sa-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sa-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sa-card-body {
  padding: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */
.sa-table-container {
  background: var(--sa-bg-surface);
  border: 1px solid var(--sa-border-default);
  border-radius: var(--sa-radius-lg);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MUDBLAZOR OVERFLOW FIXES FOR SUPERADMIN
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Prevent KPI cards from overflowing their containers */
.mud-grid-item {
  min-width: 0;
}

/* KPI Card text overflow handling */
.mud-paper .mud-text-h4,
.mud-paper .mud-text-subtitle1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure stacks don't overflow */
.mud-stack {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MUDBLAZOR CHART — LEGEND & TEXT VISIBILITY ON LIGHT BACKGROUNDS
   High-specificity overrides to ensure chart legends are always readable.
   Must beat `.mud-main-content span { color: inherit !important; }` from app.css.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-main-content .mud-chart-legend .mud-chart-legend-item {
  color: #1e293b !important;
}

.mud-main-content .mud-chart text {
  fill: #64748b !important;
}

.mud-chart-legend {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.mud-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #1e293b !important;
}

.mud-chart-legend-marker {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.mud-chart-donut,
.mud-chart-pie {
  max-width: 180px;
  max-height: 180px;
  flex-shrink: 0;
}

.mud-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */
.sa-text-primary {
  color: var(--sa-text-primary) !important;
}
.sa-text-secondary {
  color: var(--sa-text-secondary) !important;
}
.sa-text-muted {
  color: var(--sa-text-muted) !important;
}
.sa-text-accent {
  color: var(--sa-accent-primary) !important;
}
.sa-text-success {
  color: var(--sa-accent-success) !important;
}
.sa-text-warning {
  color: var(--sa-accent-warning) !important;
}
.sa-text-danger {
  color: var(--sa-accent-danger) !important;
}

.sa-bg-surface {
  background-color: var(--sa-bg-surface) !important;
}
.sa-bg-elevated {
  background-color: var(--sa-bg-elevated) !important;
}

/* Status indicators */
.sa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sa-status-dot.active {
  background-color: var(--sa-accent-success);
}
.sa-status-dot.warning {
  background-color: var(--sa-accent-warning);
}
.sa-status-dot.error {
  background-color: var(--sa-accent-danger);
}
.sa-status-dot.info {
  background-color: var(--sa-accent-info);
}

/* Empty state styling */
.sa-empty-state {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--sa-bg-surface);
  border: 2px dashed var(--sa-border-light);
  border-radius: var(--sa-radius-lg);
}

.sa-empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sa-accent-success), #16a34a);
}

.sa-empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sa-text-primary);
  margin-bottom: 0.5rem;
}

.sa-empty-state-text {
  font-size: 0.875rem;
  color: var(--sa-text-secondary);
}

/* Loading state */
.sa-loading {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--sa-bg-surface);
  border-radius: var(--sa-radius-lg);
}

.sa-loading-text {
  margin-top: 1rem;
  color: var(--sa-text-secondary);
}

/* Filter/Search bar */
.sa-filter-bar {
  background: var(--sa-bg-surface);
  border: 1px solid var(--sa-border-default);
  border-radius: var(--sa-radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Alert-specific status cards */
.sa-alert-card-critical {
  border: 2px solid var(--sa-accent-danger) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.sa-alert-card-warning {
  border: 2px solid var(--sa-accent-warning) !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

.sa-alert-card-info {
  border: 2px solid var(--sa-accent-info) !important;
  background: rgba(6, 182, 212, 0.1) !important;
}