/* Phone-only tweaks for non-index pages (<= 720px)
   Remove the `<link href="./src/styles/phone-pages.css">` from HTML pages to revert. */

.phone-only {
  display: none;
}

@media (max-width: 1024px) {
  /* Timetable: enable day paging on iPad + phone */
  body.timetable-page .phone-only {
    display: inline-flex;
  }

  body.timetable-page .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  body.timetable-page .tt-day-nav {
    margin-left: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(219, 224, 236, 1);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  }

  body.timetable-page .tt-day-nav-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 32px;
    touch-action: manipulation;
    border-radius: 999px;
    border: 1px solid rgba(219, 224, 236, 1);
    background: #ffffff;
    color: inherit;
    font-weight: 900;
    cursor: pointer;
  }

  body.timetable-page .tt-day-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  body.timetable-page .tt-day-nav-label {
    min-width: 44px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  body.timetable-page .timeline-wrap,
  body.timetable-page .timetable-week-grid {
    overflow: hidden;
    max-width: 100%;
  }

  /* Prevent the sliding day columns from showing through the time rail (its background uses transparent stripes). */
  body.timetable-page .timeline-rail {
    position: relative;
    z-index: 6;
    background-color: #f8fafc;
    background-image: repeating-linear-gradient(
      to bottom,
      #f8fafc 0,
      #f8fafc 1px,
      transparent 1px,
      transparent var(--timeline-hour-height)
    );
  }

  body.timetable-page .timeline-rail-head {
    position: sticky;
    z-index: 7;
  }

  body.timetable-page .timeline-cols-head,
  body.timetable-page .timeline-cols {
    position: relative;
    z-index: 1;
  }

  body.timetable-page .timeline-cols-head,
  body.timetable-page .timeline-cols {
    display: flex;
    width: 100%;
    min-width: 0;
    transform: translate3d(calc(var(--tt-day, 0) * -100%), 0, 0);
    transition: transform 0.22s ease;
    will-change: transform;
  }

  body.timetable-page .timeline-day-head,
  body.timetable-page .timeline-day {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.timetable-page .timeline-day-head,
  body.timetable-page .timeline-day {
    border-left: 0;
  }

  body.timetable-page .timeline-day {
    overflow: hidden;
  }
}

@media (max-width: 720px) {
  .phone-only {
    display: inline-flex;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body.calendar-page,
  body.timetable-page,
  body.flashcards-page {
    overflow-x: hidden !important;
    padding: 12px 0 16px !important;
  }

  .calendar-shell,
  .timetable-shell,
  .flashcards-shell {
    width: auto;
    max-width: 100%;
    margin: 0;
    margin-left: max(12px, env(safe-area-inset-left));
    margin-right: max(12px, env(safe-area-inset-right));
    border-radius: 16px;
    box-sizing: border-box;
  }

  /* Calendar: renderWeekCalendar outputs 7 items; show as list */
  .calendar-layout,
  .calendar-month-card,
  .calendar-side,
  .calendar-card,
  .calendar-scroll {
    max-width: 100%;
    min-width: 0;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-day-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .calendar-day {
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    grid-template-rows: auto;
    padding: 12px;
  }

  .calendar-day-top {
    font-weight: 800;
    font-size: 1rem;
  }

  /* Flashcards: ensure no overflow */
  .flashcards-layout,
  .deck-column,
  .flashcards-main {
    max-width: 100%;
  }
}