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

:root {
  --tw-primary: #4f46e5;
  --tw-primary-hover: #4338ca;
  --tw-secondary: #ec4899;
  --bg-body: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE ===== */
body.dark,
body.dark * {
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: #334155;
  --border-light: #1e293b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

::selection {
  background: var(--tw-primary);
  color: white;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ===== TOAST ===== */
.toast-enter { animation: slideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.toast-exit { animation: slideOut 0.25s ease-in forwards; }
@keyframes slideIn {
  from { transform: translateX(100%) translateY(-50%); opacity: 0; }
  to { transform: translateX(0) translateY(0); opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* ===== VIDEO PROTECTION ===== */
.no-select { user-select: none; }
.blur-video { filter: blur(15px); }
#secure-player-wrapper:fullscreen,
#secure-player-wrapper:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background-color: black;
}
.noise-overlay {
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  opacity: 0.05;
  animation: noiseMove 0.15s infinite;
  pointer-events: none;
}
@keyframes noiseMove {
  0% { transform: translate(0,0); }
  20% { transform: translate(-4%,2%); }
  40% { transform: translate(-2%,6%); }
  60% { transform: translate(6%,0); }
  80% { transform: translate(1%,12%); }
  100% { transform: translate(0,0); }
}

/* ===== LOADER ===== */
.loader {
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--tw-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ===== SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border-color) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-text { height: 16px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 60%; }
.skeleton-image { height: 200px; border-radius: var(--radius-md); }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* ===== MOBILE DRAWER ===== */
#mobile-drawer {
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* ===== VIEW TRANSITION ===== */
.view-section {
  animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== CARD HOVER ===== */
.hover-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ===== ACCESSIBILITY ===== */
:focus-visible {
  outline: 2px solid var(--tw-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--tw-primary);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-to-content:focus { top: 0; }

/* ===== CUSTOM SCROLLBAR ===== */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }

/* ===== LINE CLAMP ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== DARK MODE TOGGLE ===== */
.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  font-size: 1.25rem;
}
.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

/* ===== STAT CARD ===== */
.stat-card { transition: all var(--transition-normal); }
.stat-card:hover { transform: scale(1.02); }

/* ===== PRINT ===== */
@media print {
  nav, #toast-container, #mobile-overlay, #mobile-drawer, .dark-mode-toggle {
    display: none !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .view-section { animation-duration: 0.15s; }
}

/* =====================================================================
   DARK MODE OVERRIDES
   ===================================================================== */
body.dark {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

/* --- Generic Element Overrides --- */
body.dark .bg-white { background-color: var(--bg-card); }
body.dark .bg-slate-50 { background-color: #1a2744; }
body.dark .bg-slate-100 { background-color: #1e2d4a; }
body.dark .bg-slate-200 { background-color: #253552; }

body.dark .text-slate-400 { color: #64748b; }
body.dark .text-slate-500 { color: #94a3b8; }
body.dark .text-slate-600 { color: #cbd5e1; }
body.dark .text-slate-700 { color: #e2e8f0; }
body.dark .text-slate-800 { color: #f1f5f9; }
body.dark .text-dark { color: #f1f5f9; }
body.dark .text-primary { color: #818cf8; }
body.dark .bg-primary { background-color: #6366f1; }
body.dark .hover\:bg-primary:hover { background-color: #6366f1; }
body.dark .hover\:text-primary:hover { color: #a5b4fc; }
body.dark .border-primary { border-color: #6366f1; }
body.dark .focus\:border-primary:focus { border-color: #6366f1 !important; }
body.dark .focus\:ring-primary:focus { --tw-ring-color: #6366f1 !important; }
body.dark .hover\:text-indigo-800:hover { color: #a5b4fc; }
body.dark .hover\:bg-indigo-700:hover { background-color: #4f46e5; }
body.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.15); }

body.dark .border-slate-100 { border-color: #1e293b; }
body.dark .border-slate-200 { border-color: #253552; }
body.dark .border-slate-300 { border-color: #334155; }

body.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #1e293b;
}

body.dark .shadow-sm,
body.dark .shadow-md,
body.dark .shadow-lg { box-shadow: var(--shadow-md); }

/* --- Navbar --- */
body.dark nav {
  background: #1a2744 !important;
  border-bottom: 1px solid #253552;
}

/* Nav buttons - default */
body.dark nav .nav-btn {
  color: #94a3b8;
  transition: all var(--transition-fast);
}
body.dark nav .nav-btn:hover {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
}
body.dark nav .nav-btn:focus-visible {
  color: #818cf8;
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Nav buttons - leaderboard */
body.dark nav .nav-btn[data-target="leaderboard"] {
  color: #f59e0b;
}
body.dark nav .nav-btn[data-target="leaderboard"]:hover {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
}

/* Nav buttons - admin */
body.dark nav .nav-btn[data-target="admin-dashboard"] {
  color: #fb7185;
}
body.dark nav .nav-btn[data-target="admin-dashboard"]:hover {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.12);
}

/* Nav active states (via showView classes) */
body.dark nav .nav-btn.bg-slate-100 {
  color: #818cf8 !important;
  background: rgba(99, 102, 241, 0.15) !important;
}
body.dark nav .nav-btn.bg-amber-50 {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
}
body.dark nav .nav-btn.bg-rose-50 {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.15) !important;
}

/* Header elements */
body.dark #user-greeting {
  color: #94a3b8 !important;
  background: rgba(51, 65, 85, 0.5) !important;
  border-color: #334155 !important;
}
body.dark #header-avatar {
  background: #253552 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
body.dark #header-avatar:hover {
  border-color: #6366f1 !important;
}

/* Notification bell */
body.dark #notification-bell {
  color: #94a3b8;
}
body.dark #notification-bell:hover {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}
body.dark #notification-bell .bg-white {
  background: var(--bg-card) !important;
}

/* Notifications dropdown */
body.dark #notifications-dropdown {
  background: #1a2744 !important;
  border: 1px solid #253552 !important;
}

/* Login button */
body.dark #guest-actions button {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #818cf8;
}
body.dark #guest-actions button:hover {
  background: rgba(99, 102, 241, 0.2);
}

/* Logout button */
body.dark button.text-red-500 {
  color: #fb7185 !important;
}
body.dark button.text-red-500:hover {
  background: rgba(244, 63, 94, 0.1) !important;
}

/* Mobile menu button */
body.dark #mobile-menu-btn { color: #94a3b8; }
body.dark #mobile-menu-btn:hover { color: #e2e8f0; }

/* Mobile drawer */
body.dark #mobile-drawer {
  background: #1a2744 !important;
}
body.dark #mobile-drawer .text-slate-400 { color: #64748b; }
body.dark #mobile-drawer .text-slate-500 { color: #94a3b8; }
body.dark #mobile-drawer .text-slate-700 { color: #e2e8f0; }
body.dark #mobile-drawer .text-slate-800 { color: #f1f5f9; }
body.dark #mobile-drawer .border-slate-100 { border-color: #253552; }

/* --- Leaderboard --- */
body.dark .bg-amber-50 { background: rgba(245, 158, 11, 0.08); }
body.dark .bg-amber-100 { background: rgba(245, 158, 11, 0.15); }
body.dark .text-amber-500 { color: #f59e0b; }
body.dark .text-amber-600 { color: #fbbf24; }
body.dark .text-amber-700 { color: #fcd34d; }

body.dark .bg-indigo-50 { background: rgba(99, 102, 241, 0.08); }
body.dark .bg-indigo-100 { background: rgba(99, 102, 241, 0.15); }
body.dark .text-indigo-800 { color: #a5b4fc; }

body.dark .bg-rose-50 { background: rgba(244, 63, 94, 0.08); }
body.dark .text-rose-600 { color: #fb7185; }
body.dark .text-rose-700 { color: #fda4af; }

body.dark .bg-emerald-50 { background: rgba(16, 185, 129, 0.08); }
body.dark .text-emerald-500 { color: #34d399; }
body.dark .text-emerald-600 { color: #6ee7b7; }

body.dark .bg-red-50 { background: rgba(239, 68, 68, 0.08); }
body.dark .text-red-500 { color: #fb7185; }
body.dark .text-red-600 { color: #f87171; }

/* Leaderboard specific */
body.dark #view-leaderboard .bg-amber-50 {
  background: #1a2744 !important;
}

body.dark #leaderboard-container .bg-indigo-50 { background: rgba(99, 102, 241, 0.06); }
body.dark #leaderboard-container .bg-indigo-50\/50 { background: rgba(99, 102, 241, 0.12); }

/* --- Course Cards --- */
body.dark #courses-grid .bg-white {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* --- Grading --- */
body.dark #view-grading .bg-slate-50 { background: #1a2744; }
body.dark #view-grading input[type="number"] {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

/* --- Admin --- */
body.dark #view-admin-dashboard input,
body.dark #view-admin-dashboard select,
body.dark #view-admin-dashboard textarea {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark #view-admin-dashboard input:focus,
body.dark #view-admin-dashboard select:focus,
body.dark #view-admin-dashboard textarea:focus {
  border-color: #6366f1;
}
body.dark #view-admin-dashboard .border-slate-300 {
  border-color: #334155;
}
body.dark #view-admin-dashboard .bg-indigo-50 {
  background: rgba(99, 102, 241, 0.08);
}

/* --- Empty States --- */
body.dark .border-dashed.border-slate-300 {
  border-color: #334155 !important;
}

/* --- Auth Form --- */
body.dark #view-auth input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark #view-auth input:focus {
  border-color: #6366f1;
  background: #1e293b;
}

/* --- Page Titles / Descriptions --- */
body.dark h1.text-dark,
body.dark h2.text-dark,
body.dark h3.text-dark {
  color: #f1f5f9;
}

/* ------------------------------------------------
   Admin table / users table
   ------------------------------------------------ */
body.dark #admin-users-container table {
  color: #e2e8f0;
}
body.dark #admin-users-container th {
  color: #94a3b8;
}
body.dark #admin-users-container td {
  color: #cbd5e1;
}
body.dark #admin-users-container .text-slate-500 { color: #94a3b8 !important; }
body.dark #admin-users-container .text-slate-400 { color: #64748b !important; }
body.dark #admin-users-container .text-primary { color: #818cf8; }

/* ------------------------------------------------
   Course details
   ------------------------------------------------ */
body.dark #course-details-content .bg-slate-50 { background: #1a2744; }
body.dark #course-details-content .text-slate-700 { color: #e2e8f0 !important; }
body.dark #course-details-content .text-slate-800 { color: #f1f5f9 !important; }
body.dark #course-details-content .border-slate-100 { border-color: #253552; }

/* ------------------------------------------------
   Quiz / Lesson resources
   ------------------------------------------------ */
body.dark #lesson-resources-container .bg-white { background: #1e293b; }
body.dark #lesson-resources-container .border-slate-200 { border-color: #334155; }
body.dark #lesson-resources-container .bg-indigo-50 { background: rgba(99, 102, 241, 0.06); }
body.dark #lesson-resources-container .bg-amber-50 { background: rgba(245, 158, 11, 0.06); }
body.dark #lesson-resources-container input[type="radio"],
body.dark #lesson-resources-container textarea {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* ------------------------------------------------
   Profile
   ------------------------------------------------ */
body.dark #view-profile .bg-slate-50 { background: #1a2744; }
body.dark #view-profile .bg-slate-100 { background: #253552; }
body.dark #view-profile .border-slate-100 { border-color: #253552; }

/* ------------------------------------------------
   Modals
   ------------------------------------------------ */
body.dark [id$="-modal"] .bg-white {
  background: #1a2744 !important;
}
body.dark [id$="-modal"] input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark [id$="-modal"] select,
body.dark [id$="-modal"] textarea {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark #profile-adjustments-section .bg-white {
  background: #1a2744;
  border-color: #253552;
}
body.dark #profile-adjustments-list .border-b {
  border-color: #253552;
}
body.dark #profile-adjustments-list .text-slate-500 {
  color: #94a3b8;
}

/* ------------------------------------------------
   Manage Adjustments View
   ------------------------------------------------ */
body.dark #manage-adjustments-container .bg-white {
  background: #1a2744;
  border-color: #253552;
}
body.dark #manage-adjustments-container .bg-slate-50 {
  background: #1e293b;
}
body.dark #manage-adjustments-container .border-slate-200,
body.dark #manage-adjustments-container .border-slate-100 {
  border-color: #253552;
}
body.dark #manage-adjustments-container .text-slate-800 {
  color: #e2e8f0;
}
body.dark #manage-adjustments-container .text-slate-500,
body.dark #manage-adjustments-container .text-slate-400,
body.dark #manage-adjustments-container .text-slate-600 {
  color: #94a3b8;
}
body.dark #manage-adjustments-container .hover\:bg-slate-50:hover {
  background: #1e293b;
}
body.dark #adj-filter-user,
body.dark #adj-search {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* ------------------------------------------------
   Add Course Form
   ------------------------------------------------ */
body.dark #view-add-course input,
body.dark #view-add-course select,
body.dark #view-add-course textarea {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark #view-add-course .bg-slate-50 { background: #1a2744; }
body.dark #view-add-course .lesson-item { background: #1a2744; }
body.dark #view-add-course .question-item { background: #1e293b; }
body.dark #view-add-course .border-slate-300 { border-color: #334155; }
body.dark #view-add-course .lesson-item .bg-white { background: #1e293b; }

/* ------------------------------------------------
   Grading cards
   ------------------------------------------------ */
body.dark #grading-container .bg-slate-50 { background: #1a2744; }
body.dark #grading-container .bg-indigo-50 { background: rgba(99, 102, 241, 0.06); }
body.dark #grading-container .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #1e293b;
}

/* ===== ADMIN SIDEBAR (WordPress-style) ===== */
#admin-sidebar {
  width: 14rem;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

body.dark #admin-sidebar {
  background: #1a2744;
  border-color: #253552;
}

/* Mobile sidebar: wider + themed */
@media (max-width: 1024px) {
  #admin-sidebar {
    width: 85vw;
    max-width: 20rem;
    border-left: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    top: 0;
    padding-top: env(safe-area-inset-top, 0);
  }
  body.dark #admin-sidebar {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }
  #admin-sidebar .sidebar-close-btn {
    display: flex;
  }
  /* Mobile sidebar header gradient */
  #admin-sidebar .sidebar-mobile-header {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    margin: -1rem -1rem 0.5rem -1rem;
    padding: 1.5rem 1rem 1rem 1rem;
    border-radius: 0 0 1rem 1rem;
  }
  body.dark #admin-sidebar .sidebar-mobile-header {
    background: linear-gradient(135deg, #3730a3, #4338ca);
  }
  #admin-sidebar .sidebar-mobile-header .sidebar-title {
    color: rgba(255,255,255,0.7);
  }
  #admin-sidebar .sidebar-mobile-header .sidebar-close-btn {
    color: rgba(255,255,255,0.7);
  }
  #admin-sidebar .sidebar-mobile-header .sidebar-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
  }
}

#admin-sidebar .admin-sidebar-btn {
  transition: all var(--transition-fast);
}

#admin-sidebar .admin-sidebar-btn:hover {
  background: rgba(99, 102, 241, 0.06);
}

body.dark #admin-sidebar .admin-sidebar-btn {
  color: #94a3b8;
}

body.dark #admin-sidebar .admin-sidebar-btn:hover {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.08);
}

body.dark #admin-sidebar .admin-sidebar-btn.bg-slate-100 {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #a5b4fc !important;
}

body.dark #admin-sidebar .admin-sidebar-btn.bg-emerald-50 {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #6ee7b7 !important;
}

body.dark #admin-sidebar .admin-sidebar-btn.bg-indigo-50 {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #a5b4fc !important;
}

body.dark #admin-sidebar .sidebar-collapse-btn {
  color: #64748b;
}

/* Clear cache section in admin settings */
body.dark #admin-tab-settings .border-t {
  border-color: #253552;
}

body.dark #admin-tab-settings .text-rose-500 {
  color: #fb7185;
}
body.dark #admin-sidebar .sidebar-collapse-btn:hover {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.08);
}

/* Floating shield button */
#sidebar-fab {
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease;
}
#sidebar-fab:hover {
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
  transform: scale(1.05);
}
#sidebar-fab:active {
  transform: scale(0.92);
}

body.dark #sidebar-fab {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Mobile FAB adjustments */
@media (max-width: 1024px) {
  #sidebar-fab {
    width: 3rem;
    height: 3rem;
    bottom: 1.25rem;
    left: 1.25rem !important;
  }
  #sidebar-fab i {
    font-size: 1.25rem;
  }
}

/* Desktop: sidebar always pinned when admin is logged in */
@media (min-width: 1025px) {
  #admin-sidebar.sidebar-active {
    transform: translateX(0);
  }
  #admin-sidebar .sidebar-close-btn {
    display: none;
  }
  #admin-sidebar .sidebar-mobile-header {
    margin: 0;
    padding: 0;
    background: none;
  }
  body.dark #admin-sidebar .sidebar-mobile-header {
    background: none;
  }
  #admin-sidebar .sidebar-mobile-header .sidebar-title {
    color: #94a3b8;
  }
}

/* Mobile: sidebar overlay behavior */
@media (max-width: 1024px) {
  #sidebar-overlay.sidebar-open {
    display: block;
  }
  body.dark #sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* Main content shift when sidebar is visible on desktop */
.lg\:ml-56 {
  margin-left: 14rem;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   WALLET SYSTEM STYLES
   ================================================ */

/* Wallet transaction rows */
.wallet-txn-row:last-child { border-bottom: none; }

/* Dark mode: wallet views */
body.dark #user-wallet-container .bg-white,
body.dark #wallet-admin-container .bg-white,
body.dark #recharge-codes-admin-container .bg-white,
body.dark #purchases-admin-container .bg-white {
  background: #1a2744;
  border-color: #253552;
}
body.dark #user-wallet-container .border-slate-200,
body.dark #user-wallet-container .border-slate-100,
body.dark #wallet-admin-container .border-slate-200,
body.dark #wallet-admin-container .border-slate-100,
body.dark #recharge-codes-admin-container .border-slate-200,
body.dark #recharge-codes-admin-container .border-slate-100,
body.dark #purchases-admin-container .border-slate-200,
body.dark #purchases-admin-container .border-slate-100 {
  border-color: #253552;
}
body.dark #user-wallet-container .text-slate-800,
body.dark #wallet-admin-container .text-slate-800,
body.dark #recharge-codes-admin-container .text-slate-800,
body.dark #purchases-admin-container .text-slate-800 {
  color: #e2e8f0;
}
body.dark #user-wallet-container .text-slate-500,
body.dark #user-wallet-container .text-slate-400,
body.dark #wallet-admin-container .text-slate-500,
body.dark #wallet-admin-container .text-slate-400,
body.dark #recharge-codes-admin-container .text-slate-500,
body.dark #recharge-codes-admin-container .text-slate-400,
body.dark #purchases-admin-container .text-slate-500,
body.dark #purchases-admin-container .text-slate-400 {
  color: #94a3b8;
}
body.dark #user-wallet-container .hover\:bg-slate-50\/50:hover,
body.dark #user-wallet-container .hover\:bg-slate-50:hover,
body.dark #wallet-admin-container .hover\:bg-slate-50\/50:hover,
body.dark #wallet-admin-container .hover\:bg-slate-50:hover,
body.dark #recharge-codes-admin-container .hover\:bg-slate-50:hover,
body.dark #purchases-admin-container .hover\:bg-slate-50:hover {
  background: #1e293b;
}
body.dark #user-wallet-container .bg-slate-50,
body.dark #wallet-admin-container .bg-slate-50,
body.dark #recharge-codes-admin-container .bg-slate-50,
body.dark #purchases-admin-container .bg-slate-50 {
  background: #1e293b;
}

/* Dark mode wallet input/search fields */
body.dark #wallet-admin-search,
body.dark #wallet-admin-type-filter,
body.dark #wallet-recharge-user,
body.dark #wallet-recharge-amount,
body.dark #wallet-recharge-desc,
body.dark #wallet-redeem-input,
body.dark #gc-amount, body.dark #gc-type,
body.dark #gc-count, body.dark #gc-max-uses,
body.dark #gc-expires, body.dark #gc-prefix {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* Dark mode recharge modal radio buttons */
body.dark #wallet-recharge-modal .border-slate-200 {
  border-color: #253552;
}
body.dark #wallet-recharge-modal .hover\:bg-slate-50:hover {
  background: #1e293b;
}
body.dark #wallet-recharge-modal .text-slate-700 {
  color: #e2e8f0;
}

/* Dark mode: insufficient balance modal */
body.dark #insufficient-balance-modal .bg-white {
  background: #1a2744;
  border-color: #253552;
}
body.dark #insufficient-balance-modal .text-slate-800 {
  color: #e2e8f0;
}

/* Dark mode: generate code modal */
body.dark #generate-code-modal .bg-white {
  background: #1a2744;
  border-color: #253552;
}
body.dark #generate-code-modal .text-slate-800 {
  color: #e2e8f0;
}

/* User balance display in header */
#user-balance-display {
  transition: all 0.2s ease;
}

/* Wallet balance card animation */
#user-wallet-container .bg-gradient-to-br {
  position: relative;
}
#user-wallet-container .bg-gradient-to-br::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}

/* Skeleton loader for wallet */
.wallet-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: wallet-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}
@keyframes wallet-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
body.dark .wallet-skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #253552 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* Feedback dark mode */
body.dark .feedback-item {
  background-color: #1e293b;
  border-color: #334155;
}
body.dark .feedback-type-label {
  background-color: #1e293b;
  border-color: #334155;
}
body.dark .feedback-type-label .feedback-type-indicator span {
  color: #cbd5e1;
}

/* Success animation for code redeem */
.wallet-success-flash {
  animation: walletFlash 0.6s ease;
}
@keyframes walletFlash {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(16, 185, 129, 0.15); }
}

/* Transaction timeline styling */
.wallet-txn-row:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
.wallet-txn-row:last-child { border-bottom: none !important; }

/* Feedback radio card: fallback for Tailwind has-[:checked] */
.feedback-type-label input[type="radio"]:checked ~ .feedback-type-indicator {
  border-color: #fca5a5;
  background-color: #fef2f2;
}
.feedback-type-label input[type="radio"][value="suggestion"]:checked ~ .feedback-type-indicator {
  border-color: #fcd34d;
  background-color: #fffbeb;
}