/* Mobile layout overrides. Loaded last so it can override every other
   component stylesheet without needing !important. Single breakpoint: below
   768px the icon rail + list panel become an off-canvas drawer, and every
   fixed-width desktop layout collapses to a single column. */

@media (max-width: 768px) {

  /* ---- Topbar ---- */
  .topbar {
    padding: 0 8px;
    gap: 6px;
  }

  .topbar__menu-btn {
    display: flex;
  }

  .topbar__workspace-name {
    max-width: 96px;
    font-size: 12px;
  }

  .topbar__icon-btn--desktop-only {
    display: none;
  }

  .topbar__search {
    flex: 0 0 auto;
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .topbar__search-placeholder,
  .topbar__search-kbd,
  .topbar__ai-pill {
    display: none;
  }

  .topbar__brain span {
    display: none;
  }

  .topbar__brain {
    padding: 4px;
  }

  /* ---- Sidebar + panel become an off-canvas drawer ---- */
  .mobile-backdrop {
    display: none;
  }

  body.mobile-nav-open .mobile-backdrop {
    display: block;
    position: fixed;
    top: var(--cu-topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
  }

  .sidebar,
  .panel {
    position: fixed;
    top: var(--cu-topbar-height);
    bottom: 0;
    height: auto;
    z-index: 160;
    transition: transform 0.25s ease;
  }

  .sidebar {
    left: 0;
    transform: translateX(-100%);
  }

  .panel {
    left: var(--cu-rail-width);
    width: 260px;
    transform: translateX(-120%);
  }

  body.mobile-nav-open .sidebar,
  body.mobile-nav-open .panel {
    transform: translateX(0);
  }

  .main {
    width: 100%;
  }

  /* The panel is a full drawer overlay on mobile, toggled by the hamburger
     button — the width-collapse toggle doesn't make sense here and would
     visually collide with it. */
  .panel-toggle {
    display: none;
  }

  /* ---- Header ---- */
  .header__title {
    font-size: 13px;
    margin-right: 10px;
  }

  .header__views-bar {
    padding: 0 10px;
  }

  .header__controls {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
  }

  .header__controls-left,
  .header__controls-right {
    flex-wrap: wrap;
  }

  .header__month-title {
    font-size: 14px;
  }

  .header__btn--desktop-only {
    display: none;
  }

  /* ---- Calendar: keep legible columns, scroll sideways instead of
     squeezing 7 columns into a phone width ---- */
  .calendar {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .calendar__weekdays,
  .calendar__days,
  .calendar__events,
  .calendar__week-footer {
    grid-template-columns: repeat(7, minmax(112px, 1fr));
    min-width: 784px;
  }

  .calendar__week {
    min-width: 784px;
  }

  /* ---- Quick create popover ---- */
  #quick-create {
    width: calc(100vw - 32px);
    max-width: 360px;
  }

  /* ---- Task detail modal ---- */
  .detail-panel {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    border-radius: 0;
  }

  .detail-modal__topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }

  .detail-modal__created {
    display: none;
  }

  .detail-modal__body {
    flex-direction: column;
    overflow-y: auto;
  }

  .detail-modal__rail {
    display: none;
  }

  .detail-modal__main {
    overflow-y: visible;
    padding: 16px;
  }

  .detail-fields {
    grid-template-columns: 1fr;
  }

  .detail-modal__custom-fields {
    margin-top: 16px;
  }

  .detail-modal__activity {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--cu-border-subtle);
  }

  .detail-modal__activity-feed {
    overflow-y: visible;
    min-height: 120px;
  }
}