@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --primary-purple: #9975f3;
  --primary-purple-hover: #7b4cf0;
  --secondary-pink: #f5aef8;
  --bg-light: #f0f2f5;
  --white: #ffffff;
  --text-dark: #1a1a1a;
  --text-muted: #666666;
  --border-color: #e5e7eb;
  --purple-soft: rgba(153, 117, 243, 0.1);
  --success-soft: rgba(67, 233, 123, 0.1);
  --info-soft: rgba(79, 172, 254, 0.1);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--bg-light) !important;
  color: var(--text-dark);
  line-height: 1.6;
}

/* --- Navigation --- */
.navbar {
  box-shadow: var(--shadow-md);
  padding: 0.75rem 0;
}

.nav-link {
  font-weight: 500 !important;
  transition: all 0.2s ease;
}

/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.card-header {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1.25rem 1.5rem !important;
  font-weight: 600;
}

.card-body {
  padding: 1.5rem !important;
}

/* --- Buttons --- */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.25rem !important;
  transition: all 0.2s ease !important;
}

.btn-primary {
  background-color: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(153, 117, 243, 0.2);
}

.btn-primary:hover {
  background-color: var(--primary-purple-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(153, 117, 243, 0.3);
}

.btn-outline-primary {
  color: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-purple) !important;
  color: var(--white) !important;
}

/* --- Badges --- */
.badge {
  padding: 0.5em 0.8em !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.bg-purple-soft { background-color: var(--purple-soft) !important; color: var(--primary-purple) !important; }
.bg-success-soft { background-color: var(--success-soft) !important; color: #10b981 !important; }
.bg-info-soft { background-color: var(--info-soft) !important; color: #3b82f6 !important; }
.bg-warning-soft { background-color: rgba(245, 158, 11, 0.1) !important; color: #d97706 !important; }
.bg-danger-soft { background-color: rgba(239, 68, 68, 0.1) !important; color: #dc2626 !important; }
.bg-primary-soft { background-color: rgba(59, 130, 246, 0.1) !important; color: #2563eb !important; }
.text-success { color: #10b981 !important; }
.text-warning { color: #d97706 !important; }
.text-danger { color: #dc2626 !important; }

/* --- Tables --- */
.table {
  color: var(--text-dark) !important;
}

.table thead th {
  background-color: #f9fafb !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1rem 1.5rem !important;
}

.table tbody td {
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  vertical-align: middle;
}

/* --- Utilities --- */
.text-purple { color: var(--primary-purple) !important; }
.text-gradient {
  background: linear-gradient(90deg, var(--primary-purple), var(--secondary-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-purple { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important; }
.bg-gradient-pink { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; }
.bg-gradient-info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important; }
.bg-gradient-dark { background: linear-gradient(135deg, #232526 0%, #414345 100%) !important; }

.rounded-16 { border-radius: 16px !important; }
.shadow-premium { box-shadow: var(--shadow-md) !important; }

/* --- Dashboard Specific --- */
.stat-card {
  border: none !important;
  color: white !important;
}

.stat-card h2 {
  font-size: 2.5rem;
  font-weight: 700;
}

/* --- Login & Landing specifics (Legacy compat) --- */
.login-page { background-color: var(--bg-light) !important; }
.login-card {
  background: var(--white) !important;
  border-radius: 24px !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 48px !important;
  text-align: center !important;
}