/*
 * MedXYZ OS — Responsive strategy
 * Desktop: fixed sidebar + topbar, multi-column grids.
 * Tablet:  sidebar becomes an off-canvas drawer, topbar gains a hamburger.
 * Mobile:  sidebar hidden entirely, bottom navigation takes over,
 *          grids collapse to a single column, tables reflow to stacked cards.
 *
 * Breakpoints are independent from medcommerce-style.css's single 980px
 * breakpoint — MedXYZ OS defines its own scale so it is not coupled to,
 * or broken by, future changes to the existing stylesheet.
 */

/* ---------- Tablet: <= 1180px ---------- */
@media (max-width: 1180px) {
  .medxyz-os__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .medxyz-os__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .medxyz-os__hamburger {
    display: inline-flex;
  }

  .medxyz-os__shell {
    grid-template-columns: 1fr;
  }

  .medxyz-os__sidebar {
    position: fixed;
    top: var(--mxos-mockbar-height);
    bottom: 0;
    left: 0;
    width: var(--mxos-sidebar-width);
    z-index: var(--mxos-z-drawer);
    transform: translateX(-100%);
    transition: transform var(--mxos-transition-normal);
    box-shadow: var(--mxos-shadow-lg);
  }

  .medxyz-os__sidebar[data-open="true"] {
    transform: translateX(0);
  }
}

/* ---------- Mobile: <= 720px ---------- */
@media (max-width: 720px) {
  .medxyz-os__grid,
  .medxyz-os__grid--2,
  .medxyz-os__grid--4 {
    grid-template-columns: 1fr;
  }

  .medxyz-os__workspace {
    padding: var(--mxos-space-4) var(--mxos-space-4) calc(var(--mxos-bottomnav-height) + var(--mxos-space-6));
  }

  .medxyz-os__topbar {
    padding: 0 var(--mxos-space-4);
  }

  .medxyz-os__topbar-right .medxyz-os__badge-label-full {
    display: none;
  }

  .medxyz-os__bottomnav {
    display: flex;
  }

  .medxyz-os__page-title {
    font-size: var(--mxos-font-xl);
  }

  /* Role visibility tables reflow into stacked key/value blocks instead of
     shrinking a wide table — avoids the "shrunk giant table" anti-pattern. */
  .medxyz-os__role-table,
  .medxyz-os__role-table thead,
  .medxyz-os__role-table tbody,
  .medxyz-os__role-table tr {
    display: block;
  }

  .medxyz-os__role-table thead {
    display: none;
  }

  .medxyz-os__role-table tr {
    border-bottom: 1px solid var(--mxos-border);
    padding: var(--mxos-space-2) 0;
  }

  .medxyz-os__role-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--mxos-space-3);
    border-bottom: none;
    padding: 2px 0;
  }

  .medxyz-os__role-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--mxos-text-tertiary);
    flex: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .medxyz-os__sidebar {
    transition: none;
  }
}

/* ---------- Coarse pointer (touch target sizing) ---------- */
@media (pointer: coarse) {
  .medxyz-os__nav-item,
  .medxyz-os__button,
  .medxyz-os__bottomnav-item {
    min-height: 44px;
  }
}