/* ===== ADMIN DASHBOARD THEME — Scoped to .admin-dashboard ===== */
/* This file ONLY affects admin pages. No impact on user-facing screens. */

.admin-dashboard {
  --admin-bg: #F8F9FA;
  --admin-sidebar: #1E1E2E;
  --admin-sidebar-hover: #2A2A3E;
  --admin-sidebar-active: rgba(167, 139, 250, 0.15);
  --admin-accent: #6366F1;
  --admin-accent-hover: #4F46E5;
  --admin-amber: #F59E0B;
  --admin-card: #FFFFFF;
  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --admin-card-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --admin-border: #E2E8F0;
  --admin-table-header: #F1F5F9;
  --admin-table-alt: #F8FAFC;
  --admin-table-hover: #F0F9FF;
  --admin-text: #0F172A;
  --admin-text-secondary: #64748B;
  --admin-text-body: #374151;
  --admin-green: #22C55E;
  --admin-green-bg: #DCFCE7;
  --admin-red: #EF4444;
  --admin-red-bg: #FEE2E2;
  --admin-gray-badge: #94A3B8;
  --admin-gray-badge-bg: #F1F5F9;
  --admin-input-focus: rgba(99, 102, 241, 0.3);
  --admin-radius-card: 12px;
  --admin-radius-btn: 8px;
  --admin-radius-input: 8px;

  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--admin-bg) !important;
  color: var(--admin-text);
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--admin-sidebar);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.admin-sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.admin-sidebar-brand h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.admin-sidebar-brand p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.admin-sidebar-section {
  padding: 12px 12px 4px;
}
.admin-sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  padding: 0 8px;
  margin-bottom: 4px;
}

.admin-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: start;
}
.admin-sidebar-item:hover {
  background: var(--admin-sidebar-hover);
  color: #FFFFFF;
}
.admin-sidebar-item.active {
  background: var(--admin-sidebar-active);
  color: #A78BFA;
  font-weight: 600;
}
.admin-sidebar-item .sidebar-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.admin-sidebar-logout {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ---- Main Content ---- */
.admin-main {
  margin-left: 240px;
  min-height: 100vh;
  background: var(--admin-bg);
}
.admin-header {
  background: var(--admin-card);
  border-bottom: 1px solid var(--admin-border);
  padding: 20px 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admin-header h1 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}
.admin-header .admin-breadcrumb {
  font-size: 0.75rem;
  color: var(--admin-text-secondary);
  margin-top: 2px;
}
.admin-content {
  padding: 24px 28px;
}

/* ---- Cards (override bg-card, bg-background, etc. inside admin) ---- */
.admin-dashboard .bg-card,
.admin-dashboard .bg-background {
  background: var(--admin-card) !important;
  color: var(--admin-text) !important;
}
.admin-dashboard .border-border {
  border-color: var(--admin-border) !important;
}
.admin-dashboard .text-foreground {
  color: var(--admin-text) !important;
}
.admin-dashboard .text-muted-foreground {
  color: var(--admin-text-secondary) !important;
}

/* Cards in admin */
.admin-dashboard .rounded-lg,
.admin-dashboard .rounded-xl,
.admin-dashboard .rounded-2xl {
  border-radius: var(--admin-radius-card) !important;
}

/* Card elevation */
.admin-dashboard .border {
  box-shadow: var(--admin-card-shadow);
}

/* ---- Buttons ---- */
.admin-dashboard .bg-primary {
  background: var(--admin-accent) !important;
}
.admin-dashboard .bg-primary:hover,
.admin-dashboard .hover\:bg-primary\/90:hover {
  background: var(--admin-accent-hover) !important;
}
.admin-dashboard .text-primary {
  color: var(--admin-accent) !important;
}
.admin-dashboard .text-primary-foreground {
  color: #FFFFFF !important;
}
.admin-dashboard .bg-secondary {
  background: var(--admin-table-header) !important;
}
.admin-dashboard .text-secondary-foreground {
  color: var(--admin-text) !important;
}
.admin-dashboard .bg-destructive\/10,
.admin-dashboard .hover\:bg-destructive\/10:hover {
  background: var(--admin-red-bg) !important;
}
.admin-dashboard .text-destructive {
  color: var(--admin-red) !important;
}

/* ---- Inputs ---- */
.admin-dashboard input[type="text"],
.admin-dashboard input[type="number"],
.admin-dashboard input[type="url"],
.admin-dashboard input[type="email"],
.admin-dashboard input[type="search"],
.admin-dashboard select,
.admin-dashboard textarea {
  background: #FFFFFF !important;
  border: 1px solid var(--admin-border) !important;
  color: var(--admin-text) !important;
  border-radius: var(--admin-radius-input) !important;
  font-size: 0.875rem;
}
.admin-dashboard input:focus,
.admin-dashboard select:focus,
.admin-dashboard textarea:focus {
  border-color: var(--admin-accent) !important;
  box-shadow: 0 0 0 3px var(--admin-input-focus) !important;
  outline: none !important;
}
.admin-dashboard input::placeholder,
.admin-dashboard textarea::placeholder {
  color: #94A3B8 !important;
}

/* ---- Tables ---- */
.admin-dashboard table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-dashboard thead th {
  background: var(--admin-table-header) !important;
  color: var(--admin-text-secondary) !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-dashboard tbody tr:nth-child(even) {
  background: var(--admin-table-alt);
}
.admin-dashboard tbody tr:hover {
  background: var(--admin-table-hover) !important;
}
.admin-dashboard tbody td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--admin-text-body);
  border-bottom: 1px solid var(--admin-border);
}

/* ---- Status badges ---- */
.admin-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--admin-green-bg);
  color: #166534;
}
.admin-badge-inactive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--admin-gray-badge-bg);
  color: var(--admin-gray-badge);
}

/* ---- Green / status overrides inside admin ---- */
.admin-dashboard .bg-green-100 { background: var(--admin-green-bg) !important; }
.admin-dashboard .text-green-800 { color: #166534 !important; }
.admin-dashboard .bg-green-500\/20 { background: var(--admin-green-bg) !important; }
.admin-dashboard .text-green-400 { color: var(--admin-green) !important; }

.admin-dashboard .bg-gray-100 { background: var(--admin-gray-badge-bg) !important; }
.admin-dashboard .text-gray-800 { color: var(--admin-text-secondary) !important; }

/* ---- Modals ---- */
.admin-dashboard .fixed.inset-0.bg-black\/50 {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px);
}

/* ---- Spinner color ---- */
.admin-dashboard .animate-spin {
  color: var(--admin-accent) !important;
}

/* ---- Accent/featured badges ---- */
.admin-dashboard .bg-accent {
  background: rgba(245, 158, 11, 0.15) !important;
}
.admin-dashboard .text-accent-foreground {
  color: #B45309 !important;
}

/* ---- Muted backgrounds ---- */
.admin-dashboard .bg-muted {
  background: var(--admin-table-header) !important;
}
.admin-dashboard .bg-muted\/50 {
  background: var(--admin-table-alt) !important;
}

/* ---- Purple accent (quizzes etc.) ---- */
.admin-dashboard .bg-purple-500\/20 { background: rgba(99, 102, 241, 0.1) !important; }
.admin-dashboard .text-purple-400 { color: var(--admin-accent) !important; }

/* ---- Blue accent ---- */
.admin-dashboard .bg-blue-500\/20 { background: rgba(99, 102, 241, 0.08) !important; }
.admin-dashboard .text-blue-400 { color: #3B82F6 !important; }

/* ---- Scrollbar for main ---- */
.admin-main::-webkit-scrollbar { width: 6px; }
.admin-main::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 60px;
    min-width: 60px;
  }
  .admin-sidebar .sidebar-label,
  .admin-sidebar-brand p,
  .admin-sidebar-section-label,
  .admin-sidebar .logout-text {
    display: none;
  }
  .admin-sidebar-brand h2 {
    font-size: 0.75rem;
    text-align: center;
  }
  .admin-sidebar-item {
    justify-content: center;
    padding: 10px 8px;
  }
  .admin-main {
    margin-left: 60px;
  }
  .admin-content {
    padding: 16px;
  }
}