/* Custom dashboard styles aligned with brand colors and light theme */

/* Brand color variables - injected dynamically via PHP in pages */
/* --color-brand-primary, --color-brand-primary-dark, --color-brand-success, --color-brand-success-dark */
/* --color-brand-text, --color-brand-text-light, --color-brand-bg, --color-brand-bg-alt, --color-brand-border */

/* ===== GLOBAL LAYOUT FIX ===== */
/* Sidebar stays fixed on desktop; main content offset by sidebar width */
@media (min-width: 1024px) {
  #sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16rem; /* w-64 = 256px */
    height: 100vh;
    overflow-y: auto;
    z-index: 30;
    transform: none !important; /* Ensure visible on desktop */
  }

  /* Push main content wrapper right to make room for fixed sidebar */
  body.flex > div.flex-1 {
    margin-left: 16rem;
  }
}

/* Sidebar custom scrollbar */
#sidebar::-webkit-scrollbar {
  width: 4px;
}
#sidebar::-webkit-scrollbar-thumb {
  background: var(--color-brand-border, #e5e7eb);
  border-radius: 9999px;
}
#sidebar::-webkit-scrollbar-track {
  background: transparent;
}
/* ===== END LAYOUT FIX ===== */

/* Utility classes for consistent branding */
.btn-transition {
  transition: all 0.15s ease;
}

.btn-brand {
  background: var(--color-brand-primary, #2563eb);
  border-color: var(--color-brand-primary, #2563eb);
  color: #fff;
}

.btn-brand:hover {
  background: var(--color-brand-primary-dark, #1e40af);
  border-color: var(--color-brand-primary-dark, #1e40af);
}

.btn-outline-brand {
  background: transparent;
  border-color: var(--color-brand-border, #e5e7eb);
  color: var(--color-brand-text, #111827);
}

.btn-outline-brand:hover {
  background: var(--color-brand-bg-alt, #f9fafb);
  border-color: var(--color-brand-border, #e5e7eb);
}

.text-brand-primary { color: var(--color-brand-primary, #2563eb); }
.text-brand-success { color: var(--color-brand-success, #22c55e); }
.bg-brand-primary { background-color: var(--color-brand-primary, #2563eb); }
.bg-brand-success { background-color: var(--color-brand-success, #22c55e); }
.bg-brand-bg { background-color: var(--color-brand-bg, #ffffff); }
.bg-brand-bg-alt { background-color: var(--color-brand-bg-alt, #f9fafb); }
.text-brand-text { color: var(--color-brand-text, #111827); }
.text-brand-text-light { color: var(--color-brand-text-light, #6b7280); }
.border-brand-border { border-color: var(--color-brand-border, #e5e7eb); }

/* Common component styles */
.card {
  background: var(--color-brand-bg, #ffffff);
  border: 1px solid var(--color-brand-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05);
}

.card-hover {
  transition: box-shadow 0.15s ease;
}

.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.05);
}

.input-brand {
  border: 1px solid var(--color-brand-border, #e5e7eb);
  background: var(--color-brand-bg, #ffffff);
  color: var(--color-brand-text, #111827);
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-brand:focus {
  outline: none;
  border-color: var(--color-brand-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.badge-primary {
  background: var(--color-brand-primary, #2563eb);
  color: #fff;
  border-color: var(--color-brand-primary, #2563eb);
}

.badge-success {
  background: var(--color-brand-success, #22c55e);
  color: #fff;
  border-color: var(--color-brand-success, #22c55e);
}

.chip {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--color-brand-bg-alt, #f9fafb);
  color: var(--color-brand-text, #111827);
  border: 1px solid var(--color-brand-border, #e5e7eb);
  border-radius: 9999px;
  margin: 0 4px 4px 0;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .card {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
}

/* Status badges for downloads */
.status-badge {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 9999px;
  border: 1px solid;
}

.status-draft {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.status-published {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}

.status-archived {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.access-badge {
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 9999px;
  border: 1px solid;
  margin-left: 6px;
}

.access-free {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}

.access-paid {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.access-course {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}

/* Upload area styling */
.upload-area {
  border: 2px dashed var(--color-brand-border, #e5e7eb);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--color-brand-bg, #ffffff);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--color-brand-primary, #2563eb);
  background: var(--color-brand-bg-alt, #f9fafb);
}

/* Progress bar */
.progress-bar {
  height: 4px;
  background: var(--color-brand-border, #e5e7eb);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-brand-primary, #2563eb);
  transition: width 0.2s linear;
}

/* File item styling */
.file-item {
  border: 1px solid var(--color-brand-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  background: var(--color-brand-bg-alt, #f9fafb);
  transition: border-color 0.15s ease;
}

.file-item:hover {
  border-color: var(--color-brand-primary, #2563eb);
}

/* Toast notifications */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--color-brand-bg, #ffffff);
  color: var(--color-brand-text, #111827);
  border: 1px solid var(--color-brand-border, #e5e7eb);
  padding: 12px 16px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  border-color: var(--color-brand-success, #22c55e);
}

.toast-error {
  border-color: #ef4444;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Courses page helpers (mobile-first) */
.course-card { border-radius: 12px; }

.course-card-img {
  width: 100%;
  height: 10rem; /* ~h-40 on small screens */
  object-fit: cover;
}
@media (min-width: 1024px) {
  .course-card-img { height: 12rem; }
}

/* Featured row horizontal scroll helpers */
.featured-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.featured-row::-webkit-scrollbar { height: 6px; }
.featured-row::-webkit-scrollbar-thumb {
  background: var(--color-brand-border, #e5e7eb);
  border-radius: 9999px;
}

/* Course badges helpers */
.course-badge {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 9999px;
  border: 1px solid var(--color-brand-border, #e5e7eb);
}
.course-badge-featured {
  background: var(--color-brand-primary, #2563eb);
  color: #fff;
  border-color: var(--color-brand-primary, #2563eb);
}

/* ===== STUDENT PANEL MOBILE-FIRST DESIGN SYSTEM ===== */

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-in {
  opacity: 0;
  animation: fadeInUp 0.45s ease forwards;
}
.anim-in:nth-child(1) { animation-delay: .05s }
.anim-in:nth-child(2) { animation-delay: .1s }
.anim-in:nth-child(3) { animation-delay: .15s }
.anim-in:nth-child(4) { animation-delay: .2s }
.anim-in:nth-child(5) { animation-delay: .25s }
.anim-in:nth-child(6) { animation-delay: .3s }
.anim-in:nth-child(7) { animation-delay: .35s }
.anim-in:nth-child(8) { animation-delay: .4s }
.fade-in { animation: fadeIn .3s ease forwards; }

/* Student Card */
.s-card {
  background: var(--color-brand-bg, #fff);
  border: 1px solid var(--color-brand-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .25s ease, transform .2s ease;
}
.s-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* Stat Card */
.stat-card {
  border-radius: 14px;
  border-left: 4px solid transparent;
  transition: box-shadow .25s, transform .2s;
}
.stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* Filter Card */
.filter-card {
  border-radius: 14px;
  border: 1px solid var(--color-brand-border, #e5e7eb);
}

/* Page Hero - Gradient Banner */
.page-hero {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -8%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}

/* Mobile-first main content padding for bottom nav */
@media (max-width: 767px) {
  .student-main {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Enhanced bottom nav styles */
.bottom-nav-enhanced {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -2px 10px rgba(0,0,0,.04);
}
.bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 12px;
  transition: all .2s ease;
  min-width: 56px;
  color: var(--color-brand-text-light, #777);
}
.bottom-nav-item.active {
  color: var(--color-brand-primary, #ed5121);
  background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
}
.bottom-nav-item.active .nav-dot {
  opacity: 1;
  transform: scaleX(1);
}
.nav-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-brand-primary, #ed5121);
  opacity: 0;
  transition: all .2s ease;
}

/* Course card mobile-first enhancements */
.course-card-student {
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .2s ease;
}
.course-card-student:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* Progress ring (for dashboard) */
.progress-ring-bg {
  fill: none;
  stroke: var(--color-brand-border, #e5e7eb);
  stroke-width: 4;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--color-brand-primary, #ed5121);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset .6s ease;
}

/* Responsive typography */
@media (max-width: 640px) {
  .hero-title { font-size: 1.375rem !important; }
  .hero-subtitle { font-size: 0.8125rem !important; }
}

/* Glass effect utility */
.glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85);
}

/* Touch-friendly tap targets */
@media (max-width: 767px) {
  .tap-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(90deg, var(--color-brand-bg-alt) 25%, var(--color-brand-border) 37%, var(--color-brand-bg-alt) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}