/* CourseOS · Responsive Layout
   All media queries live in this one file.
   Rollback: delete this file and remove the link from index.html.

   Breakpoints:
   Phone:   max-width 480px  (430px container, current default)
   Tablet:  481px - 1024px   (720px container)
   Desktop: 1025px+          (960px container)
*/

/* ══════════════════════════════════════════════
   PHASE 1: Foundation · Unlock the container
   ══════════════════════════════════════════════ */

/* Phone: keep current 430px behavior */
@media (max-width: 480px) {
  #app {
    max-width: var(--content-phone);
  }
  #bottom-nav {
    max-width: var(--content-phone);
  }
}

/* Tablet: expand to 720px */
@media (min-width: 481px) and (max-width: 1024px) {
  #app {
    max-width: var(--content-tablet);
  }
  #bottom-nav {
    max-width: var(--content-tablet);
  }
  .scroll-area {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Desktop: expand to 960px */
@media (min-width: 1025px) {
  #app {
    max-width: var(--content-desktop);
  }
  #bottom-nav {
    max-width: var(--content-desktop);
  }
  .scroll-area {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* ══════════════════════════════════════════════
   PHASE 2: Navigation + Genie (Fixed Elements)
   ══════════════════════════════════════════════ */

/* Tablet: Genie FAB anchored to container edge */
@media (min-width: 481px) and (max-width: 1024px) {
  .genie-fab {
    right: calc(50% - var(--content-tablet) / 2 + 16px);
  }
  .genie-notification {
    right: calc(50% - var(--content-tablet) / 2 + 8px);
  }
  .genie-card {
    max-width: var(--content-tablet);
  }
  .nav-item {
    min-width: 56px;
    font-size: 10px;
  }
}

/* Desktop: Genie FAB anchored to container edge */
@media (min-width: 1025px) {
  .genie-fab {
    right: calc(50% - var(--content-desktop) / 2 + 16px);
  }
  .genie-notification {
    right: calc(50% - var(--content-desktop) / 2 + 8px);
  }
  .genie-card {
    max-width: var(--content-desktop);
  }
  .nav-item {
    min-width: 64px;
    font-size: 10px;
  }
}

/* ══════════════════════════════════════════════
   PHASE 3: Overlays (Reading, Compose, Notes)
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  /* Reading view: comfortable line length */
  .reading-content {
    max-width: var(--reading-max);
    margin: 0 auto;
  }
  .reading-top-bar {
    max-width: var(--reading-max);
    margin: 0 auto;
  }
  .reading-mode-bar {
    max-width: var(--reading-max);
    margin: 0 auto;
  }
  .reading-bottom-bar {
    max-width: var(--reading-max);
  }

  /* Compose overlay: focused task width */
  .compose-overlay {
    max-width: var(--reading-max);
  }

  /* Notes overlay: comfortable width */
  .notes-overlay {
    max-width: var(--reading-max);
  }
}

/* ══════════════════════════════════════════════
   PHASE 4: Today Screen (Multi-Column Cards)
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  /* Wrap action cards into a 2-column grid */
  #screen-today .scroll-area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-content: flex-start;
  }

  /* Full-width elements span both columns */
  .today-header,
  .next-class-banner,
  .summary-tiles,
  .today-section,
  .admin-alerts {
    width: 100%;
    flex-basis: 100%;
  }

  /* Action cards: 2 per row */
  .action-card {
    width: calc(50% - var(--space-sm));
    flex: 0 0 calc(50% - var(--space-sm));
    margin: 0;
  }
}

/* ══════════════════════════════════════════════
   PHASE 5: Schedule Screen
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  /* Let class names show fully */
  .class-name {
    white-space: normal;
  }
  .class-day-col {
    width: 60px;
  }
}

/* ══════════════════════════════════════════════
   PHASE 6: Courses Screen (2-Column Cards)
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  #screen-courses .scroll-area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-content: flex-start;
  }

  /* Full-width header */
  .courses-header {
    width: 100%;
    flex-basis: 100%;
  }

  /* Course cards: 2 per row */
  .course-card {
    width: calc(50% - var(--space-md));
    flex: 0 0 calc(50% - var(--space-md));
    margin: 0;
  }
}

/* ══════════════════════════════════════════════
   PHASE 7: Library Screen
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  /* Material cards: 2-column grid within each section */
  .library-course-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .library-course-heading {
    width: 100%;
    flex-basis: 100%;
  }

  .material-card {
    width: calc(50% - var(--space-sm));
    flex: 0 0 calc(50% - var(--space-sm));
    margin-bottom: 0;
  }

  /* Required text card stays full width */
  .required-text-card {
    width: 100%;
    flex-basis: 100%;
  }

  /* Upload section stays single column */
  .library-upload {
    width: 100%;
    flex-basis: 100%;
  }
}

/* ══════════════════════════════════════════════
   PHASE 8: Assistant Screen
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  #screen-assistant .scroll-area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-content: flex-start;
  }

  /* Full-width elements */
  .assistant-mode-bar,
  .context-selector,
  .filter-banner,
  .requirements-box,
  .prev-due-hint,
  .catchup-drawer,
  .sec-divider {
    width: 100%;
    flex-basis: 100%;
  }

  /* Collapsed cards: 2 per row */
  .asst-card {
    width: calc(50% - var(--space-sm));
    flex: 0 0 calc(50% - var(--space-sm));
    margin: 0;
  }

  /* Expanded cards: full width */
  .asst-card.expanded {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* ══════════════════════════════════════════════
   PHASE 9: More Screen
   ══════════════════════════════════════════════ */

@media (min-width: 481px) {
  /* Menu items: 2 per row */
  .more-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .more-menu-item {
    width: calc(50% - var(--space-sm));
    flex: 0 0 calc(50% - var(--space-sm));
    margin: 0;
  }
}

/* ══════════════════════════════════════════════
   PHASE 12: Polish + Edge Cases
   ══════════════════════════════════════════════ */

/* Desktop: slightly larger font for readability */
@media (min-width: 1025px) {
  :root {
    --font-base: 15px;
  }
}

/* Modals and dialogs: center on wider screens */
@media (min-width: 481px) {
  .line-sync-overlay,
  .validation-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .line-sync-modal {
    max-width: 500px;
    width: 90%;
  }
}