/**
 * Photon Grid base styles — master-detail section.
 *
 * Auto-split from base-styles.ts. Concatenated back (in order) by
 * base-styles.ts; edit here, not there. Order is preserved because CSS
 * cascade depends on it.
 */
export declare const masterDetailCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Master/Detail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The detail layer is a sibling of the left/center/right body panels, not a\n   child of any of them \u2014 that is what lets a detail row span the full grid\n   width regardless of pinned columns. Its content wrapper receives only the\n   vertical scroll transform (never the horizontal one center columns use),\n   so it structurally cannot shift when the user scrolls horizontally. */\n.pg-detail-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  /* Stops short of the vertical scrollbar's *current* column width (0 when\n     it's hidden) instead of a blanket inset:0 \u2014 otherwise an expanded\n     detail row's opaque background paints over the native scrollbar\n     whenever one is showing. See ScrollController.syncScrollbars. */\n  right: var(--pg-scrollbar-v-live-width, 0px);\n  overflow: hidden;\n  pointer-events: none;\n  /* Tied with .pg-panel--left/--right's z-index (2, base-styles.ts ~line\n     335) rather than below it \u2014 this layer is a later DOM sibling of the\n     panels (mounted after them in GridRenderer.buildLayout), so an equal\n     z-index still paints on top per normal stacking-order tie-breaking.\n     This is what lets an expanded detail row's opaque background cover the\n     pinned panels' own edge box-shadow instead of that shadow bleeding\n     across the full-width detail content underneath (the panels are\n     full-viewport-height flex items, so their shadow would otherwise span\n     every detail row too, not just their own pinned cells). Sticky Master/\n     Detail rows are unaffected by this ordering \u2014 they live in the\n     independent, always-on-top .pg-sticky-layer below, not here. */\n  z-index: 2;\n}\n.pg-detail-layer__content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  /* Same rebased offset the data-row panels use \u2014 detail containers are\n     positioned by RowPositionSheet too, so they must share its origin.\n     See the note above .pg-panel__content in panels.css.ts. */\n  transform: translateY(var(--pg-row-offset-y, 0px));\n}\n/* Sticky Master/Detail row layer \u2014 a TOP-LEVEL sibling of the left/center/\n   right panels and of .pg-detail-layer (not nested inside any of them).\n   .pg-panel--left/--right set their own explicit z-index for pinned-column\n   elevation, which makes each one its own stacking context \u2014 anything\n   nested inside is trapped there and can never out-rank a sibling like\n   .pg-detail-layer merely by having a higher z-index of its own. Living at\n   this same top level lets one z-index correctly out-rank everything, in\n   every pinned/non-pinned column, with no stacking-context surprises.\n   The container itself is pointer-events:none (so empty space with no\n   sticky row never blocks clicks through to what's underneath); the actual\n   row element re-enables pointer-events at the default (auto). */\n.pg-sticky-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: var(--pg-scrollbar-v-live-width, 0px);\n  bottom: 0;\n  pointer-events: none;\n  z-index: 3;\n}\n/* Pinned-edge shadow PATCH for the sticky band only \u2014 deliberately NOT a\n   full-height divider.\n   The real, full-height pinned-edge shadow lives on .pg-grid__body >\n   .pg-panel--left/--right (panels.css.ts), one stacking level *below*\n   .pg-detail-layer, so an expanded detail row's opaque full-width background\n   covers it and the shadow can never stripe across detail content. This layer\n   sits *above* the detail layer (z-index 3), so anything painted here would\n   punch straight back through a detail row \u2014 which is exactly the artefact\n   these pseudo-elements are height-bounded to avoid.\n   What they patch: a stuck row's own opaque cells sit at z-index 3 and cover\n   the panel-level shadow for that row's height, leaving a visible gap in the\n   divider wherever a sticky row currently is. --pg-sticky-block-height (see\n   GridRenderer.performRender) is exactly the stacked height of the rows\n   currently parked in this layer \u2014 0px when none are \u2014 so the patch spans the\n   stuck band and not one pixel more.\n   Drawn as pseudo-elements of the layer itself rather than on the region\n   elements below: those set overflow:hidden (to clip their rows), which also\n   clips an outward box-shadow, and their height is 100% by structural\n   necessity \u2014 the two constraints that made the old full-height shadow bleed\n   over detail rows in the first place.\n   z-index: 2 is required, not cosmetic \u2014 this shadow bleeds sideways into\n   .pg-sticky-layer__center's own horizontal space, whose row backgrounds are\n   opaque; without it, ::before would lose to a later-painted sibling. */\n.pg-sticky-layer::before,\n.pg-sticky-layer::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  height: var(--pg-sticky-block-height, 0px);\n  pointer-events: none;\n  z-index: 2;\n}\n.pg-sticky-layer::before {\n  left: 0;\n  width: var(--pg-left-panel-width, 0px);\n  box-shadow: var(--pg-shadows-pinned-left, 2px 0 4px rgba(0,0,0,0.06));\n}\n.pg-sticky-layer::after {\n  right: 0;\n  width: var(--pg-right-panel-width, 0px);\n  box-shadow: var(--pg-shadows-pinned-right, -2px 0 4px rgba(0,0,0,0.06));\n}\n/* z-index: 2 keeps a stuck row's pinned cells above the center region's own\n   (z-index: 1) \u2014 the same pinned-column elevation .pg-panel--left has. */\n.pg-sticky-layer__left {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: var(--pg-left-panel-width, 0px);\n  overflow: hidden;\n  z-index: 2;\n}\n.pg-sticky-layer__center {\n  position: absolute;\n  top: 0;\n  left: var(--pg-left-panel-width, 0px);\n  right: var(--pg-right-panel-width, 0px);\n  height: 100%;\n  overflow: hidden;\n  z-index: 1;\n}\n/* Mirrors .pg-panel--center .pg-panel__content's horizontal-scroll transform\n   so a stuck row's center cells track the user's horizontal scroll exactly\n   like the real (non-sticky) center panel does. */\n.pg-sticky-layer__center-inner {\n  position: relative;\n  height: 100%;\n  width: var(--pg-center-content-width, 100%);\n  transform: translateX(var(--pg-scroll-x, 0px));\n}\n/* Right-side twin of .pg-sticky-layer__left \u2014 see the note above it. The\n   pinned-edge shadow is on .pg-sticky-layer::after, not here. */\n.pg-sticky-layer__right {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: var(--pg-right-panel-width, 0px);\n  overflow: hidden;\n}\n.pg-row--sticky {\n  /* The sticky layer container above is pointer-events:none (so empty space\n     with no sticky row never blocks clicks through to whatever's underneath)\n     \u2014 pointer-events inherits, so without this the row itself, and every\n     interactive thing inside it (cells, the tree/group toggle, checkboxes),\n     would silently inherit \"none\" and stop responding to clicks entirely. */\n  pointer-events: auto;\n}\n.pg-row--detail-container {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: auto;\n  padding: 20px;\n  background: var(--pg-colors-surface, #fff);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  opacity: 1;\n  /* Deliberately not tied to the theme's --pg-transitions-duration-* tokens \u2014\n     those are tuned for snappy hover/focus feedback elsewhere; expand/collapse\n     reads better slightly slower and more deliberate. */\n  transition:\n    height 340ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 260ms ease;\n}\n/* Expand: fades in on first mount; height grows for free once RowPositionSheet\n   updates from the initial min/cached height to the auto-measured one. */\n.pg-row--detail-container.pg-row--detail-entering {\n  opacity: 0;\n}\n/* Collapse: DetailRowRenderer.beginCollapse freezes top/height as inline\n   styles first (the RowPositionSheet rule for this row is about to disappear\n   for good), then this class plus height: 0 (set in JS) drives the shrink. */\n.pg-row--detail-container.pg-row--detail-collapsing {\n  opacity: 0;\n  border-bottom-color: transparent;\n}\n.pg-detail-nested-grid-host {\n  width: 100%;\n  height: 100%;\n}\n/* Content wrapper for a custom detail component (masterDetail.renderer).\n   Must have NO height of its own: that is what makes its measured size the\n   component's natural content height rather than an echo of the row height\n   Photon just assigned it, which is what keeps DetailComponentHost's\n   ResizeObserver free of a feedback loop.\n\n   align-self is what actually enforces that. The container also carries\n   .pg-row, which is display:flex + align-items:stretch \u2014 so without this the\n   host would be a stretched flex item with a *definite* cross size equal to\n   the row's content box, and every measurement would read back the height\n   Photon had just set. Combined with the Math.ceil in measureContentHeight, a\n   fractional layout height (device-pixel snapping on a scaled display) then\n   ratchets the panel one pixel taller per measurement instead of settling. */\n.pg-detail-component-host {\n  width: 100%;\n  align-self: flex-start;\n}\n/* Fixed-height / user-resizable rows take their height from somewhere other\n   than the content, so the host fills the row instead of measuring it \u2014\n   applied when detailAutoHeight is false or detailResizable is on. There is no\n   measurement to protect on that path, so the stretch is restored. */\n.pg-detail-component-host--fill {\n  align-self: stretch;\n  height: 100%;\n}\n.pg-detail-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n/* Shown in place of a nested grid when an expanded row has no detail content\n   (EmptyDetailToggleMode.Interactive) \u2014 mirrors the grid's own no-rows overlay\n   so both read as the same state at two different scales. */\n.pg-detail-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pg-spacing-xs, 4px);\n  width: 100%;\n  height: 100%;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-detail-empty__text {\n  font-size: var(--pg-typography-font-size-sm, 0.75rem);\n}\n.pg-detail-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--pg-group-toggle-size, 24px);\n  height: var(--pg-group-toggle-size, 24px);\n  margin-left: 8px;\n  margin-right: 4px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  transition:\n    background var(--pg-transitions-duration-fast, 100ms),\n    color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-detail-toggle:hover {\n  background: var(--pg-colors-row-hover, #f0f7ff);\n  color: var(--pg-colors-text-primary, #1e293b);\n}\n/* Inert spacer with the toggle's exact box metrics (EmptyDetailToggleMode.\n   Placeholder) \u2014 keeps the toggle column's left edge straight on rows with no\n   detail without offering an affordance that leads nowhere. Every property\n   here must track .pg-detail-toggle's box above; nothing else. */\n.pg-detail-toggle-placeholder {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--pg-group-toggle-size, 24px);\n  height: var(--pg-group-toggle-size, 24px);\n  margin-left: 8px;\n  margin-right: 4px;\n  pointer-events: none;\n}\n.pg-detail-resize-handle {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 6px;\n  cursor: row-resize;\n  background: transparent;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-detail-resize-handle:hover {\n  background: var(--pg-colors-resize-handle-color, #e2e8f0);\n}\n\n";
//# sourceMappingURL=master-detail.css.d.ts.map