/* Breakpoints for the office-desktop-first layout to still work on a
   smaller screen - this is an internal reception-desk tool, but staff do
   check it from a phone, so "actually usable on a ~375-430px screen" is a
   real requirement, not just "doesn't look broken on a tablet". */

.mobile-only-btn { display: none; } /* shown only at the phone breakpoint below */

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 72px 1fr; }
  .sidebar-title, .sidebar-user, .sidebar-link span:last-child { display: none; }
  .sidebar-link { justify-content: center; }
  .inbox-layout { grid-template-columns: 200px 1fr; }
  .customer-pane { display: none; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .view-header { flex-wrap: wrap; gap: var(--space-2); }
  dialog { padding: var(--space-4); }
  /* Fixed multi-column grids (shift editor, etc.) stop trying to fit N
     columns into a phone-width dialog and stack instead - the old fixed
     grid-template-columns squeezed every field down to a few unreadable
     pixels on a narrow screen. */
  .shift-row { grid-template-columns: 1fr 1fr; }
  .shift-row .remove-shift { grid-column: 1 / -1; text-align: end; }
}

@media (max-width: 480px) {
  .app-shell { grid-template-columns: 56px 1fr; }
  .view-container { padding: var(--space-3); }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .input { max-width: none; }
  .shift-row { grid-template-columns: 1fr; }

  /* Conversations: show ONE pane at a time instead of squeezing a 3-column
     inbox into a phone screen. Default = the list; selecting a conversation
     adds .mobile-chat-open (components/conversations.js) to switch to the
     chat pane, with a "back" button (only visible here) to return. */
  .inbox-layout { grid-template-columns: 1fr; }
  .conv-list-pane { display: block; }
  .chat-pane { display: none; }
  .inbox-layout.mobile-chat-open .conv-list-pane { display: none; }
  .inbox-layout.mobile-chat-open .chat-pane { display: flex; }
  .mobile-only-btn { display: inline-block; }
}