/*
 * Master–detail (grid + preview panel) workspace.
 * Use with GridWithPreviewWorkspace.razor.
 * Surfaces align with corporate-user-management.css (--cum-*) when that sheet is loaded first.
 */
:root {
  --gmd-border: var(--cum-border, rgba(230, 232, 233, 1));
  --gmd-grid-surface: var(--cum-card, rgba(255, 255, 255, 1));
  --gmd-preview-surface: var(--cum-card, rgba(255, 255, 255, 1));
}

/* Full-width row under page header + toolbar: grid | preview */
.gmd-main {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.gmd-grid-col {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gmd-grid-surface);
}

.gmd-grid-col--with-preview {
  flex: 0 0 66.666%;
  border-right: 1px solid var(--gmd-border);
  transition: flex-basis 0.25s ease;
}

.gmd-preview-col {
  flex: 0 0 33.333%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  background: var(--gmd-preview-surface);
  /* Container query root - the preview pane's inner layout adapts to its OWN
     width, not the viewport's. Lets a 320px-wide preview render single-column
     even on a 1920px screen. Forms inside the preview can opt in via:
       @container gmdpreview (max-width: 480px) { … } */
  container-type: inline-size;
  container-name: gmdpreview;
}

/* PreviewExpanded: invert split (grid ~⅓, preview ~⅔) */
.gmd-grid-col--with-preview.gmd-grid-col--with-preview-narrow {
  flex: 0 0 33.333%;
}

.gmd-preview-col.gmd-preview-col--wide {
  flex: 0 0 66.666%;
}

/* Stack the preview pane below the grid only on the xs/sm tiers
   (anything below --bp-md = 768). At md+ (iPad portrait, iPad Pro, all
   laptops/desktops) the two-column layout is preserved. The previous
   1024px breakpoint forced single-column on iPad portrait, which was a
   regression - md tier easily fits two columns side by side.
   The 767.98px literal stays in sync with --bp-md in site.css; CSS @media
   can't dereference custom properties. xl/xxl unchanged. */
@media (max-width: 767.98px) {
  .gmd-main {
    flex-direction: column;
  }

  .gmd-grid-col--with-preview {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 1px solid var(--gmd-border);
    max-height: min(52vh, 420px);
    min-height: 220px;
  }

  .gmd-preview-col {
    flex: 1 1 auto;
    min-height: 200px;
    -webkit-overflow-scrolling: touch;
  }
}