@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url("base.css");
@import url("components.css");
@import url("typography.css");
@import url("auth.css");
@import url("simple-auth.css");
@import url("register.css");
@import url("dashboard.css");
@import url("content-pages.css");
@import url("animations.css");
@import url("classess.css");
@import url("upload.css");
@import url("reports.css");
@import url("student_feedback.css");

/* =========================================================================
   PAGE SCALE

   Every size in this project is a fixed pixel value chosen for a tall desktop
   window. On a 1366x599 laptop viewport that renders larger than intended and
   content runs past the bottom of the screen.

   zoom scales the page uniformly -- type, spacing, AND container widths at the
   same time -- which is what keeps the proportions and the text wrapping
   identical to the intended layout. Shrinking font sizes alone leaves the
   containers at full width, so headings re-wrap and the layout changes shape.

   Keyed to viewport height so a tall window still gets the full-size design.
   The same block lives in css/auth.css for the login page; between these files
   every page that renders HTML is covered.
========================================================================= */

@media (max-height: 700px) {
    body { zoom: 0.70; }
}

@media (max-height: 560px) {
    body { zoom: 0.60; }
}

/* =========================================================================
   PAGE SCALE COMPENSATION

   The zoom rule above shrinks the whole page on a short viewport. zoom does NOT
   shrink the viewport itself, so anything sized to 100vh keeps measuring the
   full screen and then renders at a fraction of it -- leaving a strip of bare
   background across the bottom where the layout stops short.

   Dividing by the same factor cancels that: the element measures proportionally
   larger, the zoom scales it back down, and it covers the screen exactly.

   Split by property on purpose -- turning a min-height rule into a fixed height
   (or the reverse) would change how those layouts grow. Must stay in sync with
   the zoom values above.
========================================================================= */

@media (max-height: 700px) {
    body.classes-page,
    body.user-guide-page,
    body.report-result-body,
    body.reports-page-body,
    .admin-sidebar,
    .dashboard-clean,
    .dashboard-clean-shell { height: calc(100vh / 0.7); }

    body,
    body.auth-page,
    body.materials-page,
    body.register-hero-page,
    body.reports-page,
    body.student-feedbacks-page,
    body.upload-page,
    body.admin-auth-body,
    .register-hero-wrapper,
    .simple-auth-wrapper,
    .sf-page-wrap,
    .admin-shell,
    .dashboard-clean { min-height: calc(100vh / 0.7); }

    .report-page-shell,
    .reports-page-shell { height: calc((100vh - 40px) / 0.7); }
}

@media (max-height: 560px) {
    body.classes-page,
    body.user-guide-page,
    body.report-result-body,
    body.reports-page-body,
    .admin-sidebar,
    .dashboard-clean,
    .dashboard-clean-shell { height: calc(100vh / 0.6); }

    body,
    body.auth-page,
    body.materials-page,
    body.register-hero-page,
    body.reports-page,
    body.student-feedbacks-page,
    body.upload-page,
    body.admin-auth-body,
    .register-hero-wrapper,
    .simple-auth-wrapper,
    .sf-page-wrap,
    .admin-shell,
    .dashboard-clean { min-height: calc(100vh / 0.6); }

    .report-page-shell,
    .reports-page-shell { height: calc((100vh - 40px) / 0.6); }
}

/* -------------------------------------------------------------------------
   PAGE SCALE COMPENSATION -- max-height

   A capped element ignores a compensated height: .report-page-shell sets BOTH
   height and max-height to calc(100vh - 40px), so raising only the height left
   the cap doing the limiting and the card rendered at about 70% of the screen
   with empty space beneath it.

   Same factor, same reason as the block above.
------------------------------------------------------------------------- */

@media (max-height: 700px) {
    .report-page-shell  { max-height: calc((100vh - 40px) / 0.7); }
    .reports-page-shell { max-height: calc((100vh - 48px) / 0.7); }

    body.reports-page .reports-table-wrap { max-height: calc(58vh / 0.7); }
    body.reports-page .ai-chat-modal      { max-height: calc(82vh / 0.7); }
}

@media (max-height: 560px) {
    .report-page-shell  { max-height: calc((100vh - 40px) / 0.6); }
    .reports-page-shell { max-height: calc((100vh - 48px) / 0.6); }

    body.reports-page .reports-table-wrap { max-height: calc(58vh / 0.6); }
    body.reports-page .ai-chat-modal      { max-height: calc(82vh / 0.6); }
}