/** * Photon Grid base styles — column-group-header 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 columnGroupHeaderCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column group header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-group-row {\n position: relative;\n flex-shrink: 0;\n height: var(--pg-header-row-height, 44px);\n background: var(--pg-colors-header-background, #f8fafc);\n border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-th--group {\n position: absolute;\n top: 0;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n background: var(--pg-colors-header-background, #f8fafc);\n cursor: pointer;\n outline: none;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n font-weight: var(--pg-typography-header-font-weight, 600);\n font-size: var(--pg-typography-font-size-sm, 13px);\n color: var(--pg-colors-text-primary, #1e293b);\n user-select: none;\n}\n.pg-th--group:hover,\n.pg-th--group:focus-visible { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th--group--collapsed {\n background: var(--pg-colors-background-alt, #f1f5f9);\n justify-content: center;\n}\n/* .pg-th--group--collapsed .pg-th__label { display: none; } */\n.pg-th__collapse-btn {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n margin-right: 4px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n color: var(--pg-colors-text-secondary, #475569);\n transition: background var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__collapse-btn,\n.pg-th--group:focus-visible .pg-th__collapse-btn {\n background: var(--pg-colors-background-alt, #f1f5f9);\n color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__resize-handle--group {\n position: absolute;\n right: 0;\n top: 0;\n width: 6px;\n height: 100%;\n cursor: col-resize;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n color: var(--pg-colors-resize-handle-color, #e2e8f0);\n z-index: 6;\n transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n/* The element carries the leaf handle's class too, for the shared pointer\n wiring \u2014 but a group handle is a hover-revealed grab zone with no divider of\n its own, so the line that class paints is suppressed here. */\n.pg-th__resize-handle--group::after { content: none; }\n.pg-th--group:hover .pg-th__resize-handle--group { opacity: 1; }\n\n/* \u2500\u2500 Flat columns alongside grouped headers \u2500\u2500 */\n/* A flat (ungrouped) leaf column in a grid that has grouped columns must span\n the full header height (group rows + leaf row) so it does not appear as a\n short stub next to taller group header cells.\n Strategy: keep the cell in normal flex flow (preserves horizontal layout),\n give it the combined height, and translateY it upward so its visual top\n aligns with the top of the header area. The panel header overflow:hidden\n clips exactly at the combined height, so nothing leaks outside the header.\n --pg-group-rows-count is set in JS by HeaderRenderer. */\n.pg-th--no-group {\n align-self: flex-start;\n position: relative;\n z-index: 2;\n height: calc((var(--pg-group-rows-count, 0) + 1) * var(--pg-header-row-height, 44px));\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n.pg-group-drop-indicator {\n position: absolute;\n top: 0;\n width: 2px;\n height: var(--pg-header-row-height, 44px);\n background: var(--pg-colors-primary, #2563eb);\n z-index: 20;\n pointer-events: none;\n border-radius: 1px;\n}\n.pg-th-group-filler { position: absolute; top: 0; height: 100%; }\n.pg-th--standalone-filler {\n position: absolute;\n top: 0;\n height: 100%;\n background: var(--pg-colors-header-background, #f8fafc);\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n pointer-events: none;\n cursor: default;\n}\n/* Filler cell in a group row for columns with no ancestor group at this depth.\n Blends with the header background \u2014 makes flat/shallow columns appear to span\n the full header height. No interactive elements, no bottom border. */\n.pg-th--depth-filler {\n position: absolute;\n top: 0;\n height: 100%;\n background: var(--pg-colors-header-background, #f8fafc);\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n pointer-events: none;\n cursor: default;\n z-index: 0;\n}\n\n@keyframes pg-drag-indicator-in { from { opacity: 0; } to { opacity: 1; } }\n\n/* Smooth column-shift animation \u2014 enabled ONLY while actively dragging a column */\n.pg-grid--col-dragging .pg-th[data-col-id],\n.pg-grid--col-dragging .pg-filter-cell[data-col-id],\n.pg-grid--col-dragging .pg-cell[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n will-change: transform;\n}\n.pg-grid--col-dragging .pg-th--no-group[data-col-id] {\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n/* During header auto-scroll the transforms update every RAF tick \u2014 disable the\n transition so cells snap instantly rather than endlessly chasing a moving target */\n.pg-grid--col-autoscrolling .pg-th[data-col-id],\n.pg-grid--col-autoscrolling .pg-filter-cell[data-col-id],\n.pg-grid--col-autoscrolling .pg-cell[data-col-id] {\n transition: none;\n}\n/* Live-preview path (store mutations during drag): suppress all transitions */\n.pg-grid--drag-preview-sync .pg-th[data-col-id],\n.pg-grid--drag-preview-sync .pg-filter-cell[data-col-id],\n.pg-grid--drag-preview-sync .pg-cell[data-col-id] {\n transition: none !important;\n}\n\n/* \u2500\u2500 Structural column-shift animation (ColumnAnimator) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Hiding or showing a column rebuilds the header and every row, so survivors\n * would otherwise jump to their new offsets in one frame. ColumnAnimator FLIPs\n * them across that rebuild through --pg-col-shift-x, deliberately reusing the\n * duration and curve of the live-drag shift above so a column removed from the\n * context menu settles exactly like one dragged out of the way.\n *\n * Separate custom properties from --pg-drag-x on purpose: the two can never be\n * active at once (a drag is not a structural rebuild), and sharing one variable\n * would mean a stale value from either path silently displacing the other. */\n.pg-grid--col-animating .pg-th[data-col-id],\n.pg-grid--col-animating .pg-filter-cell[data-col-id],\n.pg-grid--col-animating .pg-cell[data-col-id] {\n transform: translateX(var(--pg-col-shift-x, 0px));\n opacity: var(--pg-col-shift-opacity, 1);\n transition:\n transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94),\n opacity 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n will-change: transform;\n}\n/* Flat (ungrouped) header cells carry a vertical offset of their own; preserve\n it so an animating grid with column groups does not drop them a row. */\n.pg-grid--col-animating .pg-th--no-group[data-col-id] {\n transform: translate(var(--pg-col-shift-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n/* Invert frame: the offsets are written with transitions off, so the columns\n teleport back to where they visually were instead of animating there. Removed\n one frame later, which is what starts the actual movement. */\n.pg-grid--col-animating-invert .pg-th[data-col-id],\n.pg-grid--col-animating-invert .pg-filter-cell[data-col-id],\n.pg-grid--col-animating-invert .pg-cell[data-col-id] {\n transition: none;\n}\n\n/* \u2500\u2500 Group-header CSS-transform drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Cells shift via --pg-drag-x. The --pg-drag-transition variable is 0ms for\n * the actively-dragged group (injected by display-group-drag-handler.ts) and\n * falls back to the default 180ms for displaced neighbours \u2014 giving AG Grid-\n * style smooth animation for everything except the grabbed group itself.\n * body cells use the same variable so leaf columns and data rows stay in sync.\n */\n.pg-grid--group-dragging .pg-th--group {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n will-change: transform;\n}\n.pg-grid--group-dragging .pg-th[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-filter-cell[data-col-id],\n.pg-grid--group-dragging .pg-cell[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-th--depth-filler {\n transform: translateX(var(--pg-drag-x, 0px));\n}\n.pg-grid--group-dragging .pg-th--no-group[data-col-id] {\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n\n/* Column drag ghost (floating preview chip that follows the cursor).\n *\n * Positioned by transform rather than left/top: a translation is resolved on the\n * compositor, while left/top dirty layout and paint on every write. The drag\n * handlers publish the cursor position as --pg-ghost-x / --pg-ghost-y (see\n * DragGhost) and this rule composes it with the chip's own vertical centring, so\n * that offset survives.\n */\n.pg-col-drag-ghost {\n position: fixed;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 9999;\n height: var(--pg-drag-ghost-height, 40px);\n display: flex;\n align-items: center;\n gap: var(--pg-drag-ghost-gap, 8px);\n padding: 5px 12px 5px 10px;\n background: var(--pg-colors-drag-ghost-background, var(--pg-colors-drag-preview-background, var(--pg-colors-surface, #fff)));\n border: 2px solid var(--pg-colors-drag-ghost-border-color, #ddd);\n border-radius: var(--pg-borders-radius-sm, 6px);\n box-shadow:\n 0 8px 30px rgba(0, 0, 0, 0.08),\n 0 2px 10px rgba(59, 130, 246, 0.08);\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n color: var(--pg-colors-header-text, #374151);\n white-space: nowrap;\n user-select: none;\n transform: translate3d(var(--pg-ghost-x, -9999px), var(--pg-ghost-y, -9999px), 0) translateY(-50%);\n will-change: transform;\n transition:\n border-color var(--pg-transitions-duration-fast, 100ms),\n box-shadow var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-col-drag-ghost__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--pg-colors-primary, #2563eb);\n opacity: 0.7;\n}\n.pg-col-drag-ghost__label {\n flex: 1;\n min-width: 0;\n margin-top: -4px\n}\n\n/* Default icon visibility */\n.pg-col-drag-ghost__icon--move { display: inline-flex; }\n.pg-col-drag-ghost__icon--ban { display: none; }\n.pg-col-drag-ghost__icon--arrow-left { display: none; }\n.pg-col-drag-ghost__icon--arrow-right { display: none; }\n\n/* Hide-column state: amber ghost + eyeOff icon */\n.pg-col-drag-ghost__icon--hide { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--hide { display: inline-flex; color: var(--pg-colors-warning, #f59e0b); }\n.pg-col-drag-ghost--hide {\n border-color: var(--pg-colors-warning, #f59e0b);\n box-shadow: 0 6px 24px rgba(245,158,11,0.13), 0 2px 8px rgba(245,158,11,0.12);\n color: var(--pg-colors-warning, #f59e0b);\n}\n\n/* No-drop state: red ghost + ban icon */\n.pg-col-drag-ghost--no-drop {\n border-color: var(--pg-colors-danger, #ef4444);\n box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n color: var(--pg-colors-danger, #ef4444);\n}\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon { color: var(--pg-colors-danger, #ef4444); }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--ban { display: inline-flex; }\n\n/* Outside-grid drop state: red ghost signals \"drop = hide all columns in group\" */\n.pg-col-drag-ghost--outside {\n border-color: var(--pg-colors-danger, #ef4444);\n box-shadow: 0 6px 24px rgba(239,68,68,0.18), 0 2px 8px rgba(239,68,68,0.14);\n color: var(--pg-colors-danger, #ef4444);\n opacity: 0.85;\n}\n.pg-col-drag-ghost--outside .pg-col-drag-ghost__label::after {\n content: ' (hide)';\n font-size: 10px;\n opacity: 0.7;\n}\n\n/* Auto-scroll state: directional arrow replaces move icon */\n@keyframes pg-scroll-arrow-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }\n@keyframes pg-scroll-arrow-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }\n\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--move,\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--arrow-left {\n display: inline-flex;\n animation: pg-scroll-arrow-left 700ms ease-in-out infinite;\n}\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--arrow-right {\n display: inline-flex;\n animation: pg-scroll-arrow-right 700ms ease-in-out infinite;\n}\n\n"; //# sourceMappingURL=column-group-header.css.d.ts.map