/* ==========================================================================
   AQAR — LMS surfaces (Phase 3)
   Student dashboard · course player (distraction-free) · instructor listing +
   profile. Loaded only on those views (inc/tutor.php). Depends on tokens + tutor.css.
   ========================================================================== */

/* ==========================================================================
   STUDENT DASHBOARD (Papan Pemuka)

   TutorLMS v4 ships its OWN self-contained dashboard UI at /dashboard/. Every
   rule below is scoped to `.aqar-dashboard`, a body class the theme only adds
   when the "Gunakan gaya AQAR pada Papan Pemuka" toggle is on
   (Customizer → AQAR — LMS). Switch it off and Tutor's stock UI shows through
   untouched — that is the whole point of the scoping, so do not unscope these.
   ========================================================================== */
.aqar-dashboard .prose { max-width: none; }
.aqar-dashboard .page-body { padding-top: var(--sp-6); }
.aqar-dashboard .page-hero { background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: var(--sp-7) 0; }

/* The bulk of the re-skin is done by overriding Tutor v4's brand token ramp in
   inc/tutor.php (turquoise instead of blue). These rules only add the AQAR shape:
   softer radii, hairline borders and our shadows. Selectors below are v4's real
   dashboard classes — the v3 names (.tutor-dashboard-permalinks, -menu-item,
   -info-card) do NOT exist in v4 and matched nothing. */

/* Header + shell */
.aqar-dashboard .tutor-dashboard-header {
  background: var(--c-canvas); border-bottom: 1px solid var(--c-line);
}
.aqar-dashboard .tutor-dashboard-header-user-avatar { border-radius: var(--r-pill); }

/* Cards: home cards, course cards, announcements */
.aqar-dashboard .tutor-dashboard-home-card,
.aqar-dashboard .tutor-dashboard-courses-card,
.aqar-dashboard .tutor-dashboard-announcements,
.aqar-dashboard .tutor-dashboard-page .tutor-card {
  border-radius: var(--r-lg); border: 1px solid var(--c-line); box-shadow: var(--sh-sm);
}
.aqar-dashboard .tutor-dashboard-home-card-icon { border-radius: var(--r-md); }
.aqar-dashboard .tutor-dashboard-home-card-avatar { border-radius: var(--r-pill); }

/* Sidebar / layout */
.aqar-dashboard .tutor-dashboard-layout,
.aqar-dashboard .tutor-dashboard-main { background: var(--c-surface); }
.aqar-dashboard .tutor-dashboard-page { color: var(--c-ink); }

/* Enrolled-course progress (also used by the player — kept unscoped) */
.tutor-progress-bar { background: var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.tutor-progress-value { background: var(--c-turquoise); border-radius: var(--r-pill); }

/* Empty states */
.aqar-dashboard .tutor-empty-state,
.aqar-dashboard .tutor-no-course-wrap {
  background: var(--c-surface); border: 1px dashed var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   "Baru" new-course strip (markup comes from the AQAR Core plugin).
   Gentle and dismissible — never a blocking modal.
   -------------------------------------------------------------------------- */
/* Tutor fires this hook above its own dashboard chrome, so the strip can land as
   a top-level element — constrain and centre it so it reads as a deliberate banner
   rather than stray full-bleed text. */
.aqar-new-course-strip {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  box-sizing: border-box; max-width: var(--container);
  margin: var(--sp-4) auto var(--sp-5);
  background: var(--c-gold-soft); border: 1px solid #E7D5A8;
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: #6f5716;
  box-shadow: var(--sh-sm);
}
.aqar-new-course-badge {
  flex: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--c-gold); color: #fff; padding: 3px 10px; border-radius: var(--r-pill);
}
.aqar-new-course-text { flex: 1; min-width: 0; }
.aqar-new-course-text a { color: #6f5716; font-weight: 700; text-decoration: underline; }
.aqar-new-course-text a:hover { color: var(--c-ink); }
.aqar-new-course-dismiss {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: none; background: transparent; color: #8a6d1f;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.aqar-new-course-dismiss:hover { background: rgba(0,0,0,.06); color: var(--c-ink); }

/* ==========================================================================
   COURSE PLAYER — distraction-free
   TutorLMS renders its own chrome in spotlight mode; when spotlight is off we
   swap the site header for this slim bar (template-parts/header/player-header).
   ========================================================================== */
/* Opaque, like the site header: blurring a sticky bar repaints it on every
   scroll frame, and the player is the one place a dropped frame is felt. */
.player-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
}
.player-header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
  height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.player-exit { gap: var(--sp-1); }

/* Full-bleed content while learning; no distractions. */
body.aqar-course-player .site-main { padding: 0; }
body.aqar-course-player .wrap { max-width: none; }

/* Tutor spotlight / learning-area shell */
.tutor-course-single-content-wrapper { gap: 0; }
.tutor-course-single-sidebar-wrapper {
  border-right: 1px solid var(--c-line); background: var(--c-surface);
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header { font-weight: 700; color: var(--c-ink); }
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body a:hover { color: var(--c-turquoise-600); }

/* Current / completed lesson in the curriculum list */
.tutor-course-topic-item.is-active,
.tutor-course-single-sidebar-wrapper .active {
  background: var(--c-tint); color: var(--c-turquoise-700);
}
.tutor-icon-circle-mark-line, .tutor-icon-circle-mark { color: var(--c-success); }

/* Lesson body: comfortable reading measure, mobile-first */
#tutor-single-entry-content { padding: var(--sp-6) var(--sp-5); }
#tutor-single-entry-content .tutor-lesson-content,
#tutor-single-entry-content .tutor-quiz-wrap { max-width: 900px; margin: 0 auto; }
#tutor-single-entry-content video,
#tutor-single-entry-content iframe { width: 100%; border-radius: var(--r-md); }

/* Mobile progress / mark-complete strip */
.tutor-spotlight-mobile-progress-complete {
  background: #fff; border-top: 1px solid var(--c-line);
  position: sticky; bottom: 0; z-index: 10;
}

@media (max-width: 860px) {
  .tutor-course-single-sidebar-wrapper { border-right: none; border-bottom: 1px solid var(--c-line); }
  #tutor-single-entry-content { padding: var(--sp-5) var(--sp-4); }
}

/* ==========================================================================
   INSTRUCTORS — listing + public profile
   ========================================================================== */
.tutor-instructor-card,
.tutor-instructor-list-item {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); text-align: center; padding: var(--sp-6) var(--sp-5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tutor-instructor-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.tutor-instructor-card .tutor-avatar,
.tutor-instructor-card img { border-radius: var(--r-pill); }
.tutor-instructor-name, .tutor-instructor-card h3 { font-size: var(--fs-h4); color: var(--c-ink); margin: var(--sp-3) 0 2px; }
.tutor-instructor-designation { font-size: var(--fs-sm); color: var(--c-turquoise-600); font-weight: 600; }

/* Public profile header */
.tutor-user-public-profile,
.tutor-profile-header {
  background: linear-gradient(160deg, var(--c-teal-deep), var(--c-turquoise-700));
  color: #fff; border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6);
}
.tutor-user-public-profile h1,
.tutor-user-public-profile h2,
.tutor-profile-header h1 { color: #fff; }
.tutor-user-public-profile .tutor-color-muted { color: #bfe4e3 !important; }