/* Desktop Gap Plan stabilization
 * Loaded after the app stylesheet so these rules can safely correct the PR's
 * desktop-only layout without changing mobile behavior.
 */

/* Gap Plan is about the usable intervals, not course identification. Keep class
   blocks as quiet structural boundaries but remove course labels and hover titles
   from the visual interaction layer. */
.gap-day-class {
  padding-inline: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: 0.55;
  pointer-events: none;
}

.gap-day-legend span:first-child {
  display: none;
}

@media (max-width: 47.999rem) {
  /* Avoid transform/translate centering entirely on phones. Radix and Tailwind
     both participate in dialog translation, which made Mobile Safari apply the
     horizontal offset more than once. Pin equal viewport gutters instead. */
  .gap-auxiliary-sheet {
    top: auto !important;
    right: 0.5rem !important;
    bottom: calc(4.25rem + env(safe-area-inset-bottom)) !important;
    left: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68dvh, 38rem);
    margin: 0 !important;
    translate: 0 0 !important;
    transform: none !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Keep the arrival chooser truly centered as well. Its vertical position can
     remain centered, but horizontal placement is defined by equal fixed insets
     rather than Radix's translate-x utility. */
  .residence-settings-dialog {
    right: 1rem !important;
    left: 1rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    translate: 0 -50% !important;
    transform: none !important;
    box-sizing: border-box;
  }
}

@media (min-width: 68.75rem) {
  /* The term switcher should remain part of the document flow on Gap Plan.
     A sticky full-width paint layer caused the dark band/jump visible while scrolling. */
  .desktop-product-shell:has(.gap-plan-layout) .desktop-view-controls {
    position: static;
    z-index: auto;
    padding-block: 0.9rem 0.35rem;
    background: transparent;
    backdrop-filter: none;
  }

  /* Give the day strips the width of the workspace. The previous 22rem reserve
     was permanently squeezing the timeline even when the detail card was not
     visually beside it. */
  .desktop-product-shell:has(.gap-plan-layout) .gap-plan-layout {
    padding-right: 0;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-plan-layout > section {
    padding-bottom: 1.25rem;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-day-strip {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1rem 0.65rem;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-day-hours span:first-child {
    transform: translateX(0);
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-day-hours span:last-child {
    transform: translateX(-100%);
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-day-track {
    min-width: 0;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-day-class,
  .desktop-product-shell:has(.gap-plan-layout) .gap-day-interval {
    min-width: 0;
  }

  /* Keep the selected recommendation attached to the day the user selected.
     Fixed positioning made it float over unrelated content and behave strangely
     as the page scrolled. */
  .desktop-product-shell:has(.gap-plan-layout) .gap-selected-surface {
    position: static;
    inset: auto;
    z-index: auto;
    width: min(100%, 48rem);
    max-width: 48rem;
    max-height: none;
    margin: 0.75rem 0 0.15rem;
    overflow: visible;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-selected-surface:empty {
    display: none;
  }

  .desktop-product-shell:has(.gap-plan-layout) .gap-selected-surface .gap-card {
    width: 100%;
  }

  /* Keep the compact sidebar readable while preserving the useful Gap Plan
     label that the previous desktop navigation exposed. */
  .desktop-nav-copy {
    display: grid;
    min-width: 0;
    line-height: 1.12;
  }

  .desktop-nav-copy small {
    margin-top: 0.14rem;
    color: var(--color-muted-foreground);
    font-size: 0.54rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Campus arrival belongs in the persistent rail on desktop. The real
     ResidenceSettings dialog remains mounted in the hidden product header; this
     visible control forwards to its existing trigger so behavior and state stay
     single-sourced. */
  .desktop-sidebar-utility {
    display: flex;
    width: 100%;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    color: var(--color-muted-foreground);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    transition:
      border-color 160ms ease,
      color 160ms ease,
      background-color 160ms ease;
  }

  .desktop-sidebar-utility:hover,
  .desktop-sidebar-utility:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    color: var(--color-foreground);
  }

  .desktop-sidebar-utility svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }

  .desktop-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.4rem;
    gap: 0.45rem;
    align-items: stretch;
  }

  .desktop-account-row .desktop-sidebar-utility {
    margin-bottom: 0;
  }

  .desktop-theme-toggle {
    display: grid;
    min-height: 2.4rem;
    width: 2.4rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    color: var(--color-muted-foreground);
    transition:
      border-color 160ms ease,
      color 160ms ease,
      background-color 160ms ease;
  }

  .desktop-theme-toggle:hover,
  .desktop-theme-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    color: var(--color-foreground);
  }

  .desktop-theme-toggle svg {
    width: 1rem;
    height: 1rem;
  }

  /* The footer is part of the product workspace too. Offset the whole footer,
     not just its copy, so no text can sit underneath the fixed navigation rail. */
  .desktop-product-shell > footer {
    width: auto;
    margin-left: 13.75rem;
  }

  /* The sidebar already consumes substantial width around tablet/compact-desktop
     breakpoints. Use a little less canvas padding there instead of compressing
     the actual timetable content. */
  @media (max-width: 81.249rem) {
    .desktop-product-shell:has(.gap-plan-layout) .desktop-main {
      padding-inline: 1.5rem;
    }
  }
}

@media (min-width: 90rem) {
  /* On genuinely wide displays the selected card can be a touch wider while the
     timelines still retain ample breathing room. */
  .desktop-product-shell:has(.gap-plan-layout) .gap-selected-surface {
    width: min(100%, 52rem);
    max-width: 52rem;
  }

  .desktop-product-shell > footer {
    margin-left: 15.5rem;
  }
}