/* The existing theme and single-column layout fill wider browser windows.
   Desktop details and sheets follow the same available-width rule below. */
@media (min-width: 768px) {
  .je-app-shell {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    height: var(--app-height, 100dvh) !important;
    min-height: 0 !important;
  }
  .je-shell-body { min-width: 0; }
}
@media (min-width: 768px) {
  /* Keep expanded sections in the scrolling body instead of clipping them. */
  .je-shell-body > div { flex-shrink: 0 !important; }
}
@media (min-width: 768px) and (max-height: 540px) {
  .je-app-shell { overflow-y: auto !important; }
  .je-shell-body { flex: 1 0 auto !important; min-height: 180px !important; overflow: visible !important; }
  .je-app-shell > div:nth-child(3) { position: sticky !important; bottom: 0; }
}

/* Full-page screens, including the cash workspace and nested stock/invoice pages. */
@media (min-width: 768px) {
  .app,
  #root [style*="max-width: 520px"][style*="min-height: 100dvh"],
  .app > [style*="max-width:"][style*="overflow-y: auto"],
  .app > [style*="max-width:"][style*="flex: 1"] {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0;
  }

  /* Finance, payroll and other full-window detail panels. */
  div[style*="position: fixed"][style*="inset: 0"][style*="max-width:"] {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Scrollable forms and sheets share the available overlay width.
     Scope to overlay children/dialogs: table labels, images, toasts and
     the navigation drawer must not inherit workspace dimensions. */
  [style*="position: fixed"][style*="inset: 0"] > div[style*="max-width:"][style*="max-height:"],
  [style*="position: fixed"][style*="inset: 0"] > div[style*="max-width:"][style*="height: 100%"],
  [role="dialog"][aria-modal="true"][style*="max-height:"]:not(.mdraw),
  div[style*="position: fixed"][style*="bottom: 0"][style*="max-width:"][style*="max-height:"],
  .gg-sheet,
  .cfcal-sheet,
  .fixed.inset-0 > div[class*="max-w-"][class*="max-h-"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Remaining compact prompts/forms grow modestly on desktop. */
  [style*="position: fixed"][style*="inset: 0"] > div[style*="max-width:"][style*="width: 100%"]:not([style*="max-height:"]):not([style*="height: 100%"]):not(.gg-sheet) {
    max-width: min(680px, 100%) !important;
  }
}