/* QS mobile layout fix 2026-08-06: the app sidebar is position:fixed 240px wide
   via inline styles inside a display:flex row wrapper, which buried the whole
   form on phones. On small screens we stack the wrapper vertically, flatten the
   sidebar into a compact top bar, and give main the full width. */
@media (max-width: 820px) {
  #root > div:has(> aside) {
    flex-direction: column !important;
  }
  aside {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 12px !important;
    padding: 8px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  aside > div:first-child {
    padding: 6px 8px !important;
    border-bottom: none !important;
  }
  aside nav {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
  }
  aside nav a {
    white-space: nowrap !important;
    padding: 8px 10px !important;
  }
  aside > div:last-child {
    padding: 6px 8px !important;
    border-top: none !important;
  }
  main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Mobile dashboard: 3-column stat grid and header rows overflowed 375px. */
@media (max-width: 820px) {
  main div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  main div[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}