/* ─────────────────────────────────────────────────────────────────
   courses.css  –  Papulakan Courses Tab
   Grade-group theming, lesson card polish, player chrome, schedule grid
   ───────────────────────────────────────────────────────────────── */

/* ── Grade-group colour tokens ─────────────────────────────────── */
:root {
  --grade-prek-bg:    #ecfccb; --grade-prek-border:    #84cc16; --grade-prek-text:    #3f6212;
  --grade-early-bg:   #fef9c3; --grade-early-border:   #eab308; --grade-early-text:   #713f12;
  --grade-elem-bg:    #dbeafe; --grade-elem-border:    #3b82f6; --grade-elem-text:    #1e3a8a;
  --grade-mid-bg:     #f3e8ff; --grade-mid-border:     #a855f7; --grade-mid-text:     #581c87;
  --grade-high-bg:    #f1f5f9; --grade-high-border:    #94a3b8; --grade-high-text:    #0f172a;
}

/* ── Lesson card ────────────────────────────────────────────────── */
.lesson-card {
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.lesson-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(124,58,237,.4);
}

/* Grade-group border accents */
.lesson-card[data-grade="pre-k"]      { border-color: var(--grade-prek-border); }
.lesson-card[data-grade="early"]      { border-color: var(--grade-early-border); }
.lesson-card[data-grade="elementary"] { border-color: var(--grade-elem-border); }
.lesson-card[data-grade="middle"]     { border-color: var(--grade-mid-border); }
.lesson-card[data-grade="high"]       { border-color: var(--grade-high-border); }

/* Done overlay stripe */
.lesson-card.is-done::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(16,185,129,.06) 6px,
    rgba(16,185,129,.06) 12px
  );
  pointer-events: none;
}

/* ── Lesson grid responsive columns ─────────────────────────────── */
#lessons-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Pre-K cards are taller by default */
.lesson-card.grade-pre-k { min-height: 200px; }

/* ── Video player chrome ─────────────────────────────────────────── */
#video-embed-container {
  background: #0f0f1a;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
}
#video-embed-container iframe,
#video-embed-container video {
  width: 100%;
  height: 100%;
  border: none;
}
#player-controls-bar {
  background: #111827;
  border-radius: 0 0 1rem 1rem;
  font-size: 11px;
}
.speed-btn.active {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

/* ── Schedule week grid ──────────────────────────────────────────── */
#schedule-view {
  animation: fadeUp .25s ease;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.schedule-drop-cell {
  min-height: 52px;
  transition: background .15s, border-color .15s;
}
.schedule-drop-cell.drag-over {
  background: #fef3c7;
  border-color: #f59e0b;
  border-style: solid;
}

.schedule-chip {
  transition: transform .15s, box-shadow .15s;
}
.schedule-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.schedule-chip[draggable="true"]:active {
  opacity: .7;
  cursor: grabbing;
}

/* ── PDF canvas panel ────────────────────────────────────────────── */
#viewer-pdf-panel {
  animation: fadeUp .2s ease;
}
#viewer-pdf-canvas {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

/* ── Lightbox ────────────────────────────────────────────────────── */
#lightbox-overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#lightbox-img {
  max-height: 80vh;
  max-width: 90vw;
  border-radius: 1rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  transition: opacity .2s;
}

/* ── Mini schedule bar ───────────────────────────────────────────── */
#schedule-mini-bar {
  min-height: 0;
  transition: all .25s;
}

/* ── Quick-add overlay animation ────────────────────────────────── */
@keyframes slideInFromBottom {
  from { transform: translateY(32px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#quick-add-overlay > div {
  animation: slideInFromBottom .25s ease;
}

/* ── Toast ───────────────────────────────────────────────────────── */
.pap-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: .75rem 1.25rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: .875rem;
  z-index: 9999;
  max-width: 20rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: opacity .3s;
}

/* ── Responsive tweaks ───────────────────────────────────────────── */
@media (max-width: 640px) {
  #lessons-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .lesson-card.grade-pre-k { min-height: 160px; }
  #schedule-view [style*="grid-template-columns"] {
    grid-template-columns: 40px repeat(3,1fr) !important;
  }
}
@media (max-width: 400px) {
  #lessons-grid { grid-template-columns: 1fr; }
}