/* responsive.css — adaptivity layer. Loaded AFTER dashboard.css so these rules win.
   -------------------------------------------------------------------------------
   The layout depends on the window WIDTH only. Height, aspect ratio and orientation
   are not used for layout: with them, a 13" MacBook and a Windows laptop at 150%
   scaling got two different dashboards. Every stylesheet in the project uses this
   one scale:

     phone          up to 619px
     tablet         620 - 899px
     small laptop   900 - 1199px
     desktop        1200px and up
     wide           1600px and up

   So a media query names only max-width 619/899/1199/1599px or min-width
   620/900/1200/1600px; core/tests/test_layout_standard.py fails on anything else.
   Touch is a separate question: (pointer: coarse) makes controls finger-sized and
   never changes the layout. */


/* ===========================================================================
   1. Below 1200px three columns don't fit: the visitors card goes above the
   bookings, so the five-column table keeps the right column's full width.
   =========================================================================== */
@media (max-width: 1199px) {
  .bookings-layout {
    flex-direction: column;
  }

  .visitors-card,
  .bookings-col {
    flex: 1 0 auto;
  }
}


/* ===========================================================================
   2. Tablet and phone: one column.
   =========================================================================== */
@media (max-width: 899px) {
  .content {
    flex-direction: column;
  }

  .col-left,
  .col-right {
    flex: none;
  }

  /* No neighbouring column to share the height with: a list grows with its rows, up
     to a cap, so a busy day doesn't push the rest of the page out of reach. */
  .entries-body {
    height: auto;
    max-height: 230px;
  }

  .visitors-body {
    height: auto;
    max-height: 50vh;
  }

  .table-body {
    height: auto;
    max-height: 60vh;
  }

  /* The least needed column goes first. */
  .table-head,
  .table-row {
    grid-template-columns: 120px 1fr 1.2fr 1.4fr;
  }

  .col-company {
    display: none;
  }
}


/* ===========================================================================
   3. Phone.
   =========================================================================== */
@media (max-width: 619px) {
  .stage {
    padding: var(--space-3);
  }

  /* Date and time side by side, the weather on the line below. */
  .chip-stack {
    flex: 1 1 100%;
    flex-direction: row;
  }

  /* A booking becomes a small card instead of a table row: time and status on top,
     then room, resident and company, one per line, all aligned left. */
  .table-head {
    display: none;
  }

  .table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "time avail"
      "room avail"
      "resident resident"
      "company company";
    column-gap: var(--space-2);
    row-gap: 2px;
    align-items: start;
    padding: var(--space-3) var(--space-2);
  }

  .col-availability {
    grid-area: avail;
  }

  .col-time {
    grid-area: time;
    font-weight: var(--fw-medium);
  }

  .col-room {
    grid-area: room;
  }

  .col-resident {
    grid-area: resident;
    color: var(--text-dim);
  }

  .col-company {
    grid-area: company;
    display: block;
    color: var(--text-dim);
  }

  .col-company:empty {
    display: none;
  }

  /* Bottom panel: the zone tabs would wrap into a stack tall enough to bury the
     rooms, so the strip scrolls sideways as one row instead. The same goes for the
     tab strips of the other pages. */
  .bottom-panel {
    padding: var(--space-3);
  }

  .tabs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
  }

  .floors {
    flex-wrap: wrap;
  }
}


/* ===========================================================================
   4. Phone menu. Twelve icons don't fit a phone, and both Apple's and Google's
   guidelines stop a tab bar at five items. So on a phone the nav becomes a side
   panel behind a menu button, with a name next to every icon. It is the
   browser's own popover: a tap outside or Esc closes it without any script.
   Browsers without popover (iOS before 17) keep the icon bar, wrapped in rows.
   Placeholders for modules that don't exist yet stay out of the panel: an item
   with a name that does nothing reads as broken.
   =========================================================================== */
@media (max-width: 619px) {
  @supports selector(:popover-open) {
    .nav-toggle {
      display: flex;
    }

    .nav-pills:not(:popover-open) {
      display: none;
    }

    .nav-pills:popover-open {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(300px, 85vw);
      flex-direction: column;
      flex-wrap: nowrap;
      gap: var(--space-1);
      padding: var(--space-4);
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      overflow-y: auto;
      backdrop-filter: blur(var(--blur-modal));
      -webkit-backdrop-filter: blur(var(--blur-modal));
    }

    .nav-pills::backdrop {
      background: var(--overlay);
    }

    .nav-pills .pill {
      width: 100%;
      height: 44px;
      justify-content: flex-start;
      gap: var(--space-3);
      padding: 0 var(--space-3);
    }

    .nav-pills .pill__label {
      display: inline;
      font-size: var(--fs-16);
    }

    .nav-pills .pill--soon {
      display: none;
    }

    /* One's own passkeys and signing out sit at the bottom, apart from the pages. */
    .nav-pills .pill--account {
      margin-top: auto;
    }

    .nav-pills .pill--active::after {
      left: auto;
      right: var(--space-3);
      bottom: 50%;
      translate: 0 50%;
    }
  }
}


/* ===========================================================================
   5. Touch targets. 36px is comfortable for a mouse and small for a finger;
   44px is the platform guidance on both iOS and Android. Keyed off the pointer
   type, not the width, because a 1366px tablet is still touch-driven.
   =========================================================================== */
@media (pointer: coarse) {
  .pill,
  .tab,
  .floor-btn,
  .ptab {
    height: 44px;
  }

  .player-btn,
  .player-btn img {
    width: 32px;
    height: 32px;
  }
}