/*
  course_learn.css
  ─────────────────────────────────────────────────────────
  Video player + curriculum sidebar for course_learn.html
*/

:root {
  --lrn-red:     #e53935;
  --lrn-red-dk:  #b71c1c;
  --lrn-bg:      #0d0d0d;
  --lrn-surface: #1a1a1a;
  --lrn-surf2:   #232323;
  --lrn-border:  rgba(255,255,255,.08);
  --lrn-text:    #f0f0f0;
  --lrn-muted:   #8a8a9a;
  --lrn-green:   #4caf50;
  --lrn-gold:    #ffc107;
  --lrn-trans:   .2s ease;
}

/* ── Layout wrapper ── */
/* Override page-wrapper from base.html to make course_learn full-width */
.page-wrapper:has(.lrn-shell) {
  max-width: none;
  padding: 0;
  margin: 0;
  display: block;        /* kill the 2-column grid */
}
.page-wrapper:has(.lrn-shell) > .sidebar {
  display: none;         /* hide the base sidebar */
}

.lrn-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  margin-top: 0;
  background: var(--lrn-bg);
}
@media (max-width: 900px) {
  .lrn-shell { grid-template-columns: 1fr; }
  .lrn-sidebar { order: 2; max-height: none; }
}

/* ── Top bar ── */
.lrn-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1.25rem;
  background: var(--lrn-surface);
  border-bottom: 1px solid var(--lrn-border);
  flex-wrap: wrap;
}
.lrn-topbar-back {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--lrn-muted); text-decoration: none;
  transition: color var(--lrn-trans);
}
.lrn-topbar-back:hover { color: var(--lrn-red); }
.lrn-topbar-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--lrn-text);
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  unicode-bidi: plaintext;   /* handle english course titles in RTL page */
}
.lrn-progress-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  color: var(--lrn-muted);
}
.lrn-progress-bar-track {
  width: 140px;
  height: 6px;
  background: var(--lrn-surf2);
  border-radius: 3px;
  overflow: hidden;
}
.lrn-progress-bar-fill {
  height: 100%;
  background: var(--lrn-green);
  border-radius: 3px;
  transition: width .5s ease;
}
.lrn-progress-pct {
  font-weight: 700;
  color: var(--lrn-green);
}

/* ── Main area ── */
.lrn-main {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

/* ── Video container ── */
.lrn-video-wrap {
  width: 100%;
  background: #000;
  position: relative;
  aspect-ratio: 16/9;   /* keeps height even when children are position:absolute */
  overflow: hidden;
}
.lrn-video-wrap video,
.lrn-video-wrap iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: none;
  position: absolute;
  inset: 0;
}
.lrn-no-video {
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lrn-muted);
  gap: .75rem;
}
.lrn-no-video i { font-size: 3rem; opacity: .4; }
.lrn-no-video p { font-size: .9rem; }

/* ── Lecture info ── */
.lrn-info {
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--lrn-border);
}
.lrn-lecture-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--lrn-text);
  margin-bottom: .5rem;
  unicode-bidi: plaintext;   /* handle english lecture titles in RTL page */
}
.lrn-lecture-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--lrn-muted);
  margin-bottom: .75rem;
}
.lrn-lecture-meta i { color: var(--lrn-red); }
.lrn-lecture-desc {
  font-size: .9rem;
  color: var(--lrn-muted);
  line-height: 1.7;
  unicode-bidi: plaintext;   /* handle english lecture descriptions */
}

/* ── Navigation bar ── */
.lrn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.75rem;
  border-top: 1px solid var(--lrn-border);
  flex-wrap: wrap;
  margin-top: auto;
}

.lrn-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.2rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background var(--lrn-trans), border-color var(--lrn-trans), color var(--lrn-trans);
}
.lrn-btn-prev {
  background: var(--lrn-surf2);
  color: var(--lrn-muted);
  border: 1px solid var(--lrn-border);
}
.lrn-btn-prev:hover:not(:disabled) { border-color: var(--lrn-red); color: var(--lrn-red); }
.lrn-btn-prev:disabled { opacity: .4; cursor: default; pointer-events: none; }
.lrn-btn-done {
  background: rgba(76,175,80,.15);
  color: var(--lrn-green);
  border: 1px solid rgba(76,175,80,.3);
}
.lrn-btn-done:hover { background: rgba(76,175,80,.25); }
.lrn-btn-done.done {
  background: var(--lrn-green);
  color: #fff;
  border-color: var(--lrn-green);
}
.lrn-btn-next {
  background: var(--lrn-red);
  color: #fff;
  box-shadow: 0 3px 12px rgba(229,57,53,.3);
}
.lrn-btn-next:hover:not(:disabled) { background: var(--lrn-red-dk); }
.lrn-btn-next:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Content tabs (below video) ── */
.lrn-content {
  padding: 1.25rem 1.75rem 2rem;
}
.lrn-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--lrn-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.lrn-tabs::-webkit-scrollbar { display: none; }
.lrn-tab {
  padding: .6rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--lrn-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--lrn-trans), border-color var(--lrn-trans);
}
.lrn-tab.active { color: var(--lrn-red); border-bottom-color: var(--lrn-red); }
.lrn-tab-panel { display: none; }
.lrn-tab-panel.active { display: block; }

/* ── Attachments ── */
.lrn-files { display: flex; flex-direction: column; gap: .55rem; }
.lrn-file-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--lrn-surf2);
  border: 1px solid var(--lrn-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--lrn-text);
  font-size: .85rem;
  font-weight: 600;
  transition: border-color var(--lrn-trans), background var(--lrn-trans);
}
.lrn-file-item i { color: var(--lrn-red); font-size: 1.1rem; }
.lrn-file-item:hover { border-color: var(--lrn-red); background: rgba(229,57,53,.07); }

/* ── Assignment card ── */
.lrn-assign-card {
  background: var(--lrn-surf2);
  border: 1px solid var(--lrn-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: .85rem;
}
.lrn-assign-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--lrn-text);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.lrn-assign-title i { color: #ff9800; }
.lrn-assign-desc { font-size: .85rem; color: var(--lrn-muted); line-height: 1.6; margin-bottom: .5rem; }
.lrn-assign-meta { font-size: .78rem; color: var(--lrn-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.lrn-assign-meta span { display: flex; align-items: center; gap: .3rem; }

/* ── Exam card ── */
.lrn-exam-card {
  background: var(--lrn-surf2);
  border: 1px solid rgba(229,57,53,.25);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: .85rem;
}
.lrn-exam-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--lrn-text);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.lrn-exam-title i { color: var(--lrn-red); }
.lrn-exam-meta { font-size: .78rem; color: var(--lrn-muted); display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.lrn-exam-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: rgba(229,57,53,.15);
  border: 1px solid rgba(229,57,53,.35);
  border-radius: 8px;
  color: var(--lrn-red);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--lrn-trans);
  cursor: pointer;
  font-family: inherit;
}
.lrn-exam-btn:hover { background: rgba(229,57,53,.28); }

/* ════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════ */
.lrn-sidebar {
  background: var(--lrn-surface);
  border-right: 1px solid var(--lrn-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-row: 2;
}
.lrn-sidebar-header {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--lrn-border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--lrn-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.lrn-sidebar-count { font-weight: 400; color: var(--lrn-muted); }
.lrn-sidebar-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--lrn-border) transparent;
}
.lrn-sidebar-list::-webkit-scrollbar { width: 4px; }
.lrn-sidebar-list::-webkit-scrollbar-thumb { background: var(--lrn-border); border-radius: 2px; }

/* Section group */
.lrn-sb-section { border-bottom: 1px solid var(--lrn-border); }
.lrn-sb-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .9rem;
  background: var(--lrn-surf2);
  cursor: pointer;
  user-select: none;
  font-size: .8rem;
  font-weight: 700;
  color: var(--lrn-text);
}
.lrn-sb-sec-header:hover { background: #2a2a2a; }
.lrn-sb-chevron { transition: transform var(--lrn-trans); color: var(--lrn-muted); font-size: .7rem; }

/* Lecture row */
.lrn-sb-lec {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .9rem;
  border-top: 1px solid var(--lrn-border);
  text-decoration: none;
  color: var(--lrn-muted);
  font-size: .8rem;
  transition: background var(--lrn-trans), color var(--lrn-trans);
  position: relative;
}
.lrn-sb-lec:hover { background: rgba(255,255,255,.03); color: var(--lrn-text); }
.lrn-sb-lec.active {
  background: rgba(229,57,53,.1);
  color: var(--lrn-red);
  border-right: 3px solid var(--lrn-red);
}
.lrn-sb-lec.locked { opacity: .55; cursor: not-allowed; pointer-events: none; }
.lrn-sb-lec-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--lrn-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  flex-shrink: 0;
  transition: background var(--lrn-trans), border-color var(--lrn-trans);
}
.lrn-sb-lec-check.done {
  background: var(--lrn-green);
  border-color: var(--lrn-green);
  color: #fff;
}
.lrn-sb-lec-check.active-ring {
  border-color: var(--lrn-red);
}
.lrn-sb-lec-title { flex: 1; line-height: 1.4; unicode-bidi: plaintext; }
.lrn-sb-lec-dur {
  font-size: .72rem;
  color: var(--lrn-muted);
  flex-shrink: 0;
  opacity: .7;
}
.lrn-sb-free-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 20px;
  background: rgba(76,175,80,.15);
  color: var(--lrn-green);
  flex-shrink: 0;
}

/* Mobile sidebar toggle */
.lrn-mobile-sidebar-btn {
  display: none;
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: 1.5rem;
  z-index: 500;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--lrn-red);
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(229,57,53,.45);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  /* ── safe-area bottom padding (phone navigation bar) ── */
  .lrn-shell {
    grid-template-columns: 1fr;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .lrn-nav {
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .lrn-mobile-sidebar-btn {
    display: flex;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .lrn-sidebar {
    position: fixed;
    right: 0;
    /* sidebar top must clear the topbar which itself absorbs the safe-area */
    top: calc(70px + env(safe-area-inset-top, 0px));
    width: 300px;
    height: calc(100dvh - 70px - env(safe-area-inset-top, 0px));
    z-index: 400;
    transform: translateX(100%);
    transition: transform var(--lrn-trans);
    border-right: none;
    border-left: 1px solid var(--lrn-border);
    box-shadow: -8px 0 30px rgba(0,0,0,.4);
  }
  .lrn-sidebar.open { transform: translateX(0); }
  /* ── PDF modal safe area ── */
  #pdfModal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .lrn-topbar {
    /* Push content below Dynamic Island / notch */
    padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
  }
}