/* 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 */

/* 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);
}