/* RAVID v58 - Student Page Outer Shell System
   Fokus: kartu paling pinggir / Student Page Outer Shell harus fleksibel,
   lebar konsisten, dan mengikuti tinggi seluruh child pada halaman siswa.
   Tidak mengubah logic, data, backend, auth, atau app.js. */

:root {
  --ravid-v58-shell-max: 1540px;
  --ravid-v58-shell-width: min(var(--ravid-v58-shell-max), calc(100vw - 56px));
  --ravid-v58-shell-pad-x: clamp(20px, 2.15vw, 42px);
  --ravid-v58-shell-pad-y: clamp(20px, 2vw, 38px);
  --ravid-v58-shell-bottom: clamp(36px, 4vw, 76px);
}

/* Active student pages: the OUTER SHELL must be content-driven. */
body:has(#section-student-menu:not(.hidden)) .main-container,
body:has(#section-summary:not(.hidden)) .main-container,
body:has(#section-quiz:not(.hidden)) .main-container,
body:has(#section-video:not(.hidden)) .main-container,
body:has(#section-report:not(.hidden)) .main-container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(100vh - 74px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-inline: clamp(14px, 1.8vw, 28px) !important;
  padding-top: clamp(26px, 2.4vw, 42px) !important;
  padding-bottom: var(--ravid-v58-shell-bottom) !important;
  display: block !important;
}

body:has(#section-student-menu:not(.hidden)) #card-root.card,
body:has(#section-summary:not(.hidden)) #card-root.card,
body:has(#section-quiz:not(.hidden)) #card-root.card,
body:has(#section-video:not(.hidden)) #card-root.card,
body:has(#section-report:not(.hidden)) #card-root.card {
  width: var(--ravid-v58-shell-width) !important;
  max-width: var(--ravid-v58-shell-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
  margin-inline: auto !important;
  padding: var(--ravid-v58-shell-pad-y) var(--ravid-v58-shell-pad-x) !important;
  display: block !important;
  align-items: stretch !important;
  contain: none !important;
}

/* The active section becomes the content surface inside the outer shell. */
#section-student-menu:not(.hidden),
#section-summary:not(.hidden),
#section-quiz:not(.hidden),
#section-video:not(.hidden),
#section-report:not(.hidden) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
  margin-inline: auto !important;
  margin-bottom: 0 !important;
  display: block !important;
  contain: none !important;
}

#section-student-menu:not(.hidden) *,
#section-summary:not(.hidden) *,
#section-quiz:not(.hidden) *,
#section-video:not(.hidden) *,
#section-report:not(.hidden) * {
  box-sizing: border-box !important;
}

/* Common page-level surfaces must also follow the tallest child. */
#section-student-menu:not(.hidden) .student-dashboard-shell,
#section-student-menu:not(.hidden) .student-dashboard-page,
#section-student-menu:not(.hidden) .student-menu-shell,
#section-summary:not(.hidden) .summary-shell,
#section-summary:not(.hidden) .summary-page-shell,
#section-summary:not(.hidden) .summary-content-shell,
#section-quiz:not(.hidden) .quiz-shell,
#section-quiz:not(.hidden) .quiz-page-shell,
#section-video:not(.hidden) .video-shell,
#section-video:not(.hidden) .video-page-shell,
#section-report:not(.hidden) .rv47-shell,
#section-report:not(.hidden) .report-shell {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}

/* Header/hero panels should not force a fixed page height. */
#section-student-menu:not(.hidden) .student-dashboard-hero,
#section-summary:not(.hidden) .learning-header-row,
#section-summary:not(.hidden) .section-header-row,
#section-quiz:not(.hidden) .learning-header-row,
#section-quiz:not(.hidden) .section-header-row,
#section-video:not(.hidden) .learning-header-row,
#section-video:not(.hidden) .section-header-row,
#section-report:not(.hidden) .rv47-hero {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

/* Inner grids: auto-height, no clipping, and children stay in normal flow. */
#section-student-menu:not(.hidden) .student-menu-grid,
#section-student-menu:not(.hidden) .student-activity-grid,
#section-student-menu:not(.hidden) .student-dashboard-grid,
#section-summary:not(.hidden) .summary-layout-grid,
#section-summary:not(.hidden) .summary-grid,
#section-quiz:not(.hidden) .quiz-content,
#section-quiz:not(.hidden) #quiz-content,
#section-quiz:not(.hidden) #quiz-result,
#section-video:not(.hidden) .video-layout,
#section-video:not(.hidden) .video-content-grid,
#section-report:not(.hidden) .rv47-grid,
#section-report:not(.hidden) .report-content-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: stretch !important;
  grid-auto-rows: auto !important;
  contain: none !important;
}

/* Child cards are allowed to grow; parent must wrap them. */
#section-student-menu:not(.hidden) .student-menu-card,
#section-student-menu:not(.hidden) .student-dashboard-card,
#section-summary:not(.hidden) .summary-library-card,
#section-summary:not(.hidden) .summary-reader-card,
#section-summary:not(.hidden) .summary-reading-card,
#section-summary:not(.hidden) .student-summary-list,
#section-quiz:not(.hidden) .quiz-card,
#section-quiz:not(.hidden) .quiz-empty-state,
#section-quiz:not(.hidden) .quiz-result,
#section-video:not(.hidden) .video-player,
#section-video:not(.hidden) .video-list,
#section-video:not(.hidden) #video-list,
#section-report:not(.hidden) .rv47-main-card,
#section-report:not(.hidden) .rv47-panel,
#section-report:not(.hidden) .rv47-side,
#section-report:not(.hidden) .rv47-side-card,
#section-report:not(.hidden) .rv47-table-wrap,
#section-report:not(.hidden) .rv47-learning-actions {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}

/* Page-specific balanced widths while keeping the same outer shell. */
#section-summary:not(.hidden) .summary-layout-grid {
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.65fr) !important;
  gap: clamp(18px, 1.8vw, 30px) !important;
  align-items: start !important;
}

#section-video:not(.hidden) .video-content-grid,
#section-video:not(.hidden) .video-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr) !important;
  gap: clamp(18px, 1.7vw, 28px) !important;
  align-items: stretch !important;
}

#section-report.rv47-report-page:not(.hidden) .rv47-grid,
#section-report:not(.hidden) .rv47-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  gap: clamp(16px, 1.55vw, 24px) !important;
  align-items: stretch !important;
}

/* Tables/list-heavy areas may scroll internally only when needed horizontally, not leak outside parent. */
#section-report:not(.hidden) .rv47-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 4px !important;
}

#section-report:not(.hidden) .rv47-table {
  min-width: 720px !important;
  width: 100% !important;
}

/* Prevent the decorative pseudo-elements from becoming a clipping parent. */
body:has(#section-student-menu:not(.hidden)) #card-root.card::before,
body:has(#section-summary:not(.hidden)) #card-root.card::before,
body:has(#section-quiz:not(.hidden)) #card-root.card::before,
body:has(#section-video:not(.hidden)) #card-root.card::before,
body:has(#section-report:not(.hidden)) #card-root.card::before,
body:has(#section-student-menu:not(.hidden)) #card-root.card::after,
body:has(#section-summary:not(.hidden)) #card-root.card::after,
body:has(#section-quiz:not(.hidden)) #card-root.card::after,
body:has(#section-video:not(.hidden)) #card-root.card::after,
body:has(#section-report:not(.hidden)) #card-root.card::after {
  pointer-events: none !important;
}

@media (min-width: 1600px) {
  :root { --ravid-v58-shell-max: 1600px; }
}

@media (max-width: 1180px) {
  :root {
    --ravid-v58-shell-width: min(100%, calc(100vw - 28px));
    --ravid-v58-shell-pad-x: clamp(16px, 4vw, 24px);
  }

  #section-summary:not(.hidden) .summary-layout-grid,
  #section-video:not(.hidden) .video-content-grid,
  #section-video:not(.hidden) .video-layout,
  #section-report.rv47-report-page:not(.hidden) .rv47-grid,
  #section-report:not(.hidden) .rv47-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #section-report:not(.hidden) .rv47-table {
    min-width: 660px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --ravid-v58-shell-width: calc(100vw - 16px);
    --ravid-v58-shell-pad-x: 14px;
    --ravid-v58-shell-pad-y: 16px;
  }

  body:has(#section-student-menu:not(.hidden)) .main-container,
  body:has(#section-summary:not(.hidden)) .main-container,
  body:has(#section-quiz:not(.hidden)) .main-container,
  body:has(#section-video:not(.hidden)) .main-container,
  body:has(#section-report:not(.hidden)) .main-container {
    padding-inline: 8px !important;
  }
}