/* Modern theme overrides for dashboards and shared pages */

:root,
[data-theme="light"] {
  --primary-color: #6366f1; /* Indigo */
  --primary-dark: #4f46e5;
  --primary-light: #eef2ff;
  --secondary-color: #f97316; /* Orange */
  --secondary-dark: #ea580c;
  --accent-color: #22d3ee; /* Cyan */
  --success-color: #10b981; /* Emerald */
  --warning-color: #f59e0b; /* Amber */
  --error-color: #ef4444;   /* Red */
  --text-dark: #111827;
  --text-medium: #374151;
  --text-light: #6b7280;
  --background-light: #f8fafc;
  --background-white: #ffffff;

  /* Additional modern tokens */
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-blur: saturate(180%) blur(10px);
}

[data-theme="dark"] {
  --background-light: #0b1220;
  --background-white: #0f172a;
  --surface-color: #0f172a;
  --text-dark: #e5e7eb;
  --text-medium: #cbd5e1;
  --text-light: #94a3b8;
  --border-color: #1f2a44;
  --hover-color: #0b1220;
}

/* Dashboard nav active button: gradient and glow */
.dashboard-nav .nav-btn[aria-pressed="true"],
.dashboard-nav .nav-btn.active {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

/* Status/Stat cards with a colorful accent bar */
.status-card, .stat-card, .status-summary .status-card {
  position: relative;
  overflow: hidden;
}
.status-card::before, .stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-gradient);
}

/* Column headers & badges pop */
.column-header h3, .badge {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Active nav items in generic dashboard page */
.nav-item.active {
  color: #fff !important;
  background: var(--brand-gradient);
  border-radius: 10px;
}

/* Small icon accents */
.dashboard-nav i, .column-header i {
  color: var(--primary-color);
}
