/*
* This file is a theme downloaded from the AG Grid Theme Builder for AG Grid 32.0.2.
*
* See installation docs at https://www.ag-grid.com/javascript-data-grid/applying-theme-builder-styling-grid/
*/
@import url('https://fonts.googleapis.com/css2?family=IBM%20Plex%20Sans:wght@400;700&display=swap');
.ag-root-wrapper, .ag-measurement-container, .ag-apply-theme-variables {
--ag-background-color: var(--ag-inherited-background-color, #4A3045);
--ag-foreground-color: var(--ag-inherited-foreground-color, #E0E0E0);
--ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color));
--ag-accent-color: var(--ag-inherited-accent-color, #E2C86B);
--ag-invalid-color: var(--ag-inherited-invalid-color, #e02525);
--ag-border-color: var(--ag-inherited-border-color, #8A6F8E);
--ag-wrapper-border: var(--ag-inherited-wrapper-border, none);
--ag-row-border: var(--ag-inherited-row-border, solid 1px var(--ag-border-color));
--ag-color-scheme: var(--ag-inherited-color-scheme, dark);
--ag-header-row-border: var(--ag-inherited-header-row-border, var(--ag-row-border));
--ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border));
--ag-column-border: var(--ag-inherited-column-border, solid 1px transparent);
--ag-header-column-border: var(--ag-inherited-header-column-border, none);
--ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%);
--ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color));
--ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color));
--ag-side-panel-border: var(--ag-inherited-side-panel-border, none);
--ag-font-family: var(--ag-inherited-font-family, 'IBM Plex Sans');
--ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 2%));
--ag-header-background-color: var(--ag-inherited-header-background-color, #472E42);
--ag-header-font-family: var(--ag-inherited-header-font-family, var(--ag-font-family));
--ag-header-font-weight: var(--ag-inherited-header-font-weight, 700);
--ag-header-font-size: var(--ag-inherited-header-font-size, 18px);
--ag-header-text-color: var(--ag-inherited-header-text-color, #E2C86B);
--ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent);
--ag-header-cell-hover-background-transition-duration: var(--ag-inherited-header-cell-hover-background-transition-duration, 0.2s);
--ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color));
--ag-subtle-text-color: var(--ag-inherited-subtle-text-color, color-mix(in srgb, transparent, var(--ag-text-color) 50%));
--ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid);
--ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--ag-accent-color));
--ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%));
--ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A);
--ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A);
--ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%));
--ag-row-hover-color: var(--ag-inherited-row-hover-color, color-mix(in srgb, transparent, var(--ag-accent-color) 12%));
--ag-column-hover-color: var(--ag-inherited-column-hover-color, color-mix(in srgb, transparent, var(--ag-accent-color) 5%));
--ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 8%));
--ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, color-mix(in srgb, transparent, var(--ag-background-color) 66%));
--ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, #422B3E);
--ag-border-radius: var(--ag-inherited-border-radius, 8px);
--ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, 6px);
--ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc(var(--ag-grid-size) * 2 * var(--ag-cell-horizontal-padding-scale)));
--ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc(var(--ag-grid-size) * 1.5));
--ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1);
--ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc(var(--ag-cell-widget-spacing) + var(--ag-icon-size)));
--ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, #43a047);
--ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, #e53935);
--ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, #16a08580);
--ag-grid-size: var(--ag-inherited-grid-size, 4px);
--ag-font-size: var(--ag-inherited-font-size, 16px);
--ag-row-height: var(--ag-inherited-row-height, calc(max(var(--ag-icon-size), var(--ag-font-size)) + var(--ag-grid-size) * 3.5 * var(--ag-row-vertical-padding-scale)));
--ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 0.8);
--ag-header-height: var(--ag-inherited-header-height, calc(max(var(--ag-icon-size), var(--ag-font-size)) + var(--ag-grid-size) * 4.25 * var(--ag-header-vertical-padding-scale)));
--ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1);
--ag-popup-shadow: var(--ag-inherited-popup-shadow, 0 0 16px 0 #00000026);
--ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, 0 1px 4px 1px #babfc766);
--ag-drag-ghost-background-color: var(--ag-inherited-drag-ghost-background-color, var(--ag-background-color));
--ag-drag-ghost-border: var(--ag-inherited-drag-ghost-border, solid 1px var(--ag-border-color));
--ag-drag-ghost-shadow: var(--ag-inherited-drag-ghost-shadow, var(--ag-popup-shadow));
--ag-focus-shadow: var(--ag-inherited-focus-shadow, 0 0 0 3px color-mix(in srgb, transparent, var(--ag-accent-color) 50%));
--ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px);
--ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, solid 1px var(--ag-border-color));
--ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, var(--ag-background-color));
--ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, var(--ag-chrome-background-color));
--ag-header-column-resize-handle-display: var(--ag-inherited-header-column-resize-handle-display, block);
--ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%);
--ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px);
--ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color));
--ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc(var(--ag-grid-size) * 1.5));
--ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc(var(--ag-grid-size) * 1.5));
--ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc(var(--ag-grid-size) * 1.5));
--ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-grid-size));
--ag-list-item-height: var(--ag-inherited-list-item-height, calc(var(--ag-icon-size) + var(--ag-widget-vertical-spacing)));
--ag-icon-size: var(--ag-inherited-icon-size, 14px);
--ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px);
--ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px);
--ag-toggle-button-border-width: var(--ag-inherited-toggle-button-border-width, 2px);
--ag-toggle-button-on-border-color: var(--ag-inherited-toggle-button-on-border-color, var(--ag-accent-color));
--ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color));
--ag-toggle-button-off-border-color: var(--ag-inherited-toggle-button-off-border-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 30%));
--ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 30%));
--ag-toggle-button-switch-border-color: var(--ag-inherited-toggle-button-switch-border-color, var(--ag-toggle-button-off-border-color));
--ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color));
--ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px);
--ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--ag-border-radius));
--ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--ag-background-color));
--ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 30%));
--ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--ag-accent-color));
--ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--ag-accent-color));
--ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E'));
--ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--ag-background-color));
--ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 30%));
--ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 30%));
--ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E'));
--ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--ag-background-color));
--ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E'));
--ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%));
--ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%));
--ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%));
--ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--ag-popup-shadow));
--ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color));
--ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size));
--ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px);
--ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%));
--ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 10%));
--ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--ag-popup-shadow));
--ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%));
--ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color));
--ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color));
--ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color));
--ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size));
--ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color));
--ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--ag-chrome-background-color));
--ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--ag-text-color));
--ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color));
--ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7%));
--ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%));
--ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7%));
--ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%));
--ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color));
--ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc(var(--ag-grid-size) * 2 + var(--ag-icon-size)));
--ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d);
--ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194);
--ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b);
--ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4);
--ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-grid-size));
--ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 10%));
--ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, rgba(66, 66, 66, 0.2));
--ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 5%));
--ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0);
--ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0);
--ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent);
--ag-tab-text-color: var(--ag-inherited-tab-text-color, color-mix(in srgb, transparent, var(--ag-text-color) 70%));
--ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, calc(var(--ag-grid-size)));
--ag-tab-top-padding: var(--ag-inherited-tab-top-padding, calc(var(--ag-grid-size)));
--ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, calc(var(--ag-grid-size)));
--ag-tab-spacing: var(--ag-inherited-tab-spacing, 0);
--ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color));
--ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-text-color));
--ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-background-color));
--ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-text-color));
--ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 1px);
--ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, var(--ag-border-color));
--ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, transparent);
--ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 0);
--ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0);
--ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--ag-border-color));
--ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color));
--ag-input-border: var(--ag-inherited-input-border, solid 1px var(--ag-border-color));
--ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--ag-border-radius));
--ag-input-text-color: var(--ag-inherited-input-text-color, var(--ag-text-color));
--ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-grid-size));
--ag-input-height: var(--ag-inherited-input-height, calc(max(var(--ag-icon-size), var(--ag-font-size)) + var(--ag-grid-size) * 2));
--ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color));
--ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px var(--ag-accent-color));
--ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--ag-focus-shadow));
--ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color));
--ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 6%));
--ag-input-disabled-border: var(--ag-inherited-input-disabled-border, var(--ag-input-border));
--ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, color-mix(in srgb, transparent, var(--ag-text-color) 50%));
--ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--ag-input-background-color));
--ag-input-invalid-border: var(--ag-inherited-input-invalid-border, solid 1px var(--ag-invalid-color));
--ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--ag-input-text-color));
}
:has(> .ag-root-wrapper) {
--ag-inherited-background-color: var(--ag-background-color);
--ag-inherited-foreground-color: var(--ag-foreground-color);
--ag-inherited-text-color: var(--ag-text-color);
--ag-inherited-accent-color: var(--ag-accent-color);
--ag-inherited-invalid-color: var(--ag-invalid-color);
--ag-inherited-border-color: var(--ag-border-color);
--ag-inherited-wrapper-border: var(--ag-wrapper-border);
--ag-inherited-row-border: var(--ag-row-border);
--ag-inherited-color-scheme: var(--ag-color-scheme);
--ag-inherited-header-row-border: var(--ag-header-row-border);
--ag-inherited-footer-row-border: var(--ag-footer-row-border);
--ag-inherited-column-border: var(--ag-column-border);
--ag-inherited-header-column-border: var(--ag-header-column-border);
--ag-inherited-header-column-border-height: var(--ag-header-column-border-height);
--ag-inherited-pinned-column-border: var(--ag-pinned-column-border);
--ag-inherited-pinned-row-border: var(--ag-pinned-row-border);
--ag-inherited-side-panel-border: var(--ag-side-panel-border);
--ag-inherited-font-family: var(--ag-font-family);
--ag-inherited-chrome-background-color: var(--ag-chrome-background-color);
--ag-inherited-header-background-color: var(--ag-header-background-color);
--ag-inherited-header-font-family: var(--ag-header-font-family);
--ag-inherited-header-font-weight: var(--ag-header-font-weight);
--ag-inherited-header-font-size: var(--ag-header-font-size);
--ag-inherited-header-text-color: var(--ag-header-text-color);
--ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color);
--ag-inherited-header-cell-hover-background-transition-duration: var(--ag-header-cell-hover-background-transition-duration);
--ag-inherited-cell-text-color: var(--ag-cell-text-color);
--ag-inherited-subtle-text-color: var(--ag-subtle-text-color);
--ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style);
--ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color);
--ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color);
--ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color);
--ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color);
--ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color);
--ag-inherited-row-hover-color: var(--ag-row-hover-color);
--ag-inherited-column-hover-color: var(--ag-column-hover-color);
--ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color);
--ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color);
--ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color);
--ag-inherited-border-radius: var(--ag-border-radius);
--ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius);
--ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding);
--ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing);
--ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale);
--ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size);
--ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color);
--ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color);
--ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color);
--ag-inherited-grid-size: var(--ag-grid-size);
--ag-inherited-font-size: var(--ag-font-size);
--ag-inherited-row-height: var(--ag-row-height);
--ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale);
--ag-inherited-header-height: var(--ag-header-height);
--ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale);
--ag-inherited-popup-shadow: var(--ag-popup-shadow);
--ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow);
--ag-inherited-drag-ghost-background-color: var(--ag-drag-ghost-background-color);
--ag-inherited-drag-ghost-border: var(--ag-drag-ghost-border);
--ag-inherited-drag-ghost-shadow: var(--ag-drag-ghost-shadow);
--ag-inherited-focus-shadow: var(--ag-focus-shadow);
--ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width);
--ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border);
--ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color);
--ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color);
--ag-inherited-header-column-resize-handle-display: var(--ag-header-column-resize-handle-display);
--ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height);
--ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width);
--ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color);
--ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding);
--ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding);
--ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing);
--ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing);
--ag-inherited-list-item-height: var(--ag-list-item-height);
--ag-inherited-icon-size: var(--ag-icon-size);
--ag-inherited-toggle-button-width: var(--ag-toggle-button-width);
--ag-inherited-toggle-button-height: var(--ag-toggle-button-height);
--ag-inherited-toggle-button-border-width: var(--ag-toggle-button-border-width);
--ag-inherited-toggle-button-on-border-color: var(--ag-toggle-button-on-border-color);
--ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color);
--ag-inherited-toggle-button-off-border-color: var(--ag-toggle-button-off-border-color);
--ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color);
--ag-inherited-toggle-button-switch-border-color: var(--ag-toggle-button-switch-border-color);
--ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color);
--ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width);
--ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius);
--ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color);
--ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color);
--ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color);
--ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color);
--ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image);
--ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color);
--ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color);
--ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color);
--ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image);
--ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color);
--ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image);
--ag-inherited-menu-border: var(--ag-menu-border);
--ag-inherited-menu-background-color: var(--ag-menu-background-color);
--ag-inherited-menu-text-color: var(--ag-menu-text-color);
--ag-inherited-menu-shadow: var(--ag-menu-shadow);
--ag-inherited-menu-separator-color: var(--ag-menu-separator-color);
--ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size);
--ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width);
--ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color);
--ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color);
--ag-inherited-dialog-shadow: var(--ag-dialog-shadow);
--ag-inherited-dialog-border: var(--ag-dialog-border);
--ag-inherited-panel-background-color: var(--ag-panel-background-color);
--ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color);
--ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border);
--ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size);
--ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border);
--ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color);
--ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color);
--ag-inherited-tooltip-border: var(--ag-tooltip-border);
--ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color);
--ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border);
--ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color);
--ag-inherited-select-cell-border: var(--ag-select-cell-border);
--ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border);
--ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size);
--ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color);
--ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color);
--ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color);
--ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color);
--ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent);
--ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color);
--ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color);
--ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color);
--ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding);
--ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding);
--ag-inherited-tab-background-color: var(--ag-tab-background-color);
--ag-inherited-tab-text-color: var(--ag-tab-text-color);
--ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding);
--ag-inherited-tab-top-padding: var(--ag-tab-top-padding);
--ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding);
--ag-inherited-tab-spacing: var(--ag-tab-spacing);
--ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color);
--ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color);
--ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color);
--ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color);
--ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width);
--ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color);
--ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color);
--ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width);
--ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration);
--ag-inherited-tab-bar-border: var(--ag-tab-bar-border);
--ag-inherited-input-background-color: var(--ag-input-background-color);
--ag-inherited-input-border: var(--ag-input-border);
--ag-inherited-input-border-radius: var(--ag-input-border-radius);
--ag-inherited-input-text-color: var(--ag-input-text-color);
--ag-inherited-input-padding-start: var(--ag-input-padding-start);
--ag-inherited-input-height: var(--ag-input-height);
--ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color);
--ag-inherited-input-focus-border: var(--ag-input-focus-border);
--ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow);
--ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color);
--ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color);
--ag-inherited-input-disabled-border: var(--ag-input-disabled-border);
--ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color);
--ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color);
--ag-inherited-input-invalid-border: var(--ag-input-invalid-border);
--ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color);
}
/* Part core/part */:where([class^=ag-]),:where([class^=ag-]):after,:where([class^=ag-]):before,:where([class^=ag-]):focus,:where([class^=ag-]):focus-within{box-sizing:border-box;outline:none}:where([class^=ag-]):where(button),:where([class^=ag-]):where(input),:where([class^=ag-]):where(textarea){background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}:where([class^=ag-]):where(button){font-weight:inherit}:where([class^=ag-])::-ms-clear{display:none}ag-grid,ag-grid-angular,ag-grid-aurelia,ag-grid-ng2,ag-grid-polymer{display:block}.ag-aria-description-container{border:0;z-index:9999;clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ag-hidden{display:none!important}.ag-invisible{visibility:hidden!important}.ag-unselectable{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-selectable{-webkit-user-select:text;-moz-user-select:text;user-select:text}.ag-tabs-header{display:flex}.ag-tab{cursor:pointer;position:relative}.ag-tab-guard{display:block;height:0;position:absolute;width:0}.ag-virtual-list-viewport .ag-tab-guard{position:sticky}.ag-tab-guard-top{top:1px}.ag-tab-guard-bottom{bottom:1px}.ag-shake-left-to-right{animation-direction:alternate;animation-duration:.2s;animation-iteration-count:infinite;animation-name:ag-shake-left-to-right}@keyframes ag-shake-left-to-right{0%{padding-left:6px;padding-right:2px}to{padding-left:2px;padding-right:6px}}.ag-watermark{bottom:20px;color:#9b9b9b;opacity:.7;position:absolute;right:25px;transition:opacity 1s ease-out 3s}.ag-watermark:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDkiIGhlaWdodD0iMzYiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiM5QjlCOUIiIGQ9Ik0xOTIuOTkzIDIzLjY1OHYtNy45NDZoLTEzLjU0MWwtNy45NDcgNy45NDZ6TTIwOC4yNSAzLjk1aC0xNi45NzRsLTguMDEgNy45NDdoMjQuOTg0ek0xNjMuNjIyIDMxLjYwNWw0LjA2OS00LjA2OWgxMy43MzJ2Ny45NDdoLTE3LjgwMXoiLz48cGF0aCBmaWxsPSIjOUI5QjlCIiBkPSJNMTY2LjYxIDE5Ljc4aDguNzczbDguMDEtNy45NDZIMTY2LjYxek0xNTcuMDExIDMxLjYwNWg2LjYxMWw3Ljg4My03Ljk0N2gtMTQuNDk0ek0xOTEuMjc2IDMuOTVsLTQuMDY4IDQuMDdIMTYxLjI3Vi4wNzJoMzAuMDA2ek0yMC44NCAzMC4yMDZIOC4zNzhsLTIuMTYyIDUuMzRILjc1TDEyLjI1NyA4LjU5Mmg0Ljc2OEwyOC41MyAzNS41NDZoLTUuNTN6bS0xLjcxNy00LjI2TDE0LjYwOSAxNC45NWwtNC41MTQgMTAuOTk4ek0xMDQuNDM3IDE4LjUwOWMxLjU4OS0yLjM1MiA1LjU5NC0yLjYwNyA3LjI0Ny0yLjYwN3Y0LjU3OGMtMi4wMzQgMC00LjA2OS4wNjMtNS4yNzcuOTUzLTEuMjA3Ljg5LTEuODQzIDIuMDk4LTEuODQzIDMuNTZ2MTAuNTUzaC00Ljk1OVYxNS45MDJoNC43Njh6TTExOS4zNzYgMTUuOTAyaC00Ljk1OHYxOS42NDRoNC45NTh6TTExOS4zNzYgNy4xM2gtNC45NTh2NS44NDhoNC45NTh6TTE0My45NzkgNy4xM3YyOC40MTZoLTQuNzY4bC0uMTI3LTIuOTg4YTguMyA4LjMgMCAwIDEtMi42NyAyLjQ4Yy0xLjA4MS41NzItMi40MTYuODktMy45NDIuODktMS4zMzUgMC0yLjYwNi0uMjU1LTMuNjg3LS43LTEuMTQ0LS41MDgtMi4xNjItMS4xNDQtMi45ODgtMi4wMzRhOS42IDkuNiAwIDAgMS0xLjk3MS0zLjE3OWMtLjUwOC0xLjIwNy0uNjk5LTIuNjA2LS42OTktNC4xMzJzLjI1NC0yLjkyNC42OTktNC4xOTZjLjUwOS0xLjI3MSAxLjE0NS0yLjM1MiAxLjk3MS0zLjI0MnMxLjg0NC0xLjU4OSAyLjk4OC0yLjA5OCAyLjM1Mi0uNzYzIDMuNjg3LS43NjNjMS41MjYgMCAyLjc5Ny4yNTUgMy44NzguODI3czEuOTcxIDEuMzM1IDIuNjcgMi40MTZWNy4xOTNoNC45NTl6bS0xMC40MjYgMjQuNTM4YzEuNjUzIDAgMi45MjQtLjU3MiAzLjk0MS0xLjY1M3MxLjUyNi0yLjU0MyAxLjUyNi00LjMyMy0uNTA5LTMuMTc4LTEuNTI2LTQuMzIyYy0xLjAxNy0xLjA4MS0yLjI4OC0xLjY1My0zLjk0MS0xLjY1My0xLjU5IDAtMi45MjUuNTcyLTMuODc4IDEuNjUzLTEuMDE3IDEuMDgtMS41MjYgMi41NDMtMS41MjYgNC4zMjIgMCAxLjc4LjUwOSAzLjE4IDEuNTI2IDQuMjYgMS4wMTcgMS4xNDQgMi4yODggMS43MTYgMy44NzggMS43MTZNNTcuMjAyIDIwLjM1M0g0NC45MzN2NC4yNTloNi45OTNjLS4xOSAyLjE2MS0xLjAxNyAzLjgxNC0yLjQxNiA1LjE1LTEuMzk4IDEuMjctMy4xNzggMS45MDYtNS40NjcgMS45MDYtMS4yNzEgMC0yLjQ4LS4yNTQtMy40OTYtLjY5OWE3IDcgMCAwIDEtMi43MzQtMS45N2MtLjc2My0uODI3LTEuMzM1LTEuODQ0LTEuNzgtMy4wNTJzLS42MzYtMi40OC0uNjM2LTMuOTQyLjE5LTIuNzMzLjYzNi0zLjk0MWMuMzgxLTEuMjA4IDEuMDE3LTIuMTYyIDEuNzgtMy4wNTIuNzYzLS44MjYgMS42NTMtMS40NjIgMi43MzMtMS45N2E5LjEgOS4xIDAgMCAxIDMuNTYtLjdxNC4wMDUgMCA2LjEwMyAxLjkwN2wzLjMwNi0zLjMwNWMtMi40OC0xLjkwNy01LjY1OC0yLjkyNS05LjQwOS0yLjkyNS0yLjA5NyAwLTQuMDA0LjMxOC01LjcyMSAxLjAxOC0xLjcxNi42OTktMy4xNzkgMS41ODktNC4zODYgMi43OTdBMTIuMSAxMi4xIDAgMCAwIDMxLjIgMTYuMjJjLS42MzUgMS43MTctLjk1MyAzLjYyNC0uOTUzIDUuNjU4cy4zMTggMy45NDIgMS4wMTcgNS42NThjLjcgMS43MTcgMS41OSAzLjE3OSAyLjc5NyA0LjM4N2ExMi4xIDEyLjEgMCAwIDAgNC4zODcgMi43OTdjMS43MTYuNyAzLjYyMyAxLjAxNyA1LjY1NyAxLjAxNyAyLjAzNSAwIDMuODc4LS4zMTggNS41MzEtMS4wMTcgMS42NTMtLjcgMy4wNTItMS41OSA0LjE5Ni0yLjc5N3ExLjcxNi0xLjgxMiAyLjY3LTQuMzg3Yy42MzYtMS43MTYuOTU0LTMuNjIzLjk1NC01LjY1OHYtLjgyNmMtLjE5MS0uMTI3LS4yNTUtLjQ0NS0uMjU1LS43TTk1Ljk4MiAyMC4zNTNoLTEyLjI3djQuMjU5aDYuOTkzYy0uMTkgMi4xNjEtMS4wMTcgMy44MTQtMi40MTYgNS4xNS0xLjM5OCAxLjI3LTMuMTc4IDEuOTA2LTUuNDY3IDEuOTA2LTEuMjcxIDAtMi40OC0uMjU0LTMuNDk2LS42OTlhNyA3IDAgMCAxLTIuNzM0LTEuOTdjLS43NjMtLjgyNy0xLjMzNS0xLjg0NC0xLjc4LTMuMDUycy0uNjM2LTIuNDgtLjYzNi0zLjk0Mi4xOS0yLjczMy42MzYtMy45NDFjLjM4MS0xLjIwOCAxLjAxNy0yLjE2MiAxLjc4LTMuMDUyLjc2My0uODI2IDEuNjUzLTEuNDYyIDIuNzM0LTEuOTdhOS4xIDkuMSAwIDAgMSAzLjU2LS43cTQuMDA1IDAgNi4xMDMgMS45MDdsMy4zMDUtMy4zMDVjLTIuNDc5LTEuOTA3LTUuNjU4LTIuOTI1LTkuNDA4LTIuOTI1LTIuMDk4IDAtNC4wMDUuMzE4LTUuNzIyIDEuMDE4LTEuNzE2LjY5OS0zLjE3OCAxLjU4OS00LjM4NiAyLjc5N2ExMi4xIDEyLjEgMCAwIDAtMi43OTcgNC4zODZjLS42MzYgMS43MTctLjk1NCAzLjYyNC0uOTU0IDUuNjU4cy4zMTggMy45NDIgMS4wMTcgNS42NThjLjcgMS43MTcgMS41OSAzLjE3OSAyLjc5NyA0LjM4N2ExMi4xIDEyLjEgMCAwIDAgNC4zODcgMi43OTdjMS43MTYuNyAzLjYyMyAxLjAxNyA1LjY1OCAxLjAxNyAyLjAzNCAwIDMuODc4LS4zMTggNS41My0xLjAxNyAxLjY1My0uNyAzLjA1Mi0xLjU5IDQuMTk2LTIuNzk3cTEuNzE4LTEuODEyIDIuNjctNC4zODdjLjYzNi0xLjcxNi45NTQtMy42MjMuOTU0LTUuNjU4di0uODI2Yy0uMTktLjEyNy0uMjU1LS40NDUtLjI1NS0uNyIvPjwvc3ZnPg==);background-repeat:no-repeat;background-size:170px 40px;content:"";display:block;height:40px;width:170px}.ag-watermark-text{font-family:Impact,sans-serif;font-size:19px;font-weight:700;opacity:.5}.ag-ltr .ag-watermark-text{padding-left:.7rem}.ag-rtl .ag-watermark-text{padding-right:.7rem}.ag-root-wrapper-body{display:flex;flex-direction:row}.ag-root-wrapper-body.ag-layout-normal{flex:1 1 auto;height:0;min-height:0}.ag-root{display:flex;flex-direction:column;position:relative}.ag-root.ag-layout-auto-height,.ag-root.ag-layout-normal{flex:1 1 auto;overflow:hidden;width:0}.ag-root.ag-layout-normal{height:100%}.ag-body-horizontal-scroll-viewport,.ag-body-vertical-scroll-viewport,.ag-body-viewport,.ag-center-cols-viewport,.ag-floating-bottom-viewport,.ag-floating-top-viewport,.ag-header-viewport,.ag-sticky-bottom-viewport,.ag-sticky-top-viewport,.ag-virtual-list-viewport{flex:1 1 auto;height:100%;min-width:0;overflow:hidden;position:relative} .ag-body-viewport{display:flex;-webkit-overflow-scrolling:touch}.ag-body-viewport.ag-layout-normal{overflow-y:auto}.ag-center-cols-viewport{min-height:100%;overflow-x:auto;width:100%}.ag-body-horizontal-scroll-viewport{overflow-x:scroll}.ag-body-vertical-scroll-viewport{overflow-y:scroll}.ag-virtual-list-viewport{overflow:auto;width:100%}.ag-body-container,.ag-body-horizontal-scroll-container,.ag-body-vertical-scroll-container,.ag-center-cols-container,.ag-floating-bottom-container,.ag-floating-bottom-full-width-container,.ag-floating-top-container,.ag-full-width-container,.ag-header-container,.ag-pinned-left-cols-container,.ag-pinned-right-cols-container,.ag-sticky-bottom-container,.ag-sticky-top-container,.ag-virtual-list-container{position:relative}.ag-floating-bottom-container,.ag-floating-top-container,.ag-header-container,.ag-sticky-bottom-container,.ag-sticky-top-container{height:100%;white-space:nowrap}.ag-center-cols-container,.ag-pinned-right-cols-container{display:block}.ag-body-horizontal-scroll-container{height:100%}.ag-body-vertical-scroll-container{width:100%}.ag-floating-bottom-full-width-container,.ag-floating-top-full-width-container,.ag-full-width-container,.ag-sticky-bottom-full-width-container,.ag-sticky-top-full-width-container{pointer-events:none;position:absolute;top:0}.ag-ltr .ag-floating-bottom-full-width-container,.ag-ltr .ag-floating-top-full-width-container,.ag-ltr .ag-full-width-container,.ag-ltr .ag-sticky-bottom-full-width-container,.ag-ltr .ag-sticky-top-full-width-container{left:0}.ag-rtl .ag-floating-bottom-full-width-container,.ag-rtl .ag-floating-top-full-width-container,.ag-rtl .ag-full-width-container,.ag-rtl .ag-sticky-bottom-full-width-container,.ag-rtl .ag-sticky-top-full-width-container{right:0}.ag-full-width-container{width:100%}.ag-floating-bottom-full-width-container,.ag-floating-top-full-width-container{display:inline-block;height:100%;overflow:hidden;width:100%}.ag-virtual-list-container{overflow:hidden}.ag-body{display:flex;flex:1 1 auto;flex-direction:row!important;min-height:0;position:relative}.ag-body-horizontal-scroll,.ag-body-vertical-scroll{display:flex;min-height:0;min-width:0;position:relative}.ag-body-horizontal-scroll.ag-scrollbar-invisible,.ag-body-vertical-scroll.ag-scrollbar-invisible{bottom:0;position:absolute}.ag-body-horizontal-scroll.ag-scrollbar-invisible.ag-apple-scrollbar,.ag-body-vertical-scroll.ag-scrollbar-invisible.ag-apple-scrollbar{opacity:0;transition:opacity .4s;visibility:hidden}.ag-body-horizontal-scroll.ag-scrollbar-invisible.ag-apple-scrollbar.ag-scrollbar-active,.ag-body-horizontal-scroll.ag-scrollbar-invisible.ag-apple-scrollbar.ag-scrollbar-scrolling,.ag-body-vertical-scroll.ag-scrollbar-invisible.ag-apple-scrollbar.ag-scrollbar-active,.ag-body-vertical-scroll.ag-scrollbar-invisible.ag-apple-scrollbar.ag-scrollbar-scrolling{opacity:1;visibility:visible}.ag-body-horizontal-scroll{width:100%}.ag-body-horizontal-scroll.ag-scrollbar-invisible{left:0;right:0}.ag-body-vertical-scroll{height:100%}.ag-body-vertical-scroll.ag-scrollbar-invisible{top:0;z-index:10}.ag-ltr .ag-body-vertical-scroll.ag-scrollbar-invisible{right:0}.ag-rtl .ag-body-vertical-scroll.ag-scrollbar-invisible{left:0}.ag-force-vertical-scroll{overflow-y:scroll!important}.ag-horizontal-left-spacer,.ag-horizontal-right-spacer{height:100%;min-width:0;overflow-x:scroll}.ag-horizontal-left-spacer.ag-scroller-corner,.ag-horizontal-right-spacer.ag-scroller-corner{overflow-x:hidden}.ag-ltr .ag-column-moving .ag-cell{transition:left .2s}.ag-rtl .ag-column-moving .ag-cell{transition:right .2s}.ag-ltr .ag-column-moving .ag-header-cell{transition:left .2s}.ag-rtl .ag-column-moving .ag-header-cell{transition:right .2s}.ag-ltr .ag-column-moving .ag-header-group-cell{transition:left .2s,width .2s}.ag-rtl .ag-column-moving .ag-header-group-cell{transition:right .2s,width .2s}.ag-row-animation .ag-row{transition:transform .4s,top .4s,opacity .2s}.ag-row-animation .ag-row.ag-after-created{transition:transform .4s,top .4s,height .4s,opacity .2s}.ag-row-no-animation .ag-row{transition:none}.ag-row-loading{align-items:center;display:flex}.ag-row-position-absolute{position:absolute}.ag-row-position-relative{position:relative}.ag-full-width-row{overflow:hidden;pointer-events:all}.ag-row-inline-editing{z-index:1}.ag-row-dragging{z-index:2}.ag-stub-cell{align-items:center;display:flex}.ag-cell{display:inline-block;height:100%;position:absolute;white-space:nowrap}.ag-cell-value{flex:1 1 auto}.ag-cell-value,.ag-group-value{overflow:hidden;text-overflow:ellipsis}.ag-cell-wrap-text{white-space:normal;word-break:break-word}.ag-sparkline-wrapper{height:100%;left:0;position:absolute;top:0;width:100%}.ag-full-width-row .ag-cell-wrapper.ag-row-group{align-items:center;height:100%}.ag-cell .ag-icon{display:inline-block;vertical-align:middle}.ag-popup-child{top:0;z-index:5}.ag-popup-editor{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-large-text-input{display:block}.ag-floating-top{border-bottom:var(--ag-pinned-row-border);display:flex;overflow:hidden;position:relative;white-space:nowrap;width:100%}.ag-pinned-left-floating-top,.ag-pinned-right-floating-top{display:inline-block;min-width:0;overflow:hidden;position:relative}.ag-floating-bottom{border-top:var(--ag-pinned-row-border);display:flex;overflow:hidden;position:relative;white-space:nowrap;width:100%}.ag-pinned-left-floating-bottom,.ag-pinned-right-floating-bottom{display:inline-block;min-width:0;overflow:hidden;position:relative}.ag-sticky-bottom,.ag-sticky-top{background-color:var(--ag-background-color);display:flex;position:absolute;width:100%}.ag-pinned-left-sticky-top,.ag-pinned-right-sticky-top{height:100%;overflow:hidden;position:relative}.ag-sticky-bottom-full-width-container,.ag-sticky-top-full-width-container{height:100%;overflow:hidden;width:100%}.ag-value-slide-out{opacity:1}.ag-ltr .ag-value-slide-out{margin-right:5px;transition:opacity 3s,margin-right 3s}.ag-rtl .ag-value-slide-out{margin-left:5px;transition:opacity 3s,margin-left 3s}:is(.ag-ltr,.ag-rtl) .ag-value-slide-out{transition-timing-function:linear}.ag-value-slide-out-end{opacity:0}.ag-ltr .ag-value-slide-out-end{margin-right:10px}.ag-rtl .ag-value-slide-out-end{margin-left:10px}.ag-opacity-zero{opacity:0!important}.ag-tool-panel-wrapper{cursor:default;display:flex;overflow-x:hidden;overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-select-agg-func-item{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;height:100%;position:relative}.ag-select-agg-func-item>*{flex:none}.ag-select-agg-func-item{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-tool-panel-horizontal-resize{cursor:ew-resize;height:100%;position:absolute;top:0;width:5px;z-index:1}.ag-details-row{width:100%}.ag-details-row-fixed-height{height:100%}.ag-details-grid{width:100%}.ag-details-grid-fixed-height{height:100%}.ag-cell-label-container{align-items:center;display:flex;flex-direction:row-reverse;height:100%;justify-content:space-between;width:100%}.ag-right-aligned-header .ag-cell-label-container{flex-direction:row}.ag-right-aligned-header .ag-header-cell-text{text-align:end}.ag-column-group-icons{display:block}.ag-column-group-icons>*{cursor:pointer}.ag-pill-select{display:flex;flex-direction:column}.ag-pill-select .ag-column-drop-list{padding:0}.ag-pill-select .ag-select{padding-top:var(--ag-grid-size)}.ag-pill-select .ag-picker-field-wrapper{background-color:transparent;border:0}.ag-pill-select .ag-picker-field-display{cursor:pointer}.ag-ltr{direction:ltr}.ag-ltr .ag-body,.ag-ltr .ag-body-horizontal-scroll,.ag-ltr .ag-body-viewport,.ag-ltr .ag-floating-bottom,.ag-ltr .ag-floating-top,.ag-ltr .ag-header,.ag-ltr .ag-sticky-bottom,.ag-ltr .ag-sticky-top{flex-direction:row}.ag-rtl{direction:rtl}.ag-rtl .ag-body,.ag-rtl .ag-body-horizontal-scroll,.ag-rtl .ag-body-viewport,.ag-rtl .ag-floating-bottom,.ag-rtl .ag-floating-top,.ag-rtl .ag-header,.ag-rtl .ag-sticky-bottom,.ag-rtl .ag-sticky-top{flex-direction:row-reverse}.ag-rtl .ag-icon-contracted,.ag-rtl .ag-icon-expanded,.ag-rtl .ag-icon-tree-closed{display:block;transform:rotate(180deg)}.ag-measurement-container{overflow:hidden;visibility:hidden;width:0}.ag-measurement-container div{position:absolute}.ag-group{position:relative;width:100%}.ag-group-title-bar{align-items:center;display:flex;padding:var(--ag-grid-size)}.ag-group-title{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-title-bar .ag-group-title{cursor:default}.ag-group-toolbar{align-items:center;display:flex;padding:var(--ag-grid-size)}.ag-group-container{display:flex}.ag-disabled .ag-group-container{pointer-events:none}.ag-disabled-group-container,.ag-disabled-group-title-bar{opacity:.5}.ag-group-container-horizontal{flex-direction:row;flex-wrap:wrap}.ag-group-container-vertical{flex-direction:column}.ag-group-title-bar-icon{cursor:pointer;flex:none}.ag-ltr .ag-group-title-bar-icon{margin-right:var(--ag-grid-size)}.ag-rtl .ag-group-title-bar-icon{margin-left:var(--ag-grid-size)}.ag-group-item-alignment-stretch .ag-group-item{align-items:stretch}.ag-group-item-alignment-start .ag-group-item{align-items:flex-start}.ag-group-item-alignment-end .ag-group-item{align-items:flex-end}.ag-popup-child:not(.ag-tooltip-custom){box-shadow:var(--ag-popup-shadow)}.ag-rtl{text-align:right}.ag-ltr .ag-pivot-leaf-group{margin-left:min(var(--ag-row-group-indent-size),calc(var(--ag-row-group-indent-size)*var(--ag-indentation-level)))}.ag-rtl .ag-pivot-leaf-group{margin-right:min(var(--ag-row-group-indent-size),calc(var(--ag-row-group-indent-size)*var(--ag-indentation-level)))}.ag-ltr .ag-row-group-leaf-indent{margin-left:calc(var(--ag-cell-widget-spacing) + var(--ag-icon-size))}.ag-rtl .ag-row-group-leaf-indent{margin-right:calc(var(--ag-cell-widget-spacing) + var(--ag-icon-size))}.ag-value-change-delta{padding:0 2px}.ag-value-change-delta-up{color:var(--ag-value-change-delta-up-color)}.ag-value-change-delta-down{color:var(--ag-value-change-delta-down-color)}.ag-value-change-value{background-color:transparent;border-radius:1px;padding-left:1px;padding-right:1px;transition:background-color 1s}.ag-value-change-value-highlight{background-color:var(--ag-value-change-value-highlight-background-color);transition:background-color .1s}.ag-cell-data-changed{background-color:var(--ag-value-change-value-highlight-background-color)!important}.ag-cell-data-changed-animation{background-color:transparent}.ag-cell-highlight{background-color:var(--ag-range-selection-highlight-color)!important}.ag-row{background-color:var(--ag-background-color);border-bottom:var(--ag-row-border);color:var(--ag-cell-text-color);height:var(--ag-row-height);white-space:nowrap;width:100%;--ag-internal-content-line-height:min(calc(var(--ag-row-height) - 1px),var(--ag-line-height,1000px))}.ag-sticky-bottom:after{border-top:var(--ag-row-border);content:"";height:1px;position:absolute;top:0;width:100%}.ag-ltr .ag-sticky-bottom:after{left:0}.ag-rtl .ag-sticky-bottom:after{right:0}.ag-group-contracted,.ag-group-expanded{cursor:pointer}.ag-cell,.ag-full-width-row .ag-cell-wrapper.ag-row-group{border:1px solid transparent;line-height:var(--ag-internal-content-line-height)}.ag-ltr .ag-cell{border-right:var(--ag-column-border)}.ag-rtl .ag-cell{border-left:var(--ag-column-border)}.ag-cell-wrapper{align-items:center;display:flex}.ag-ltr .ag-cell-wrapper{padding-left:calc(var(--ag-indentation-level)*var(--ag-row-group-indent-size))}.ag-rtl .ag-cell-wrapper{padding-right:calc(var(--ag-indentation-level)*var(--ag-row-group-indent-size))}.ag-cell-wrapper.ag-row-group{align-items:flex-start}.ag-cell-wrapper>:not(.ag-cell-value):not(.ag-group-value){align-items:center;display:flex;height:var(--ag-internal-content-line-height)}.ag-ltr .ag-row>.ag-cell-wrapper.ag-row-group{padding-left:calc(var(--ag-cell-horizontal-padding) + var(--ag-row-group-indent-size)*var(--ag-indentation-level))}.ag-rtl .ag-row>.ag-cell-wrapper.ag-row-group{padding-right:calc(var(--ag-cell-horizontal-padding) + var(--ag-row-group-indent-size)*var(--ag-indentation-level))}.ag-ltr .ag-group-contracted,.ag-ltr .ag-group-expanded,.ag-ltr .ag-row-drag,.ag-ltr .ag-selection-checkbox{margin-right:var(--ag-cell-widget-spacing)}.ag-rtl .ag-group-contracted,.ag-rtl .ag-group-expanded,.ag-rtl .ag-row-drag,.ag-rtl .ag-selection-checkbox{margin-left:var(--ag-cell-widget-spacing)}.ag-ltr .ag-group-child-count{margin-left:3px}.ag-rtl .ag-group-child-count{margin-right:3px}.ag-row-highlight-above:after,.ag-row-highlight-below:after{background-color:var(--ag-range-selection-border-color);content:"";height:1px;position:absolute;width:calc(100% - 1px)}.ag-ltr .ag-row-highlight-above:after,.ag-ltr .ag-row-highlight-below:after{left:1px}.ag-rtl .ag-row-highlight-above:after,.ag-rtl .ag-row-highlight-below:after{right:1px}.ag-row-highlight-above:after{top:-1px}.ag-row-highlight-above.ag-row-first:after{top:0}.ag-row-highlight-below:after{bottom:0}.ag-row-odd{background-color:var(--ag-odd-row-background-color)}.ag-row-selected:before{background-color:var(--ag-selected-row-background-color);content:"";display:block;inset:0;pointer-events:none;position:absolute}.ag-row-hover.ag-full-width-row.ag-row-group:before,.ag-row-hover:not(.ag-full-width-row):before{background-color:var(--ag-row-hover-color);content:"";display:block;inset:0;pointer-events:none;position:absolute}.ag-row-hover.ag-row-selected:before{background-color:var(--ag-row-hover-color);background-image:linear-gradient(var(--ag-selected-row-background-color),var(--ag-selected-row-background-color))}.ag-row-hover.ag-full-width-row.ag-row-group>*{position:relative}.ag-column-hover{background-color:var(--ag-column-hover-color)}.ag-ltr .ag-right-aligned-cell{text-align:right}.ag-rtl .ag-right-aligned-cell{text-align:left}.ag-right-aligned-cell .ag-cell-value,.ag-right-aligned-cell .ag-group-value{margin-left:auto}.ag-cell,.ag-full-width-row .ag-cell-wrapper.ag-row-group{-webkit-font-smoothing:subpixel-antialiased}.ag-ltr .ag-cell,.ag-ltr .ag-full-width-row .ag-cell-wrapper.ag-row-group{padding-left:calc(var(--ag-cell-horizontal-padding) - 1px + var(--ag-row-group-indent-size)*var(--ag-indentation-level));padding-right:calc(var(--ag-cell-horizontal-padding) - 1px)}.ag-rtl .ag-cell,.ag-rtl .ag-full-width-row .ag-cell-wrapper.ag-row-group{padding-left:calc(var(--ag-cell-horizontal-padding) - 1px);padding-right:calc(var(--ag-cell-horizontal-padding) - 1px + var(--ag-row-group-indent-size)*var(--ag-indentation-level))}.ag-row>.ag-cell-wrapper{padding-left:calc(var(--ag-cell-horizontal-padding) - 1px);padding-right:calc(var(--ag-cell-horizontal-padding) - 1px)}.ag-row-dragging{cursor:move;opacity:.5}.ag-details-row{background-color:var(--ag-background-color);padding:calc(var(--ag-grid-size)*3.5)}.ag-layout-auto-height .ag-center-cols-container,.ag-layout-auto-height .ag-center-cols-viewport,.ag-layout-print .ag-center-cols-container,.ag-layout-print .ag-center-cols-viewport{min-height:150px}.ag-overlay-loading-wrapper{background-color:var(--ag-modal-overlay-background-color)}.ag-overlay-no-rows-wrapper.ag-layout-auto-height{padding-top:60px}.ag-skeleton-container{align-content:center;height:100%;width:100%}.ag-skeleton-effect{animation:ag-skeleton-loading 1.5s ease-in-out .5s infinite;background-color:var(--ag-row-loading-skeleton-effect-color);border-radius:.25rem;height:1em;width:100%}.ag-ltr .ag-right-aligned-cell .ag-skeleton-effect{margin-left:auto}.ag-rtl .ag-right-aligned-cell .ag-skeleton-effect{margin-right:auto}@keyframes ag-skeleton-loading{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.ag-loading{align-items:center;display:flex;height:100%}.ag-ltr .ag-loading{padding-left:var(--ag-cell-horizontal-padding)}.ag-rtl .ag-loading{padding-right:var(--ag-cell-horizontal-padding)}.ag-ltr .ag-loading-icon{padding-right:var(--ag-cell-widget-spacing)}.ag-rtl .ag-loading-icon{padding-left:var(--ag-cell-widget-spacing)}.ag-icon-loading{animation-duration:1s;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ag-details-row{padding:calc(var(--ag-grid-size)*3.75)}.ag-body-viewport:not(.ag-has-focus) .ag-cell-range-single-cell:not(.ag-cell-inline-editing),.ag-cell-range-selected:not(.ag-cell-focus){background-color:var(--ag-range-selection-background-color)}.ag-cell-range-chart:is(.ag-cell-range-selected:not(.ag-cell-focus),.ag-body-viewport:not(.ag-has-focus) .ag-cell-range-single-cell:not(.ag-cell-inline-editing)){background-color:var(--ag-range-selection-chart-background-color)!important}.ag-cell-range-chart.ag-cell-range-chart-category:is(.ag-cell-range-selected:not(.ag-cell-focus),.ag-body-viewport:not(.ag-has-focus) .ag-cell-range-single-cell:not(.ag-cell-inline-editing)){background-color:var(--ag-range-selection-chart-category-background-color)!important}.ag-cell-range-selected-1:not(.ag-cell-focus),.ag-root:not(.ag-context-menu-open) .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-selected-1:not(.ag-cell-inline-editing){background-color:var(--ag-range-selection-background-color)}.ag-cell-range-selected-2:not(.ag-cell-focus){background-image:linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color))}.ag-cell-range-selected-3:not(.ag-cell-focus){background-image:linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color)),linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color))}.ag-cell-range-selected-4:not(.ag-cell-focus){background-image:linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color)),linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color)),linear-gradient(var(--ag-range-selection-background-color),var(--ag-range-selection-background-color))}.ag-cell.ag-cell-range-selected.ag-cell-range-top:not(.ag-cell-range-single-cell){border-top-color:var(--ag-range-selection-border-color);border-top-style:var(--ag-range-selection-border-style)}.ag-cell.ag-cell-range-selected.ag-cell-range-right:not(.ag-cell-range-single-cell){border-right-color:var(--ag-range-selection-border-color);border-right-style:var(--ag-range-selection-border-style)}.ag-cell.ag-cell-range-selected.ag-cell-range-bottom:not(.ag-cell-range-single-cell){border-bottom-color:var(--ag-range-selection-border-color);border-bottom-style:var(--ag-range-selection-border-style)}.ag-cell.ag-cell-range-selected.ag-cell-range-left:not(.ag-cell-range-single-cell){border-left-color:var(--ag-range-selection-border-color);border-left-style:var(--ag-range-selection-border-style)}.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,.ag-ltr .ag-cell-range-single-cell,.ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle,.ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),.ag-ltr .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,.ag-rtl .ag-cell-focus:not(.ag-cell-range-selected):focus-within,.ag-rtl .ag-cell-range-single-cell,.ag-rtl .ag-cell-range-single-cell.ag-cell-range-handle,.ag-rtl .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),.ag-rtl .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group{border:1px solid;border-color:var(--ag-range-selection-border-color);border-style:var(--ag-range-selection-border-style);outline:initial}.ag-cell.ag-selection-fill-top,.ag-cell.ag-selection-fill-top.ag-cell-range-selected{border-top:1px dashed;border-top-color:var(--ag-range-selection-border-color)}.ag-ltr .ag-cell.ag-selection-fill-right,.ag-ltr .ag-cell.ag-selection-fill-right.ag-cell-range-selected{border-right:1px dashed var(--ag-range-selection-border-color)!important}.ag-rtl .ag-cell.ag-selection-fill-right,.ag-rtl .ag-cell.ag-selection-fill-right.ag-cell-range-selected{border-left:1px dashed var(--ag-range-selection-border-color)!important}.ag-cell.ag-selection-fill-bottom,.ag-cell.ag-selection-fill-bottom.ag-cell-range-selected{border-bottom:1px dashed;border-bottom-color:var(--ag-range-selection-border-color)}.ag-ltr .ag-cell.ag-selection-fill-left,.ag-ltr .ag-cell.ag-selection-fill-left.ag-cell-range-selected{border-left:1px dashed var(--ag-range-selection-border-color)!important}.ag-rtl .ag-cell.ag-selection-fill-left,.ag-rtl .ag-cell.ag-selection-fill-left.ag-cell-range-selected{border-right:1px dashed var(--ag-range-selection-border-color)!important}.ag-fill-handle,.ag-range-handle{background-color:var(--ag-range-selection-border-color);bottom:-1px;height:6px;position:absolute;width:6px}.ag-ltr .ag-fill-handle,.ag-ltr .ag-range-handle{right:-1px}.ag-rtl .ag-fill-handle,.ag-rtl .ag-range-handle{left:-1px}.ag-fill-handle{cursor:cell}.ag-ltr .ag-range-handle{cursor:nwse-resize}.ag-rtl .ag-range-handle{cursor:nesw-resize}.ag-input-wrapper,.ag-picker-field-wrapper{align-items:center;display:flex;flex:1 1 auto;line-height:normal;position:relative}.ag-input-field{align-items:center;display:flex;flex-direction:row}.ag-input-field-input{flex:1 1 auto}.ag-floating-filter-input .ag-input-field-input[type=date]{width:1px}.ag-input-field-input{min-width:0;width:100%}.ag-column-select-header-filter-wrapper .ag-input-wrapper:before,.ag-filter-filter .ag-input-wrapper:before,.ag-filter-toolpanel-search .ag-input-wrapper:before,.ag-mini-filter .ag-input-wrapper:before{background-color:currentColor;content:"";display:block;height:12px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJNNS4zIDlhMy43IDMuNyAwIDEgMCAwLTcuNSAzLjcgMy43IDAgMCAwIDAgNy41Wk0xMC41IDEwLjUgOC4zIDguMiIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJNNS4zIDlhMy43IDMuNyAwIDEgMCAwLTcuNSAzLjcgMy43IDAgMCAwIDAgNy41Wk0xMC41IDEwLjUgOC4zIDguMiIvPjwvc3ZnPg==");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:50%;position:absolute;width:12px}.ag-ltr .ag-column-select-header-filter-wrapper .ag-input-wrapper:before,.ag-ltr .ag-filter-filter .ag-input-wrapper:before,.ag-ltr .ag-filter-toolpanel-search .ag-input-wrapper:before,.ag-ltr .ag-mini-filter .ag-input-wrapper:before{margin-left:var(--ag-grid-size)}.ag-rtl .ag-column-select-header-filter-wrapper .ag-input-wrapper:before,.ag-rtl .ag-filter-filter .ag-input-wrapper:before,.ag-rtl .ag-filter-toolpanel-search .ag-input-wrapper:before,.ag-rtl .ag-mini-filter .ag-input-wrapper:before{margin-right:var(--ag-grid-size)}.ag-ltr .ag-column-select-header-filter-wrapper input.ag-number-field-input,.ag-ltr .ag-column-select-header-filter-wrapper input.ag-text-field-input,.ag-ltr .ag-filter-filter input.ag-number-field-input,.ag-ltr .ag-filter-filter input.ag-text-field-input,.ag-ltr .ag-filter-toolpanel-search input.ag-number-field-input,.ag-ltr .ag-filter-toolpanel-search input.ag-text-field-input,.ag-ltr .ag-mini-filter input.ag-number-field-input,.ag-ltr .ag-mini-filter input.ag-text-field-input{padding-left:26px}.ag-rtl .ag-column-select-header-filter-wrapper input.ag-number-field-input,.ag-rtl .ag-column-select-header-filter-wrapper input.ag-text-field-input,.ag-rtl .ag-filter-filter input.ag-number-field-input,.ag-rtl .ag-filter-filter input.ag-text-field-input,.ag-rtl .ag-filter-toolpanel-search input.ag-number-field-input,.ag-rtl .ag-filter-toolpanel-search input.ag-text-field-input,.ag-rtl .ag-mini-filter input.ag-number-field-input,.ag-rtl .ag-mini-filter input.ag-text-field-input{padding-right:26px}.ag-advanced-filter-header{align-items:center;background-color:var(--ag-header-background-color);border-bottom:var(--ag-header-row-border);display:flex;padding-left:var(--ag-cell-horizontal-padding);padding-right:var(--ag-cell-horizontal-padding);position:relative}.ag-advanced-filter{align-items:center;display:flex;width:100%}.ag-advanced-filter-apply-button,.ag-advanced-filter-builder-button{line-height:normal;white-space:nowrap}.ag-ltr .ag-advanced-filter-apply-button,.ag-ltr .ag-advanced-filter-builder-button{margin-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-advanced-filter-apply-button,.ag-rtl .ag-advanced-filter-builder-button{margin-right:calc(var(--ag-grid-size)*2)}.ag-advanced-filter-builder-button{align-items:center;background-color:unset;border:0;display:flex;font-size:var(--ag-font-size);font-weight:600;padding:var(--ag-grid-size)}.ag-advanced-filter-builder-button:hover:not(:disabled){background-color:var(--ag-row-hover-color)}.ag-advanced-filter-builder-button:not(:disabled){cursor:pointer}.ag-ltr .ag-advanced-filter-builder-button-label{margin-left:var(--ag-grid-size)}.ag-rtl .ag-advanced-filter-builder-button-label{margin-right:var(--ag-grid-size)}.ag-advanced-filter-builder{background-color:var(--ag-chrome-background-color);display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ag-advanced-filter-builder-list{flex:1;overflow:auto}.ag-advanced-filter-builder-button-panel{border-top:var(--ag-advanced-filter-builder-button-bar-border);display:flex;justify-content:flex-end;padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-ltr .ag-advanced-filter-builder .ag-advanced-filter-builder-button-panel .ag-advanced-filter-builder-apply-button,.ag-ltr .ag-advanced-filter-builder .ag-advanced-filter-builder-button-panel .ag-advanced-filter-builder-cancel-button{margin-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-advanced-filter-builder .ag-advanced-filter-builder-button-panel .ag-advanced-filter-builder-apply-button,.ag-rtl .ag-advanced-filter-builder .ag-advanced-filter-builder-button-panel .ag-advanced-filter-builder-cancel-button{margin-right:calc(var(--ag-grid-size)*2)}.ag-advanced-filter-builder-item-wrapper{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;overflow:hidden}.ag-ltr .ag-advanced-filter-builder-item-wrapper{padding-left:calc(var(--ag-icon-size)/2);padding-right:var(--ag-icon-size)}.ag-rtl .ag-advanced-filter-builder-item-wrapper{padding-left:var(--ag-icon-size);padding-right:calc(var(--ag-icon-size)/2)}.ag-virtual-list-viewport .ag-advanced-filter-builder-item-wrapper .ag-tab-guard{position:absolute}.ag-advanced-filter-builder-item-tree-lines>*{width:var(--ag-advanced-filter-builder-indent-size)}.ag-advanced-filter-builder-item-tree-lines .ag-advanced-filter-builder-item-tree-line-root{width:var(--ag-icon-size)}.ag-advanced-filter-builder-item-tree-lines .ag-advanced-filter-builder-item-tree-line-root:before{height:50%;top:50%}.ag-advanced-filter-builder-item-tree-line-horizontal,.ag-advanced-filter-builder-item-tree-line-vertical,.ag-advanced-filter-builder-item-tree-line-vertical-bottom,.ag-advanced-filter-builder-item-tree-line-vertical-top{align-items:center;display:flex;height:100%;position:relative}.ag-advanced-filter-builder-item-tree-line-horizontal:after,.ag-advanced-filter-builder-item-tree-line-horizontal:before,.ag-advanced-filter-builder-item-tree-line-vertical-bottom:after,.ag-advanced-filter-builder-item-tree-line-vertical-bottom:before,.ag-advanced-filter-builder-item-tree-line-vertical-top:after,.ag-advanced-filter-builder-item-tree-line-vertical-top:before,.ag-advanced-filter-builder-item-tree-line-vertical:after,.ag-advanced-filter-builder-item-tree-line-vertical:before{content:"";height:100%;position:absolute}.ag-advanced-filter-builder-item-tree-line-horizontal:after{border-bottom:1px solid var(--ag-border-color);height:50%;top:0;width:calc(var(--ag-advanced-filter-builder-indent-size) - var(--ag-icon-size))}.ag-ltr .ag-advanced-filter-builder-item-tree-line-horizontal:after{left:calc(var(--ag-icon-size)/2)}.ag-rtl .ag-advanced-filter-builder-item-tree-line-horizontal:after{right:calc(var(--ag-icon-size)/2)}.ag-advanced-filter-builder-item-tree-line-vertical:before{top:0;width:calc(var(--ag-advanced-filter-builder-indent-size) - var(--ag-icon-size)/2)}.ag-ltr .ag-advanced-filter-builder-item-tree-line-vertical:before{border-left:1px solid var(--ag-border-color);left:calc(var(--ag-icon-size)/2)}.ag-rtl .ag-advanced-filter-builder-item-tree-line-vertical:before{border-right:1px solid var(--ag-border-color);right:calc(var(--ag-icon-size)/2)}.ag-advanced-filter-builder-item-tree-line-vertical-top:before{height:50%;top:0;width:calc(var(--ag-advanced-filter-builder-indent-size) - var(--ag-icon-size)/2)}.ag-ltr .ag-advanced-filter-builder-item-tree-line-vertical-top:before{border-left:1px solid var(--ag-border-color);left:calc(var(--ag-icon-size)/2)}.ag-rtl .ag-advanced-filter-builder-item-tree-line-vertical-top:before{border-right:1px solid var(--ag-border-color);right:calc(var(--ag-icon-size)/2)}.ag-advanced-filter-builder-item-tree-line-vertical-bottom:before{height:calc(50% - var(--ag-icon-size)*1.5/2);top:calc(50% + var(--ag-icon-size)*1.5/2);width:calc(var(--ag-icon-size)/2)}.ag-ltr .ag-advanced-filter-builder-item-tree-line-vertical-bottom:before{border-left:1px solid var(--ag-border-color);left:calc(var(--ag-icon-size)/2)}.ag-rtl .ag-advanced-filter-builder-item-tree-line-vertical-bottom:before{border-right:1px solid var(--ag-border-color);right:calc(var(--ag-icon-size)/2)}.ag-advanced-filter-builder-item-condition{padding-bottom:var(--ag-grid-size);padding-top:var(--ag-grid-size)}.ag-advanced-filter-builder-item,.ag-advanced-filter-builder-item-buttons,.ag-advanced-filter-builder-item-condition,.ag-advanced-filter-builder-item-tree-lines,.ag-advanced-filter-builder-pill,.ag-advanced-filter-builder-pill-wrapper{align-items:center;display:flex;height:100%}.ag-advanced-filter-builder-pill-wrapper{margin:0 var(--ag-grid-size)}.ag-advanced-filter-builder-pill{border-radius:var(--ag-border-radius);min-height:calc(100% - var(--ag-grid-size)*3);min-width:calc(var(--ag-grid-size)*2);padding:var(--ag-grid-size) calc(var(--ag-grid-size)*2);position:relative}.ag-ltr .ag-advanced-filter-builder-pill .ag-picker-field-display{margin-right:var(--ag-grid-size)}.ag-rtl .ag-advanced-filter-builder-pill .ag-picker-field-display{margin-left:var(--ag-grid-size)}.ag-advanced-filter-builder-pill .ag-advanced-filter-builder-value-number{font-family:monospace;font-weight:700}.ag-advanced-filter-builder-pill .ag-advanced-filter-builder-value-empty{color:var(--ag-subtle-text-color)}.ag-advanced-filter-builder-item-button:focus-visible,.ag-advanced-filter-builder-pill:focus-visible{shadow:var(--ag-focus-shadow)}.ag-advanced-filter-builder-pill-display{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-advanced-filter-builder-join-pill{background-color:var(--ag-advanced-filter-builder-join-pill-color);cursor:pointer}.ag-advanced-filter-builder-column-pill{background-color:var(--ag-advanced-filter-builder-column-pill-color);cursor:pointer}.ag-advanced-filter-builder-option-pill{background-color:var(--ag-advanced-filter-builder-option-pill-color);cursor:pointer}.ag-advanced-filter-builder-value-pill{background-color:var(--ag-advanced-filter-builder-value-pill-color);cursor:text;max-width:140px}.ag-advanced-filter-builder-value-pill .ag-advanced-filter-builder-pill-display{display:block}.ag-advanced-filter-builder-item-buttons>*{margin:0 calc(var(--ag-grid-size)*.5)}.ag-advanced-filter-builder-item-button{color:var(--ag-subtle-text-color);cursor:pointer;position:relative}.ag-advanced-filter-builder-item-button-disabled{cursor:default;opacity:.5}.ag-advanced-filter-builder-virtual-list-container{top:var(--ag-grid-size)}.ag-advanced-filter-builder-virtual-list-item{cursor:default;display:flex;height:var(--ag-list-item-height)}.ag-advanced-filter-builder-virtual-list-item:hover{background-color:var(--ag-row-hover-color)}.ag-advanced-filter-builder-virtual-list-item:hover .ag-advanced-filter-builder-item-button{opacity:100%}.ag-advanced-filter-builder-validation .ag-advanced-filter-builder-invalid,.ag-advanced-filter-builder-virtual-list-item-highlight .ag-advanced-filter-builder-item-button:focus-visible{opacity:100%}.ag-advanced-filter-builder-invalid{color:var(--ag-invalid-color);cursor:default;margin:0 var(--ag-grid-size)}.ag-cell-inline-editing{border-radius:var(--ag-border-radius);padding:0;z-index:1}.ag-cell-inline-editing .ag-cell-edit-wrapper,.ag-cell-inline-editing .ag-cell-editor,.ag-cell-inline-editing .ag-cell-editor .ag-wrapper,.ag-cell-inline-editing .ag-cell-editor input,.ag-cell-inline-editing .ag-cell-wrapper{height:100%;line-height:normal;width:100%}.ag-autocomplete-list-popup,.ag-popup-editor .ag-large-text{background-color:var(--ag-background-color);border-radius:var(--ag-border-radius);box-shadow:var(--ag-dropdown-shadow);padding:0}.ag-large-text-input{height:auto;padding:var(--ag-cell-horizontal-padding)}.ag-rtl .ag-large-text-input textarea{resize:none}.ag-checkbox-edit{padding-left:var(--ag-cell-horizontal-padding);padding-right:var(--ag-cell-horizontal-padding)}.ag-chart{height:100%;width:100%}.ag-chart,.ag-chart-components-wrapper{display:flex;overflow:hidden;position:relative}.ag-chart-components-wrapper{flex:1 1 auto}.ag-chart-canvas-wrapper{flex:1 1 auto;overflow:hidden;position:relative}.ag-chart-menu{display:flex;flex-direction:column;position:absolute;top:16px}.ag-ltr .ag-chart-menu{right:20px}.ag-rtl .ag-chart-menu{left:20px}.ag-chart-docked-container{min-width:var(--ag-chart-menu-panel-width);position:relative}.ag-chart-menu-hidden~.ag-chart-docked-container{display:none}.ag-chart-tabbed-menu{display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.ag-chart-tabbed-menu-header{cursor:default;flex:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-chart-tabbed-menu-body{align-items:stretch;display:flex;flex:1 1 auto;overflow:hidden}.ag-chart-tab{overflow:hidden;overflow-y:auto;width:100%}.ag-chart-settings{overflow-x:hidden}.ag-chart-settings-wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.ag-chart-settings-nav-bar{align-items:center;display:flex;height:30px;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ag-chart-settings-card-selector{align-items:center;display:flex;flex:1 1 auto;height:100%;justify-content:space-around;padding:0 10px}.ag-chart-settings-card-item{background-color:var(--ag-foreground-color);border-radius:4px;cursor:pointer;height:10px;height:8px;position:relative;width:10px;width:8px}.ag-chart-settings-card-item.ag-not-selected{opacity:.2}.ag-chart-settings-card-item:before{background-color:transparent;content:" ";display:block;height:20px;left:50%;margin-left:-10px;margin-top:-10px;position:absolute;top:50%;width:20px}.ag-chart-settings-card-item.ag-selected{background-color:var(--ag-accent-color)}.ag-chart-settings-next,.ag-chart-settings-prev{flex:none;position:relative}.ag-chart-settings-next:focus-within,.ag-chart-settings-prev:focus-within{border-radius:1px;box-shadow:var(--ag-focus-shadow)}.ag-chart-settings-next-button,.ag-chart-settings-prev-button{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.ag-chart-settings-mini-charts-container{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;position:relative}.ag-chart-settings-mini-wrapper{display:flex;flex-direction:column;left:0;min-height:100%;overflow:hidden;position:absolute;top:0;width:100%}.ag-chart-settings-mini-wrapper.ag-animating{transition:left .3s;transition-timing-function:ease-in-out}.ag-chart-mini-thumbnail{cursor:pointer}.ag-chart-mini-thumbnail-canvas{display:block}.ag-chart-advanced-settings-wrapper,.ag-chart-data-wrapper,.ag-chart-format-wrapper{display:flex;flex-direction:column;padding-bottom:16px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-chart-advanced-settings-wrapper,.ag-chart-data-wrapper{height:100%;overflow-y:auto}.ag-chart-advanced-settings{background-color:var(--ag-chrome-background-color)}.ag-chart-advanced-settings,.ag-chart-advanced-settings-wrapper{width:100%}.ag-chart-advanced-settings-wrapper{padding-bottom:0}.ag-chart-advanced-settings-section,.ag-chart-data-section,.ag-chart-format-section{display:flex;margin:0}.ag-chart-advanced-settings-section{border-bottom:1px solid var(--ag-border-color)}.ag-chart-empty-text{align-items:center;background-color:var(--ag-background-color);display:flex;height:100%;justify-content:center;top:0;width:100%}.ag-chart .ag-chart-menu{display:none}.ag-chart-menu-hidden:hover .ag-chart-menu{display:block}.ag-chart .ag-chart-menu-wrapper .ag-chart-menu{display:flex;flex-direction:row;gap:20px;top:8px;width:auto}.ag-ltr .ag-chart .ag-chart-menu-wrapper .ag-chart-menu{justify-content:right;right:calc(var(--ag-cell-horizontal-padding) + var(--ag-grid-size) - 4px)}.ag-rtl .ag-chart .ag-chart-menu-wrapper .ag-chart-menu{justify-content:left;left:calc(var(--ag-cell-horizontal-padding) + var(--ag-grid-size) - 4px)}.ag-charts-font-size-color{align-self:stretch;display:flex;justify-content:space-between}.ag-charts-data-group-item{position:relative}.ag-charts-data-group-item:not(:last-child){margin-bottom:var(--ag-grid-size)}.ag-chart-menu{background:var(--ag-background-color)}.ag-chart-menu,.ag-chart-menu-icon{border-radius:var(--ag-border-radius)}.ag-chart-menu-icon{cursor:pointer;margin:2px 0;opacity:.5;opacity:.8}.ag-chart-menu-icon:hover{opacity:1}.ag-chart-menu-toolbar-button{background-color:unset;border:0;border-radius:1px;padding:0 2px}.ag-chart-mini-thumbnail{border:1px solid var(--ag-border-color);border-radius:5px}.ag-chart-mini-thumbnail.ag-selected{border-color:var(--ag-accent-color);border-width:2px}.ag-chart-mini-thumbnail:focus-visible{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}.ag-chart-data-column-drag-handle{margin-left:var(--ag-grid-size)}.ag-charts-data-group-title-bar,.ag-charts-format-top-level-group-title-bar,.ag-charts-settings-group-title-bar{position:relative}.ag-charts-advanced-settings-top-level-group-title-bar{background-color:unset;position:relative}.ag-charts-advanced-settings-top-level-group-title-bar:focus-visible,.ag-charts-data-group-title-bar:focus-visible,.ag-charts-format-top-level-group-title-bar:focus-visible,.ag-charts-settings-group-title-bar:focus-visible{box-shadow:inset var(--ag-focus-shadow)}.ag-charts-data-group-container{padding:calc(var(--ag-widget-container-vertical-padding)*.5) var(--ag-widget-container-horizontal-padding)}.ag-charts-data-group-container .ag-charts-data-group-item:not(.ag-charts-format-sub-level-group):not(.ag-pill-select):not(.ag-select){height:var(--ag-list-item-height)}.ag-charts-data-group-container .ag-charts-data-group-item.ag-picker-field{margin-top:var(--ag-grid-size)}.ag-charts-advanced-settings-top-level-group-container,.ag-charts-format-top-level-group-container{margin-left:calc(var(--ag-grid-size)*2);padding:var(--ag-grid-size)}.ag-charts-advanced-settings-top-level-group-item,.ag-charts-format-top-level-group-item{margin:var(--ag-grid-size) 0}.ag-charts-format-sub-level-group-container{display:flex;flex-direction:column;gap:var(--ag-widget-vertical-spacing);padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-charts-settings-group-container{display:grid;grid-template-columns:60px 1fr 60px 1fr 60px;padding:var(--ag-grid-size);row-gap:8px}.ag-charts-settings-group-container .ag-chart-mini-thumbnail:nth-child(3n+1){grid-column:1}.ag-charts-settings-group-container .ag-chart-mini-thumbnail:nth-child(3n+2){grid-column:3}.ag-charts-settings-group-container .ag-chart-mini-thumbnail:nth-child(3n+3){grid-column:5}.ag-chart-data-section,.ag-chart-format-section{display:flex;margin:0}.ag-chart-menu-panel{background-color:var(--ag-chrome-background-color)}.ag-ltr .ag-chart-menu-panel{border-left:1px solid var(--ag-border-color)}.ag-rtl .ag-chart-menu-panel{border-right:1px solid var(--ag-border-color)}.ag-chart-tabbed-menu-body{position:relative}.ag-chart-tabbed-menu-body:after{background:linear-gradient(var(--ag-background-color),transparent);content:"";display:block;height:16px;left:0;position:absolute;right:0;top:0}.ag-charts-data-group-title-bar,.ag-charts-format-top-level-group-title-bar,.ag-charts-settings-group-container,.ag-charts-settings-group-title-bar{border-top:none;font-weight:500;padding:0 calc(var(--ag-grid-size)*1.5)}.ag-chart-settings-nav-bar{border-top:1px solid var(--ag-border-color)}.ag-charts-format-sub-level-group-title-bar{background:none;font-weight:500}.ag-chart-data-section .ag-label:not(.ag-group-title-bar),.ag-chart-format-section .ag-label:not(.ag-group-title-bar){color:var(--ag-chart-menu-label-color)}.ag-chart-data-section .ag-label-align-top .ag-label,.ag-chart-format-section .ag-label-align-top .ag-label{margin-bottom:var(--ag-widget-vertical-spacing);margin-top:calc(var(--ag-widget-vertical-spacing)*.5)}.ag-chart-data-section .ag-slider.ag-label-align-top .ag-label,.ag-chart-format-section .ag-slider.ag-label-align-top .ag-label{margin-bottom:0}.ag-chart-data-section label,.ag-chart-format-section label{display:inline-block}.ag-chart-data-wrapper,.ag-chart-format-wrapper,.ag-charts-data-group-container,.ag-charts-data-group-title-bar,.ag-charts-format-sub-level-group,.ag-charts-format-sub-level-group-container,.ag-charts-format-sub-level-group-container>*,.ag-charts-format-sub-level-group-item:last-child,.ag-charts-format-sub-level-group-title-bar,.ag-charts-format-top-level-group,.ag-charts-format-top-level-group .ag-charts-format-top-level-group-container,.ag-charts-format-top-level-group-item,.ag-charts-format-top-level-group-title-bar,.ag-charts-settings-group-container,.ag-charts-settings-group-title-bar{margin:0;padding:0}.ag-charts-data-group,.ag-charts-format-top-level-group{border-top:1px solid var(--ag-border-color)}.ag-charts-data-group-title-bar,.ag-charts-format-top-level-group-title-bar,.ag-charts-settings-group-title-bar{padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-charts-data-group .ag-charts-data-group-container,.ag-charts-format-top-level-group .ag-charts-format-top-level-group-container,.ag-charts-settings-group .ag-charts-settings-group-container{padding:0 var(--ag-widget-container-horizontal-padding)}.ag-charts-format-sub-level-group-title-bar{padding:var(--ag-widget-vertical-spacing) 0}.ag-charts-format-sub-level-group-container{padding-bottom:var(--ag-widget-container-vertical-padding);padding-top:var(--ag-widget-vertical-spacing)}.ag-charts-format-sub-level-group-container>*,.ag-charts-format-sub-level-no-header-group-container>*,.ag-charts-format-top-level-group-container>*{margin-bottom:var(--ag-widget-vertical-spacing)}.ag-chart-advanced-settings-section,.ag-chart-settings-mini-wrapper,.ag-charts-data-group-item{padding-bottom:var(--ag-widget-container-vertical-padding)}.ag-chart-advanced-settings-section{padding-top:var(--ag-widget-container-vertical-padding)}.ag-charts-advanced-settings-top-level-group .ag-charts-advanced-settings-top-level-group-container,.ag-charts-advanced-settings-top-level-group .ag-charts-advanced-settings-top-level-group-title-bar{padding:0 var(--ag-widget-container-horizontal-padding)}.ag-charts-advanced-settings-top-level-group-container{margin:0}.ag-charts-advanced-settings-top-level-group-item{margin-bottom:0;margin-top:calc(var(--ag-widget-vertical-spacing)*2)}.ag-chart-menu{--ag-icon-size:20px;background-color:color-mix(in srgb,transparent,var(--ag-background-color) 30%);padding:4px 2px}.ag-chart-settings-card-item.ag-not-selected:hover{opacity:.35}.ag-column-drop{align-items:center;display:inline-flex;overflow:auto;position:relative;width:100%}.ag-column-drop-cell,.ag-column-drop-list{align-items:center;display:flex}.ag-column-drop-cell{gap:var(--ag-grid-size);position:relative}.ag-column-drop-cell-text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-column-drop-vertical{align-items:stretch;display:flex;flex-direction:column;overflow:hidden}.ag-column-drop-vertical-title-bar{align-items:center;display:flex;flex:none}.ag-column-drop-vertical-list{align-items:stretch;flex-direction:column;flex-grow:1;overflow-x:auto;position:relative}.ag-column-drop-vertical-list>*{flex:none}.ag-column-drop-empty .ag-column-drop-vertical-list{overflow:hidden}.ag-column-drop-vertical-empty-message{display:block}.ag-column-drop.ag-column-drop-horizontal{overflow:hidden;white-space:nowrap}.ag-column-drop-cell-button{cursor:pointer}.ag-column-drop-wrapper{display:flex}.ag-column-drop-horizontal-half-width{display:inline-block;width:50%!important}.ag-column-drop-cell{background:var(--ag-column-drop-cell-background-color);border:var(--ag-column-drop-cell-border);border-radius:500px;padding:calc(var(--ag-grid-size)*.5)}.ag-ltr .ag-column-drop-cell{padding-left:calc(var(--ag-grid-size)*.75)}.ag-rtl .ag-column-drop-cell{padding-right:calc(var(--ag-grid-size)*.75)}.ag-column-drop-cell:focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-column-drop-cell-button{min-width:calc(var(--ag-grid-size)*4)}.ag-column-drop-cell-ghost{opacity:.5}.ag-column-drop-horizontal{gap:var(--ag-cell-widget-spacing);height:var(--ag-header-height)}.ag-ltr .ag-column-drop-horizontal{padding-left:var(--ag-cell-horizontal-padding)}.ag-rtl .ag-column-drop-horizontal{padding-right:var(--ag-cell-horizontal-padding)}.ag-column-drop-horizontal-list{gap:var(--ag-cell-widget-spacing)}.ag-column-drop-vertical-list{padding-bottom:var(--ag-grid-size);padding-left:var(--ag-grid-size);padding-right:var(--ag-grid-size)}.ag-column-drop-vertical-cell{margin-top:var(--ag-grid-size)}.ag-ltr .ag-column-drop-vertical-icon{margin-right:var(--ag-widget-horizontal-spacing)}.ag-rtl .ag-column-drop-vertical-icon{margin-left:var(--ag-widget-horizontal-spacing)}.ag-column-drop-vertical-empty-message{bottom:0;left:0;margin-top:var(--ag-grid-size);overflow:hidden;position:absolute;right:0;top:0}.ag-select-agg-func-popup{background:var(--ag-background-color);border:1px solid var(--ag-border-color);border-radius:var(--ag-border-radius);box-shadow:var(--ag-dropdown-shadow);height:calc(var(--ag-grid-size)*5*3.5);padding:0;position:absolute}.ag-select-agg-func-virtual-list-item{cursor:default}.ag-ltr .ag-select-agg-func-virtual-list-item{padding-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-select-agg-func-virtual-list-item{padding-right:calc(var(--ag-grid-size)*2)}.ag-select-agg-func-virtual-list-item:hover{background-color:var(--ag-selected-row-background-color)}.ag-select-agg-func-virtual-list-item:focus-visible{shadow:var(--ag-focus-shadow)}.ag-sort-indicator-container{display:contents}.ag-ltr .ag-sort-indicator-icon{padding-left:var(--ag-grid-size)}.ag-rtl .ag-sort-indicator-icon{padding-right:var(--ag-grid-size)}.ag-column-drop-horizontal{background-color:var(--ag-header-background-color);border-bottom:var(--ag-header-row-border)}.ag-ltr .ag-column-drop-horizontal-half-width:not(:last-child){border-right:var(--ag-column-border)}.ag-rtl .ag-column-drop-horizontal-half-width:not(:last-child){border-left:var(--ag-column-border)}.ag-column-drop-cell-button{min-width:0;opacity:.75}.ag-column-drop-cell-button:hover{opacity:1}.ag-column-drop-vertical{min-height:75px}.ag-column-drop-vertical-title-bar{padding:var(--ag-widget-container-vertical-padding) calc(var(--ag-grid-size)*2) 0}.ag-column-drop-vertical-empty-message{align-items:center;border:1px dashed;border-color:var(--ag-border-color);display:flex;justify-content:center;margin:calc(var(--ag-grid-size)*1.5) calc(var(--ag-grid-size)*2);padding:calc(var(--ag-grid-size)*2)}.ag-column-select{display:flex;flex:3 1 0px;flex-direction:column;overflow:hidden;position:relative}.ag-column-select-header{flex:none;height:var(--ag-header-height);padding-left:var(--ag-widget-container-horizontal-padding);padding-right:var(--ag-widget-container-horizontal-padding)}.ag-column-select-column,.ag-column-select-column-group,.ag-column-select-header{align-items:center;display:flex;gap:var(--ag-widget-horizontal-spacing);position:relative}.ag-column-select-column,.ag-column-select-column-group{height:100%}.ag-column-select-virtual-list-item:focus-visible{box-shadow:inset var(--ag-focus-shadow)}.ag-column-select-header-icon{border-radius:var(--ag-border-radius);cursor:pointer;height:var(--ag-icon-size);position:relative;width:var(--ag-icon-size)}.ag-column-select-header-icon:focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-column-select-header-filter-wrapper{flex:1 1 auto}.ag-column-select-header-filter{width:100%}.ag-column-select-list{flex:1 1 0px;overflow:hidden}.ag-ltr .ag-column-select-column,.ag-ltr .ag-column-select-column-group{padding-left:calc(var(--ag-indentation-level)*var(--ag-column-select-indent-size))}.ag-rtl .ag-column-select-column,.ag-rtl .ag-column-select-column-group{padding-right:calc(var(--ag-indentation-level)*var(--ag-column-select-indent-size))}.ag-ltr .ag-column-select-add-group-indent{margin-left:calc(var(--ag-icon-size) + var(--ag-grid-size)*1.5)}.ag-rtl .ag-column-select-add-group-indent{margin-right:calc(var(--ag-icon-size) + var(--ag-grid-size)*1.5)}.ag-column-select-column-group:not(:last-child),.ag-column-select-column:not(:last-child){margin-bottom:var(--ag-widget-vertical-spacing)}.ag-column-select-column-group-readonly,.ag-column-select-column-readonly{opacity:.5;pointer-events:none}.ag-column-select-virtual-list-viewport{padding:calc(var(--ag-widget-container-vertical-padding)*.5) 0}.ag-column-select-virtual-list-item{padding:0 var(--ag-widget-container-horizontal-padding)}.ag-column-select-column-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-column-select-checkbox{display:flex}.ag-set-filter{--ag-indentation-level:0}.ag-set-filter-item{align-items:center;display:flex;height:100%}.ag-set-filter-item-checkbox{display:flex;height:100%;width:100%}.ag-set-filter-group-icons{display:block}.ag-set-filter-group-icons>*{cursor:pointer}.ag-filter-body-wrapper{display:flex;flex-direction:column}.ag-filter-filter{flex:1 1 0px}.ag-filter-condition{display:flex;justify-content:center}.ag-floating-filter-body{display:flex;flex:1 1 auto;height:100%;position:relative}.ag-floating-filter-full-body{align-items:center;display:flex;flex:1 1 auto;height:100%;overflow:hidden;width:100%}.ag-floating-filter-full-body>div{flex:1 1 auto}.ag-floating-filter-input{align-items:center;display:flex;width:100%}.ag-floating-filter-input>*{flex:1 1 auto}.ag-floating-filter-button{display:flex;flex:none}.ag-set-floating-filter-input input[disabled]{pointer-events:none}.ag-floating-filter-button-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;height:var(--ag-icon-size);width:var(--ag-icon-size)}.ag-filter-loading{height:100%;padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding);position:absolute;width:100%;z-index:1}.ag-column-panel{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.ag-pivot-mode-panel{display:flex;height:var(--ag-header-height)}.ag-pivot-mode-select{align-items:center;display:flex}.ag-ltr .ag-pivot-mode-select{margin-left:var(--ag-widget-container-horizontal-padding)}.ag-rtl .ag-pivot-mode-select{margin-right:var(--ag-widget-container-horizontal-padding)}.ag-column-panel-column-select{border-bottom:var(--ag-tool-panel-separator-border);border-top:var(--ag-tool-panel-separator-border)}:where(.ag-column-panel) .ag-column-drop-vertical{flex:1 1 0px;min-height:50px}:where(.ag-column-panel) .ag-column-drop-vertical:where(:not(.ag-last-column-drop)){border-bottom:var(--ag-tool-panel-separator-border)}.ag-dnd-ghost{align-items:center;background-color:var(--ag-drag-ghost-background-color);border:var(--ag-drag-ghost-border);border-radius:var(--ag-border-radius);box-shadow:var(--ag-drag-ghost-shadow);color:var(--ag-text-color);cursor:move;font-weight:500;gap:var(--ag-cell-widget-spacing);height:var(--ag-header-height)!important;max-width:200px;padding-left:var(--ag-cell-horizontal-padding);padding-right:var(--ag-cell-horizontal-padding);position:absolute;text-overflow:ellipsis;transform:translateY(calc(var(--ag-grid-size)*2));z-index:9999}.ag-dnd-ghost,.ag-header{display:flex;overflow:hidden;white-space:nowrap}.ag-header{background-color:var(--ag-header-background-color);border-bottom:var(--ag-header-row-border);color:var(--ag-header-text-color);font-family:var(--ag-header-font-family);font-size:var(--ag-header-font-size);font-weight:var(--ag-header-font-weight);width:100%}.ag-header-row{height:var(--ag-header-height);position:absolute}.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),.ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group{border-top:var(--ag-header-row-border)}.ag-header-row:not(.ag-header-row-column-group){overflow:hidden}.ag-header.ag-header-allow-overflow .ag-header-row{overflow:visible}.ag-header-cell,.ag-header-group-cell{align-items:center;display:inline-flex;gap:var(--ag-cell-widget-spacing);height:100%;padding:0 var(--ag-cell-horizontal-padding);position:absolute}:is(.ag-header-cell:not(.ag-floating-filter),.ag-header-group-cell):before{background-color:transparent;content:"";inset:0;position:absolute;transition:background-color var(--ag-header-cell-hover-background-transition-duration)}.ag-header-cell-moving:is(.ag-header-cell:not(.ag-floating-filter),.ag-header-group-cell):before,:is(.ag-header-cell:not(.ag-floating-filter),.ag-header-group-cell):hover:before{background-color:var(--ag-header-cell-hover-background-color)}:where(.ag-header-cell:not(.ag-floating-filter) *,.ag-header-group-cell *){position:relative;z-index:1}.ag-header-cell-filter-button,.ag-header-cell.ag-header-active .ag-header-cell-menu-button{opacity:1}.ag-header-cell-menu-button:not(.ag-header-menu-always-show){opacity:0;transition:opacity .2s}.ag-header-cell-label,.ag-header-group-cell-label{align-items:center;align-self:stretch;display:flex;flex:1 1 auto;gap:var(--ag-grid-size)}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis}.ag-header-group-cell-label.ag-sticky-label{flex:none;max-width:100%;position:sticky}.ag-ltr .ag-header-group-cell-label.ag-sticky-label{left:var(--ag-cell-horizontal-padding)}.ag-rtl .ag-header-group-cell-label.ag-sticky-label{right:var(--ag-cell-horizontal-padding)}.ag-header-group-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-header-cell-text{overflow:hidden;text-overflow:ellipsis;word-break:break-word}.ag-header-cell:not(.ag-header-cell-auto-height) .ag-header-cell-comp-wrapper{align-items:center;display:flex;height:100%}.ag-header-cell-comp-wrapper{width:100%}.ag-header-cell-wrap-text .ag-header-cell-comp-wrapper{white-space:normal}.ag-right-aligned-header .ag-header-cell-label{flex-direction:row-reverse}.ag-floating-filter-button-button,.ag-header-cell-filter-button,.ag-header-cell-menu-button,.ag-header-cell-sortable .ag-header-cell-label,.ag-header-expand-icon,.ag-panel-title-bar-button,.ag-side-button-button{cursor:pointer}.ag-advanced-filter-header-cell:focus-visible,.ag-header-cell:focus-visible,.ag-header-group-cell:focus-visible{box-shadow:inset var(--ag-focus-shadow)}.ag-header-cell:after,.ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group):after{content:"";height:var(--ag-header-column-border-height);position:absolute;top:calc(50% - var(--ag-header-column-border-height)*.5);z-index:1}.ag-ltr .ag-header-cell:after,.ag-ltr .ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group):after{border-right:var(--ag-header-column-border);right:0}.ag-rtl .ag-header-cell:after,.ag-rtl .ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group):after{border-left:var(--ag-header-column-border);left:0}.ag-header-cell-resize{align-items:center;cursor:ew-resize;display:flex;height:100%;position:absolute;top:0;width:8px;z-index:2}.ag-ltr .ag-header-cell-resize{right:-4px}.ag-rtl .ag-header-cell-resize{left:-4px}.ag-header-cell-resize:after{background-color:var(--ag-header-column-resize-handle-color);content:"";display:var(--ag-header-column-resize-handle-display);height:var(--ag-header-column-resize-handle-height);position:absolute;top:calc(50% - var(--ag-header-column-resize-handle-height)*.5);width:var(--ag-header-column-resize-handle-width);z-index:1}.ag-ltr .ag-header-cell-resize:after{left:calc(50% - var(--ag-header-column-resize-handle-width))}.ag-rtl .ag-header-cell-resize:after{right:calc(50% - var(--ag-header-column-resize-handle-width))}.ag-header-cell.ag-header-span-height .ag-header-cell-resize:after{height:calc(100% - var(--ag-grid-size)*4);top:calc(var(--ag-grid-size)*2)}.ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize{display:none}.ag-menu{background-color:var(--ag-menu-background-color);border:var(--ag-menu-border);border-radius:var(--ag-border-radius);box-shadow:var(--ag-menu-shadow);color:var(--ag-menu-text-color);max-height:100%;overflow-y:auto;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-menu-list{cursor:default;display:table;padding:var(--ag-grid-size) 0;width:100%}.ag-menu-option,.ag-menu-separator{display:table-row}.ag-menu-option-part,.ag-menu-separator-part{display:table-cell;vertical-align:middle}.ag-menu-option-text{white-space:nowrap}.ag-menu-option-custom{display:contents}.ag-compact-menu-option{display:flex;flex-wrap:nowrap;width:100%}.ag-compact-menu-option-text{flex:1 1 auto;white-space:nowrap}.ag-menu-separator{height:calc(var(--ag-grid-size)*2 + 1px)}.ag-menu-separator-part:after{border-top:1px solid var(--ag-menu-separator-color);content:"";display:block}.ag-compact-menu-option-active,.ag-menu-option-active{background-color:var(--ag-row-hover-color)}.ag-compact-menu-option-part,.ag-menu-option-part{line-height:var(--ag-icon-size);padding:calc(var(--ag-grid-size) + 2px) 0}.ag-compact-menu-option-disabled,.ag-menu-option-disabled{cursor:not-allowed;opacity:.5}.ag-compact-menu-option-icon,.ag-menu-option-icon{width:var(--ag-icon-size)}.ag-ltr .ag-compact-menu-option-icon,.ag-ltr .ag-menu-option-icon{padding-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-compact-menu-option-icon,.ag-rtl .ag-menu-option-icon{padding-right:calc(var(--ag-grid-size)*2)}.ag-compact-menu-option-text,.ag-menu-option-text{padding-left:calc(var(--ag-grid-size)*2);padding-right:calc(var(--ag-grid-size)*2)}.ag-ltr .ag-compact-menu-option-shortcut,.ag-ltr .ag-menu-option-shortcut{padding-right:var(--ag-grid-size)}.ag-rtl .ag-compact-menu-option-shortcut,.ag-rtl .ag-menu-option-shortcut{padding-left:var(--ag-grid-size)}.ag-ltr .ag-compact-menu-option-popup-pointer,.ag-ltr .ag-menu-option-popup-pointer{padding-right:var(--ag-grid-size)}.ag-rtl .ag-compact-menu-option-popup-pointer,.ag-rtl .ag-menu-option-popup-pointer{padding-left:var(--ag-grid-size)}.ag-menu-column-select-wrapper{height:265px;overflow:auto}.ag-menu-column-select-wrapper .ag-column-select{height:100%}.ag-menu.ag-tabs{min-width:290px}.ag-filter-separator{border-top:1px solid var(--menu-separator-color)}.ag-filter-select .ag-picker-field-wrapper{width:0}.ag-filter-condition-operator{height:17px}.ag-ltr .ag-filter-condition-operator-or{margin-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-filter-condition-operator-or{margin-right:calc(var(--ag-grid-size)*2)}.ag-set-filter-select-all{padding-top:var(--ag-widget-container-vertical-padding)}.ag-filter-no-matches,.ag-set-filter-list{height:calc(var(--ag-list-item-height)*6)}.ag-filter-no-matches{padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-set-filter-tree-list{height:calc(var(--ag-list-item-height)*10)}.ag-set-filter-filter{margin-left:var(--ag-widget-container-horizontal-padding);margin-right:var(--ag-widget-container-horizontal-padding);margin-top:var(--ag-widget-container-vertical-padding)}.ag-filter-to{margin-top:var(--ag-widget-vertical-spacing)}.ag-mini-filter{margin:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-ltr .ag-set-filter-item{padding-left:calc(var(--ag-widget-container-horizontal-padding) + var(--ag-indentation-level)*var(--ag-set-filter-indent-size))}.ag-rtl .ag-set-filter-item{padding-right:calc(var(--ag-widget-container-horizontal-padding) + var(--ag-indentation-level)*var(--ag-set-filter-indent-size))}.ag-ltr .ag-set-filter-add-group-indent{margin-left:calc(var(--ag-icon-size) + var(--ag-widget-container-horizontal-padding))}.ag-rtl .ag-set-filter-add-group-indent{margin-right:calc(var(--ag-icon-size) + var(--ag-widget-container-horizontal-padding))}.ag-ltr .ag-set-filter-group-icons{margin-right:var(--ag-widget-container-horizontal-padding)}.ag-rtl .ag-set-filter-group-icons{margin-left:var(--ag-widget-container-horizontal-padding)}.ag-filter-menu .ag-set-filter-list{min-width:200px}.ag-filter-virtual-list-item:focus-visible{box-shadow:inset var(--ag-focus-shadow)}.ag-filter-apply-panel{display:flex;justify-content:flex-end;overflow:hidden;padding:var(--ag-widget-vertical-spacing) var(--ag-widget-container-horizontal-padding) var(--ag-widget-container-vertical-padding)}.ag-filter-apply-panel-button{line-height:1.5}.ag-ltr .ag-filter-apply-panel-button{margin-left:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-filter-apply-panel-button{margin-right:calc(var(--ag-grid-size)*2)}.ag-simple-filter-body-wrapper{display:flex;flex-direction:column;gap:var(--ag-widget-vertical-spacing);min-height:calc(var(--ag-list-item-height) + var(--ag-widget-container-vertical-padding) + var(--ag-widget-vertical-spacing));overflow-y:auto;padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-simple-filter-body-wrapper .ag-resizer-wrapper{margin:0}.ag-multi-filter-menu-item{margin:var(--ag-grid-size) 0}.ag-multi-filter-group-title-bar{background-color:transparent;color:var(--ag-header-text-color);font-weight:500;padding:calc(var(--ag-grid-size)*1.5) var(--ag-grid-size)}.ag-multi-filter-group-title-bar:focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-group-filter-field-select-wrapper{display:flex;flex-direction:column;gap:var(--ag-widget-vertical-spacing);padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-menu-option .ag-icon{opacity:65%}.ag-menu-option{cursor:pointer;font-weight:500}.ag-ltr .ag-menu-option-popup-pointer .ag-icon{text-align:right}.ag-rtl .ag-menu-option-popup-pointer .ag-icon{text-align:left}.ag-panel{background-color:var(--ag-panel-background-color);display:flex;flex-direction:column;overflow:hidden;position:relative}.ag-dialog{border:var(--ag-dialog-border);border-radius:var(--ag-border-radius);box-shadow:var(--ag-dialog-shadow);position:absolute}.ag-panel-title-bar{align-items:center;background-color:var(--ag-panel-title-bar-background-color);border-bottom:var(--ag-panel-title-bar-border);color:var(--ag-header-text-color);cursor:default;display:flex;flex:none;height:var(--ag-header-height);padding:var(--ag-grid-size) var(--ag-cell-horizontal-padding)}.ag-ltr .ag-panel-title-bar-button{margin-left:calc(var(--ag-grid-size)*2);margin-right:var(--ag-grid-size)}.ag-rtl .ag-panel-title-bar-button{margin-left:var(--ag-grid-size);margin-right:calc(var(--ag-grid-size)*2)}.ag-panel-title-bar-title{color:var(--ag-header-text-color);flex:1 1 auto;font-weight:500}.ag-panel-title-bar-buttons{display:flex}.ag-panel-title-bar-button{cursor:pointer}.ag-panel-content-wrapper{display:flex;flex:1 1 auto;overflow:hidden;position:relative}.ag-resizer{pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.ag-resizer.ag-resizer-topLeft{height:5px;left:0;top:0;width:5px}.ag-ltr .ag-resizer.ag-resizer-topLeft{cursor:nwse-resize}.ag-rtl .ag-resizer.ag-resizer-topLeft{cursor:nesw-resize}.ag-resizer.ag-resizer-top{cursor:ns-resize;height:5px;left:5px;right:5px;top:0}.ag-resizer.ag-resizer-topRight{height:5px;right:0;top:0;width:5px}.ag-ltr .ag-resizer.ag-resizer-topRight{cursor:nesw-resize}.ag-rtl .ag-resizer.ag-resizer-topRight{cursor:nwse-resize}.ag-resizer.ag-resizer-right{bottom:5px;cursor:ew-resize;right:0;top:5px;width:5px}.ag-resizer.ag-resizer-bottomRight{bottom:0;height:5px;right:0;width:5px}.ag-ltr .ag-resizer.ag-resizer-bottomRight{cursor:nwse-resize}.ag-rtl .ag-resizer.ag-resizer-bottomRight{cursor:nesw-resize}.ag-resizer.ag-resizer-bottom{bottom:0;cursor:ns-resize;height:5px;left:5px;right:5px}.ag-resizer.ag-resizer-bottomLeft{bottom:0;height:5px;left:0;width:5px}.ag-ltr .ag-resizer.ag-resizer-bottomLeft{cursor:nesw-resize}.ag-rtl .ag-resizer.ag-resizer-bottomLeft{cursor:nwse-resize}.ag-resizer.ag-resizer-left{bottom:5px;cursor:ew-resize;left:0;top:5px;width:5px}.ag-dragging-fill-handle .ag-dialog,.ag-dragging-range-handle .ag-dialog{opacity:.7;pointer-events:none}.ag-pinned-left-header,.ag-pinned-right-header{display:inline-block;overflow:hidden;position:relative}.ag-body-horizontal-scroll:not(.ag-scrollbar-invisible) .ag-horizontal-left-spacer:not(.ag-scroller-corner){border-right:var(--ag-pinned-column-border)}.ag-body-horizontal-scroll:not(.ag-scrollbar-invisible) .ag-horizontal-right-spacer:not(.ag-scroller-corner),.ag-pinned-right-header{border-left:var(--ag-pinned-column-border)}.ag-pinned-left-header{border-right:var(--ag-pinned-column-border)}.ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell){border-left:var(--ag-pinned-column-border)}.ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell){border-right:var(--ag-pinned-column-border)}.ag-pinned-left-header .ag-header-cell-resize:after{left:calc(50% - var(--ag-header-column-resize-handle-width))}.ag-pinned-right-header .ag-header-cell-resize:after{left:50%}.ag-pinned-left-header,.ag-pinned-right-header{height:100%}.ag-pinned-left-header .ag-header-cell-resize{right:-4px}.ag-pinned-right-header .ag-header-cell-resize{left:-4px}.ag-layout-print.ag-body{display:block;height:unset}.ag-layout-print.ag-root-wrapper{display:inline-block}.ag-layout-print .ag-body-horizontal-scroll,.ag-layout-print .ag-body-vertical-scroll{display:none}.ag-layout-print.ag-force-vertical-scroll{overflow-y:visible!important}@media print{.ag-root-wrapper.ag-layout-print{display:table}.ag-root-wrapper.ag-layout-print .ag-body-horizontal-scroll-viewport,.ag-root-wrapper.ag-layout-print .ag-body-viewport,.ag-root-wrapper.ag-layout-print .ag-center-cols-container,.ag-root-wrapper.ag-layout-print .ag-center-cols-viewport,.ag-root-wrapper.ag-layout-print .ag-root,.ag-root-wrapper.ag-layout-print .ag-root-wrapper-body,.ag-root-wrapper.ag-layout-print .ag-virtual-list-viewport{display:block!important;height:auto!important;overflow:hidden!important}.ag-root-wrapper.ag-layout-print .ag-cell,.ag-root-wrapper.ag-layout-print .ag-row{-moz-column-break-inside:avoid;break-inside:avoid}}.ag-select{align-items:center;display:flex;flex-direction:row}.ag-select .ag-picker-field-wrapper{cursor:default}.ag-ltr .ag-select .ag-picker-field-wrapper{padding-left:calc(var(--ag-cell-horizontal-padding)/2);padding-right:var(--ag-grid-size)}.ag-rtl .ag-select .ag-picker-field-wrapper{padding-left:var(--ag-grid-size);padding-right:calc(var(--ag-cell-horizontal-padding)/2)}.ag-select.ag-disabled .ag-picker-field-wrapper:focus{box-shadow:none}.ag-select:not(.ag-cell-editor,.ag-label-align-top){min-height:var(--ag-list-item-height)}.ag-select .ag-picker-field-display{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-select .ag-picker-field-icon{align-items:center;display:flex}.ag-select.ag-disabled{opacity:.5}.ag-rich-select{cursor:default;height:100%}.ag-rich-select-value{align-items:center;background-color:var(--ag-input-background-color);display:flex;height:100%;padding:var(--ag-grid-size)}.ag-rich-select-value .ag-picker-field-display{overflow:hidden;text-overflow:ellipsis}.ag-rich-select-value .ag-picker-field-display.ag-display-as-placeholder{opacity:.5}.ag-rich-select-list{background-color:var(--ag-input-background-color);border:var(--ag-input-border);border-radius:var(--ag-input-border-radius);box-shadow:var(--ag-dropdown-shadow);height:auto;position:relative;width:100%}.ag-rich-select-list .ag-loading-text{padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding)}.ag-rich-select-row{align-items:center;display:flex;flex:1 1 auto;height:100%;overflow:hidden;padding:0 var(--ag-grid-size);white-space:nowrap}.ag-rich-select-row-selected{background-color:var(--ag-selected-row-background-color)}.ag-rich-select-row-highlighted,.ag-rich-select-row:hover{background-image:linear-gradient(var(--ag-row-hover-color),var(--ag-row-hover-color))}.ag-rich-select-row-text-highlight{font-weight:700}.ag-rich-select-field-input{flex:1 1 auto}.ag-ltr .ag-rich-select-field-input{left:var(--ag-grid-size)}.ag-rtl .ag-rich-select-field-input{right:var(--ag-grid-size)}.ag-rich-select-field-input .ag-input-field-input{border:none!important;box-shadow:none!important;padding:0!important;text-overflow:ellipsis}.ag-rich-select-field-input .ag-input-field-input::-moz-placeholder{opacity:.8}.ag-rich-select-field-input .ag-input-field-input::placeholder{opacity:.8}.ag-popup-editor .ag-rich-select-value{height:var(--ag-row-height);min-width:200px}.ag-rich-select-virtual-list-item{cursor:default;height:var(--ag-list-item-height)}.ag-pill-container{display:flex;flex-wrap:nowrap;gap:.25rem}.ag-pill{align-items:center;background:var(--ag-select-cell-background-color);border:var(--ag-select-cell-border);border-radius:var(--ag-border-radius);display:flex;padding:0 .25rem;white-space:nowrap}.ag-pill:focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-pill .ag-pill-button{border:none;padding:0}.ag-ltr .ag-pill .ag-pill-button{margin-left:var(--ag-grid-size)}.ag-rtl .ag-pill .ag-pill-button{margin-right:var(--ag-grid-size)}.ag-pill .ag-pill-button:hover{color:var(--ag-accent-color);cursor:pointer}.ag-root-wrapper{cursor:default;display:flex;flex-direction:column;line-height:normal;overflow:hidden;position:relative;white-space:normal;-webkit-font-smoothing:antialiased;background-color:var(--ag-background-color);border:var(--ag-wrapper-border);border-radius:var(--ag-wrapper-border-radius);color:var(--ag-text-color);color-scheme:var(--ag-color-scheme);font-family:var(--ag-font-family);font-size:var(--ag-font-size)}.ag-root-wrapper.ag-layout-normal{height:100%}.ag-popup,.ag-root-wrapper{--ag-indentation-level:0}.ag-ltr .ag-side-bar-left .ag-tool-panel-horizontal-resize{right:-3px}.ag-ltr .ag-side-bar-right .ag-tool-panel-horizontal-resize,.ag-rtl .ag-side-bar-left .ag-tool-panel-horizontal-resize{left:-3px}.ag-rtl .ag-side-bar-right .ag-tool-panel-horizontal-resize{right:-3px}.ag-tool-panel-wrapper{width:var(--ag-side-bar-panel-width)}.ag-side-bar{background-color:var(--ag-side-bar-background-color);display:flex;flex-direction:row-reverse;position:relative}.ag-side-bar-left{flex-direction:row;order:-1}.ag-side-buttons{position:relative;width:calc(var(--ag-icon-size) + var(--ag-grid-size)*2)}.ag-side-button.ag-selected{background-color:var(--ag-side-button-selected-background-color);border-bottom:var(--ag-side-button-selected-border)}.ag-side-button.ag-selected:not(:first-of-type){border-top:var(--ag-side-button-selected-border)}.ag-side-button-button{align-items:center;display:flex;flex-direction:column;gap:var(--ag-grid-size);padding:calc(var(--ag-grid-size)*3) 0;position:relative;white-space:nowrap;width:100%}.ag-side-button-button:focus{box-shadow:none}.ag-side-button-button:focus-visible{box-shadow:inset var(--ag-focus-shadow)}.ag-side-button-label{writing-mode:vertical-lr}@media (max-resolution:1.5x){.ag-side-button-label{font-family:"Segoe UI",var(--ag-font-family)}.ag-ltr .ag-side-button-label{transform:rotate(.05deg)}.ag-rtl .ag-side-button-label{transform:rotate(-.05deg)}}.ag-ltr .ag-side-bar-left,.ag-rtl .ag-side-bar-right{border-right:var(--ag-side-panel-border)}.ag-ltr .ag-side-bar-left .ag-tool-panel-wrapper,.ag-ltr .ag-side-bar-right,.ag-rtl .ag-side-bar-left,.ag-rtl .ag-side-bar-right .ag-tool-panel-wrapper{border-left:var(--ag-side-panel-border)}.ag-ltr .ag-side-bar-right .ag-tool-panel-wrapper,.ag-rtl .ag-side-bar-left .ag-tool-panel-wrapper{border-right:var(--ag-side-panel-border)}.ag-ltr .ag-chart-menu-panel{border-left:var(--ag-side-panel-border)}.ag-rtl .ag-chart-menu-panel{border-right:var(--ag-side-panel-border)}.ag-button{border-radius:0}.ag-standard-button{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:var(--ag-background-color);border:var(--ag-input-border);border-radius:var(--ag-border-radius);cursor:pointer;font-family:inherit;padding:var(--ag-grid-size) calc(var(--ag-grid-size)*2)}.ag-standard-button:hover{background-color:var(--ag-row-hover-color)}.ag-standard-button:active{border-color:var(--ag-accent-color)}.ag-standard-button:disabled{background-color:var(--ag-input-disabled-background-color);border:var(--ag-input-disabled-border);color:var(--ag-input-disabled-text-color)}:where(input[class^=ag-][type=button],button[class^=ag-]):focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-checkbox-input-wrapper,.ag-radio-button-input-wrapper{background-color:var(--ag-checkbox-unchecked-background-color);border:solid var(--ag-checkbox-border-width) var(--ag-checkbox-unchecked-border-color);flex:none;height:var(--ag-icon-size);position:relative;width:var(--ag-icon-size)}.ag-checkbox-input-wrapper input,.ag-radio-button-input-wrapper input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;opacity:0;width:100%}.ag-checkbox-input-wrapper:after,.ag-radio-button-input-wrapper:after{content:"";display:block;inset:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;position:absolute}.ag-checkbox-input-wrapper.ag-checked,.ag-radio-button-input-wrapper.ag-checked{background-color:var(--ag-checkbox-checked-background-color);border-color:var(--ag-checkbox-checked-border-color)}.ag-checkbox-input-wrapper.ag-checked:after,.ag-radio-button-input-wrapper.ag-checked:after{background-color:var(--ag-checkbox-checked-shape-color)}.ag-checkbox-input-wrapper:active,.ag-checkbox-input-wrapper:focus-within,.ag-radio-button-input-wrapper:active,.ag-radio-button-input-wrapper:focus-within{box-shadow:var(--ag-focus-shadow)}.ag-checkbox-input-wrapper.ag-disabled,.ag-radio-button-input-wrapper.ag-disabled{filter:grayscale();opacity:.5}.ag-checkbox-input-wrapper{border-radius:var(--ag-checkbox-border-radius)}.ag-checkbox-input-wrapper.ag-checked:after{-webkit-mask-image:var(--ag-checkbox-checked-shape-image);mask-image:var(--ag-checkbox-checked-shape-image)}.ag-checkbox-input-wrapper.ag-indeterminate{background-color:var(--ag-checkbox-indeterminate-background-color);border-color:var(--ag-checkbox-indeterminate-border-color)}.ag-checkbox-input-wrapper.ag-indeterminate:after{background-color:var(--ag-checkbox-indeterminate-shape-color);-webkit-mask-image:var(--ag-checkbox-indeterminate-shape-image);mask-image:var(--ag-checkbox-indeterminate-shape-image)}.ag-radio-button-input-wrapper{border-radius:100%}.ag-radio-button-input-wrapper.ag-checked:after{-webkit-mask-image:var(--ag-radio-checked-shape-image);mask-image:var(--ag-radio-checked-shape-image)}.ag-drag-handle{color:varXXX(--ag-icon-font-color);cursor:grab}.ag-list-item,.ag-virtual-list-item{height:var(--ag-list-item-height)}.ag-virtual-list-item{position:absolute;width:100%}.ag-select-list{background-color:var(--ag-background-color);border:var(--ag-input-border);border-radius:var(--ag-border-radius);box-shadow:var(--ag-dropdown-shadow);overflow-x:hidden;overflow-y:auto}.ag-list-item{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-list-item.ag-active-item{background-color:var(--ag-row-hover-color)}.ag-select-list-item{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-ltr .ag-select-list-item{padding-left:calc(var(--ag-cell-horizontal-padding)/2)}.ag-rtl .ag-select-list-item{padding-right:calc(var(--ag-cell-horizontal-padding)/2)}.ag-select-list-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-list-item-hovered:after{background-color:var(--ag-range-selection-border-color);content:"";height:1px;left:0;position:absolute;right:0}.ag-item-highlight-top:after{top:0}.ag-item-highlight-bottom:after{bottom:0}.ag-range-field{align-items:center;display:flex}.ag-range-field .ag-input-wrapper{height:100%}input[class^=ag-][type=range]{-webkit-appearance:none;background:none;height:100%;overflow:visible;padding:0;width:100%}input[class^=ag-][type=range]::-webkit-slider-runnable-track{background-color:var(--ag-border-color);border-radius:1.5px;height:3px;margin:0;padding:0;width:100%}input[class^=ag-][type=range]::-moz-range-track{background-color:var(--ag-border-color);border-radius:1.5px;height:3px;margin:0;padding:0;width:100%}input[class^=ag-][type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--ag-background-color);border:1px solid var(--ag-border-color);border-radius:100%;height:var(--ag-icon-size);margin:0;padding:0;transform:translateY(calc(var(--ag-icon-size)*-.5 + 1.5px));width:var(--ag-icon-size)}input[class^=ag-][type=range]::-moz-ag-range-thumb{-webkit-appearance:none;background-color:var(--ag-background-color);border:1px solid var(--ag-border-color);border-radius:100%;height:var(--ag-icon-size);margin:0;padding:0;transform:translateY(calc(var(--ag-icon-size)*-.5 + 1.5px));width:var(--ag-icon-size)}input[class^=ag-][type=range]:focus::-webkit-slider-thumb{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}input[class^=ag-][type=range]:focus::-moz-ag-range-thumb{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}input[class^=ag-][type=range]:active::-webkit-slider-runnable-track{background-color:var(--ag-accent-color)}input[class^=ag-][type=range]:active::-moz-ag-range-track{background-color:var(--ag-accent-color)}input[class^=ag-][type=range]:disabled{opacity:.5}.ag-toggle-button{flex:none;min-width:unset;width:unset}.ag-toggle-button-input-wrapper{background-color:var(--ag-toggle-button-off-background-color);border:solid var(--ag-toggle-button-border-width) var(--ag-toggle-button-off-border-color);border-radius:calc(var(--ag-toggle-button-height)*.5);flex:none;height:var(--ag-toggle-button-height);max-width:var(--ag-toggle-button-width);min-width:var(--ag-toggle-button-width);position:relative}.ag-toggle-button-input-wrapper input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;opacity:0;width:100%}.ag-toggle-button-input-wrapper:before{background-color:var(--ag-toggle-button-switch-background-color);border:var(--ag-toggle-button-border-width) solid var(--ag-toggle-button-switch-border-color);border-radius:100%;content:"";display:block;height:var(--ag-toggle-button-height);pointer-events:none;position:absolute;top:calc(0px - var(--ag-toggle-button-border-width));width:var(--ag-toggle-button-height)}.ag-ltr .ag-toggle-button-input-wrapper:before{left:calc(0px - var(--ag-toggle-button-border-width));transition:left .1s}.ag-rtl .ag-toggle-button-input-wrapper:before{right:calc(0px - var(--ag-toggle-button-border-width));transition:right .1s}.ag-toggle-button-input-wrapper.ag-checked{background-color:var(--ag-toggle-button-on-background-color)}.ag-toggle-button-input-wrapper.ag-checked,.ag-toggle-button-input-wrapper.ag-checked:before{border-color:var(--ag-toggle-button-on-border-color)}.ag-ltr .ag-toggle-button-input-wrapper.ag-checked:before{left:calc(100% - var(--ag-toggle-button-height) + var(--ag-toggle-button-border-width))}.ag-rtl .ag-toggle-button-input-wrapper.ag-checked:before{right:calc(100% - var(--ag-toggle-button-height) + var(--ag-toggle-button-border-width))}.ag-toggle-button-input-wrapper:focus-within{box-shadow:var(--ag-focus-shadow)}.ag-toggle-button-input-wrapper.ag-disabled{opacity:.5}.ag-autocomplete{align-items:center;display:flex;width:100%}.ag-autocomplete>*{flex:1 1 auto}.ag-autocomplete-list-popup{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-autocomplete-list{height:calc(var(--ag-row-height)*6.5);min-width:200px;position:relative;width:100%}.ag-autocomplete-virtual-list-item{cursor:default;display:flex;height:var(--ag-list-item-height)}.ag-autocomplete-virtual-list-item:focus-visible:after{content:none}.ag-autocomplete-virtual-list-item:hover{background-color:var(--ag-row-hover-color)}.ag-autocomplete-row{align-items:center;display:flex;flex:1 1 auto;overflow:hidden}.ag-autocomplete-row-label{margin:0 var(--ag-widget-container-horizontal-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-autocomplete-row-selected{background-color:var(--ag-selected-row-background-color)}.ag-tooltip{background-color:var(--ag-tooltip-background-color);border:var(--ag-tooltip-border);border-radius:var(--ag-border-radius);color:var(--ag-tooltip-text-color);padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding);white-space:normal}.ag-tooltip,.ag-tooltip-custom{position:absolute;z-index:99999}.ag-tooltip-custom:not(.ag-tooltip-interactive),.ag-tooltip:not(.ag-tooltip-interactive){pointer-events:none}.ag-tooltip-custom.ag-tooltip-animate,.ag-tooltip.ag-tooltip-animate{transition:opacity 1s}.ag-tooltip-custom.ag-tooltip-animate.ag-tooltip-hiding,.ag-tooltip.ag-tooltip-animate.ag-tooltip-hiding{opacity:0}.ag-angle-select{align-items:center;display:flex}.ag-angle-select-wrapper{display:flex}.ag-angle-select-parent-circle{display:block;position:relative}.ag-angle-select-child-circle{position:absolute}.ag-slider-wrapper{display:flex}.ag-picker-field-display,.ag-slider-wrapper .ag-input-field{flex:1 1 auto}.ag-picker-field{align-items:center;display:flex}.ag-picker-field-icon{border:0;cursor:pointer;display:flex;margin:0;padding:0}.ag-color-panel{display:flex;flex-direction:column;text-align:center;width:100%}.ag-spectrum-color{cursor:default;flex:1 1 auto;overflow:visible;position:relative}.ag-spectrum-fill{inset:0;position:absolute}.ag-spectrum-val{cursor:pointer}.ag-spectrum-dragger{cursor:pointer;pointer-events:none;position:absolute}.ag-spectrum-alpha,.ag-spectrum-hue{cursor:default}.ag-spectrum-hue-background{background:linear-gradient(270deg,red 3%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%;width:100%}.ag-spectrum-alpha-background{background:linear-gradient(to right,var(--ag-internal-spectrum-alpha-color-from),var(--ag-internal-spectrum-alpha-color-to)),url('data:image/svg+xml;utf8,') 0 0 /4px 4px;height:100%;width:100%}.ag-spectrum-tool{cursor:pointer;position:relative}.ag-spectrum-slider{pointer-events:none;position:absolute}.ag-spectrum-alpha .ag-spectrum-slider{background:linear-gradient(to bottom,var(--ag-internal-spectrum-alpha-color),var(--ag-internal-spectrum-alpha-color)) var(--ag-background-color)}.ag-recent-colors{display:flex;gap:6px;margin-top:10px}.ag-recent-color{cursor:pointer}.ag-angle-select[disabled]{opacity:.5;pointer-events:none}.ag-ltr .ag-angle-select-field,.ag-ltr .ag-slider-field{margin-right:calc(var(--ag-grid-size)*2)}.ag-rtl .ag-angle-select-field,.ag-rtl .ag-slider-field{margin-left:calc(var(--ag-grid-size)*2)}.ag-angle-select-parent-circle{background-color:var(--ag-background-color);border:1px solid;border-color:var(--ag-border-color);border-radius:12px;height:24px;width:24px}.ag-angle-select-child-circle{background-color:var(--ag-foreground-color);border-radius:3px;height:6px;left:12px;margin-left:-3px;margin-top:-4px;top:4px;width:6px}.ag-picker-field-wrapper{background-color:var(--ag-background-color);border:var(--ag-input-border);border-radius:5px;min-height:max(var(--ag-list-item-height),calc(var(--ag-grid-size)*4));overflow:hidden}.ag-picker-field-wrapper:disabled{opacity:.5}.ag-picker-field-wrapper.ag-picker-has-focus,.ag-picker-field-wrapper:focus-within{border:var(--ag-input-focus-border);box-shadow:var(--ag-focus-shadow)}.ag-picker-field-button{background-color:var(--ag-background-color)}.ag-dialog.ag-color-dialog{border-radius:5px}.ag-color-picker .ag-picker-field-wrapper{padding-left:var(--ag-grid-size);padding-right:var(--ag-grid-size)}.ag-color-picker .ag-picker-field-display{align-items:center;display:flex;flex-direction:row;min-height:var(--ag-list-item-height)}.ag-ltr .ag-color-picker-color,.ag-ltr .ag-color-picker-value{margin-right:var(--ag-grid-size)}.ag-rtl .ag-color-picker-color,.ag-rtl .ag-color-picker-value{margin-left:var(--ag-grid-size)}.ag-color-panel{padding:var(--ag-grid-size)}.ag-spectrum-tools{padding-bottom:0;padding-left:0;padding-right:0}.ag-spectrum-tool{height:12px}.ag-spectrum-alpha-background,.ag-spectrum-hue-background{border-radius:12px}.ag-spectrum-slider{border:3px solid #f8f8f8;border-radius:18px;height:18px;margin-top:-15px;width:18px}.ag-recent-colors{margin-bottom:2px;margin-left:var(--ag-grid-size);margin-right:var(--ag-grid-size)}.ag-color-input-color,.ag-color-picker-color,.ag-recent-color{border-radius:4px}.ag-recent-color{border:1px solid var(--ag-border-color)}.ag-spectrum-sat{background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0))}.ag-spectrum-val{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.ag-spectrum-dragger{background:#000;border:3px solid #fff;border-radius:18px;box-shadow:0 0 2px 0 rgba(0,0,0,.24);height:18px;width:18px}.ag-spectrum-alpha-background,.ag-spectrum-hue-background{border-radius:2px}.ag-spectrum-tool{border-radius:2px;height:11px;margin-bottom:10px}.ag-spectrum-slider{border:2px solid #fff;border-radius:13px;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);height:13px;margin-top:-12px;width:13px}.ag-recent-color:focus-visible:not(:disabled):not([readonly]),.ag-spectrum-color:focus-visible:not(:disabled):not([readonly]),.ag-spectrum-slider:focus-visible:not(:disabled):not([readonly]){box-shadow:var(--ag-focus-shadow)}.ag-ltr .ag-color-input input.ag-input-field-input[class^=ag-][type=text]{padding-left:calc(var(--ag-icon-size) + var(--ag-grid-size)*2)}.ag-rtl .ag-color-input input.ag-input-field-input[class^=ag-][type=text]{padding-right:calc(var(--ag-icon-size) + var(--ag-grid-size)*2)}.ag-color-input .ag-color-input-color{position:absolute}.ag-ltr .ag-color-input .ag-color-input-color{margin-left:var(--ag-grid-size)}.ag-rtl .ag-color-input .ag-color-input-color{margin-right:var(--ag-grid-size)}.ag-color-input-color,.ag-color-picker-color{border:1px solid var(--ag-border-color);border-radius:2px;height:var(--ag-icon-size);width:var(--ag-icon-size)}.ag-pill-select .ag-picker-field-display{color:var(--ag-chart-menu-label-color);font-weight:500}.ag-pill-select .ag-picker-field-icon .ag-icon{color:var(--ag-chart-menu-label-color)}.ag-filter-toolpanel{flex:1 1 0px;min-width:0}.ag-filter-toolpanel-header{position:relative}.ag-filter-toolpanel-header,.ag-filter-toolpanel-header>*,.ag-filter-toolpanel-search,.ag-filter-toolpanel-search>*{align-items:center;display:flex}.ag-filter-toolpanel-header{height:calc(var(--ag-grid-size)*6)}.ag-filter-toolpanel-header:focus-visible{border-radius:var(--ag-border-radius);box-shadow:inset var(--ag-focus-shadow)}.ag-filter-toolpanel-header,.ag-filter-toolpanel-search{padding:0 var(--ag-grid-size)}.ag-filter-toolpanel-group:not(.ag-has-filter)>.ag-group-title-bar .ag-filter-toolpanel-group-instance-header-icon{display:none}.ag-filter-toolpanel-group-level-0-header{height:calc(var(--ag-grid-size)*8)}.ag-filter-toolpanel-group-item{margin-bottom:calc(var(--ag-grid-size)*.5);margin-top:calc(var(--ag-grid-size)*.5)}.ag-filter-toolpanel-search{margin-bottom:var(--ag-grid-size);margin-top:var(--ag-widget-container-vertical-padding)}.ag-filter-toolpanel-search-input{flex-grow:1;height:calc(var(--ag-grid-size)*4)}.ag-ltr .ag-filter-toolpanel-group-title-bar-icon{margin-right:var(--ag-grid-size)}.ag-rtl .ag-filter-toolpanel-group-title-bar-icon{margin-left:var(--ag-grid-size)}.ag-filter-toolpanel-expand{cursor:pointer}.ag-ltr .ag-filter-toolpanel-expand{margin-right:var(--ag-grid-size)}.ag-rtl .ag-filter-toolpanel-expand{margin-left:var(--ag-grid-size)}.ag-ltr .ag-filter-toolpanel-group-title-bar,.ag-ltr .ag-filter-toolpanel-instance-header{padding-left:calc(var(--ag-grid-size) + var(--ag-filter-tool-panel-group-indent)*var(--ag-indentation-level))}.ag-rtl .ag-filter-toolpanel-group-title-bar,.ag-rtl .ag-filter-toolpanel-instance-header{padding-right:calc(var(--ag-grid-size) + var(--ag-filter-tool-panel-group-indent)*var(--ag-indentation-level))}.ag-ltr .ag-filter-toolpanel-instance-body{margin-left:var(--ag-filter-tool-panel-group-indent)}.ag-rtl .ag-filter-toolpanel-instance-body{margin-right:var(--ag-filter-tool-panel-group-indent)}.ag-ltr .ag-filter-toolpanel-instance-header.ag-filter-toolpanel-group-level-1-header{padding-left:var(--ag-grid-size)}.ag-rtl .ag-filter-toolpanel-instance-header.ag-filter-toolpanel-group-level-1-header{padding-right:var(--ag-grid-size)}.ag-ltr .ag-filter-toolpanel-group-instance-header-icon,.ag-ltr .ag-filter-toolpanel-instance-header-icon{margin-left:var(--ag-grid-size)}.ag-rtl .ag-filter-toolpanel-group-instance-header-icon,.ag-rtl .ag-filter-toolpanel-instance-header-icon{margin-right:var(--ag-grid-size)}.ag-filter-toolpanel-instance-filter{background-color:var(--ag-chrome-background-color)}.ag-filter-toolpanel-group-level-0{border-top:none}.ag-filter-toolpanel-header{height:auto;padding-bottom:var(--ag-grid-size);padding-top:var(--ag-grid-size)}.ag-filter-toolpanel-group-item{margin:0}.ag-filter-toolpanel-header,.ag-filter-toolpanel-search{color:var(--ag-header-text-color);font-weight:500}.ag-paging-panel{align-items:center;border-top:var(--ag-footer-row-border);display:flex;gap:calc(var(--ag-grid-size)*4);height:max(var(--ag-row-height),22px);justify-content:flex-end;padding:0 var(--ag-cell-horizontal-padding)}.ag-paging-page-size .ag-wrapper{min-width:50px}.ag-paging-page-summary-panel{align-items:center;display:flex;gap:var(--ag-cell-widget-spacing)}.ag-disabled .ag-paging-page-summary-panel{pointer-events:none}.ag-paging-button{cursor:pointer;position:relative}.ag-paging-button:focus-visible{box-shadow:var(--ag-focus-shadow)}.ag-paging-button.ag-disabled{cursor:default;opacity:.5}.ag-paging-number,.ag-paging-row-summary-panel-number{font-weight:500}.ag-status-bar{border-top:var(--ag-footer-row-border);display:flex;justify-content:space-between;line-height:1.5;overflow:hidden;padding-left:calc(var(--ag-grid-size)*4);padding-right:calc(var(--ag-grid-size)*4)}.ag-status-panel{display:inline-flex}.ag-status-name-value{white-space:nowrap}.ag-status-bar-center,.ag-status-bar-left,.ag-status-bar-right{display:inline-flex}.ag-status-bar-center{text-align:center}.ag-status-name-value{margin-left:var(--ag-grid-size);margin-right:var(--ag-grid-size);padding-bottom:var(--ag-widget-container-vertical-padding);padding-top:var(--ag-widget-container-vertical-padding)}.ag-status-name-value-value{font-weight:500}.ag-overlay{inset:0;pointer-events:none;position:absolute;z-index:2}.ag-overlay-panel,.ag-overlay-wrapper{display:flex;height:100%;width:100%}.ag-overlay-wrapper{align-items:center;flex:none;justify-content:center;text-align:center}.ag-overlay-loading-wrapper{pointer-events:all}.ag-overlay-loading-center{background:var(--ag-background-color);border:1px solid var(--ag-border-color);border-radius:var(--ag-border-radius);box-shadow:var(--ag-popup-shadow);padding:var(--ag-grid-size)}.ag-icon{display:block;height:var(--ag-icon-size);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ag-icon-size)}.ag-column-select-column-group-readonly .ag-icon,.ag-disabled .ag-icon,[disabled] .ag-icon{opacity:.5}.ag-icon-grip{opacity:.7}.ag-column-select-column-readonly .ag-icon-grip,.ag-column-select-column-readonly.ag-icon-grip{opacity:.35}:is(.ag-header-cell-menu-button,.ag-header-cell-filter-button,.ag-panel-title-bar-button,.ag-header-expand-icon,.ag-column-group-icons,.ag-set-filter-group-icons,.ag-group-expanded .ag-icon,.ag-group-contracted .ag-icon,.ag-chart-settings-prev,.ag-chart-settings-next,.ag-group-title-bar-icon,.ag-column-select-header-icon,.ag-floating-filter-button-button,.ag-filter-toolpanel-expand,.ag-panel-title-bar-button-icon,.ag-chart-menu-icon):hover{background-color:var(--ag-icon-button-hover-color);border-radius:1px;box-shadow:0 0 0 4px var(--ag-icon-button-hover-color)}.ag-filter-active{--ag-icon-button-hover-color:color-mix(in srgb,transparent,var(--ag-accent-color) 28%);background-color:color-mix(in srgb,transparent,var(--ag-accent-color) 14%);border-radius:1px;box-shadow:0 0 0 4px color-mix(in srgb,transparent,var(--ag-accent-color) 14%);position:relative}.ag-filter-active:after{background-color:var(--ag-accent-color);border-radius:50%;content:"";height:6px;position:absolute;top:-1px;width:6px}.ag-ltr .ag-filter-active:after{right:-1px}.ag-rtl .ag-filter-active:after{left:-1px}.ag-filter-active .ag-icon-filter{clip-path:path("M8,0C8,4.415 11.585,8 16,8L16,16L0,16L0,0L8,0Z")}.ag-label-align-right .ag-label{order:1}.ag-label-align-right>*{flex:none}.ag-label-align-top{align-items:flex-start;flex-direction:column}.ag-label-align-top>*{align-self:stretch}.ag-label-ellipsis{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-label{white-space:nowrap}.ag-ltr .ag-label{margin-right:var(--ag-grid-size)}.ag-rtl .ag-label{margin-left:var(--ag-grid-size)}.ag-label-align-top .ag-label{margin-bottom:calc(var(--ag-grid-size)*.5)}.ag-ltr .ag-label-align-right .ag-label{margin-left:var(--ag-grid-size)}.ag-rtl .ag-label-align-right .ag-label{margin-right:var(--ag-grid-size)}
/* Part iconSet/material */.ag-icon:before{background-color:currentColor;content:"";display:block;height:var(--ag-icon-size);-webkit-mask-size:contain;mask-size:contain;width:var(--ag-icon-size)}.ag-icon-aggregation:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24 5.333H8V8l8.667 8L8 24v2.667h16v-4h-9.333L21.334 16l-6.667-6.667H24z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24 5.333H8V8l8.667 8L8 24v2.667h16v-4h-9.333L21.334 16l-6.667-6.667H24z'/%3E%3C/svg%3E")}.ag-icon-arrows:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.333 11.556h5.333V8h3.556L16 1.778 9.778 8h3.556zm-1.777 1.777H8V9.777l-6.222 6.222L8 22.221v-3.556h3.556zM30.222 16 24 9.778v3.556h-3.556v5.333H24v3.556l6.222-6.222zm-11.555 4.444h-5.333V24H9.778L16 30.222 22.222 24h-3.556z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.333 11.556h5.333V8h3.556L16 1.778 9.778 8h3.556zm-1.777 1.777H8V9.777l-6.222 6.222L8 22.221v-3.556h3.556zM30.222 16 24 9.778v3.556h-3.556v5.333H24v3.556l6.222-6.222zm-11.555 4.444h-5.333V24H9.778L16 30.222 22.222 24h-3.556z'/%3E%3C/svg%3E")}.ag-icon-asc:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5.333 16 1.88 1.88 7.453-7.44v16.227h2.667V10.44l7.44 7.453L26.666 16 15.999 5.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5.333 16 1.88 1.88 7.453-7.44v16.227h2.667V10.44l7.44 7.453L26.666 16 15.999 5.333z'/%3E%3C/svg%3E")}.ag-icon-cancel:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.667C8.627 2.667 2.667 8.627 2.667 16S8.627 29.333 16 29.333 29.333 23.373 29.333 16 23.373 2.667 16 2.667m6.667 18.12-1.88 1.88L16 17.88l-4.787 4.787-1.88-1.88L14.12 16l-4.787-4.787 1.88-1.88L16 14.12l4.787-4.787 1.88 1.88L17.88 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.667C8.627 2.667 2.667 8.627 2.667 16S8.627 29.333 16 29.333 29.333 23.373 29.333 16 23.373 2.667 16 2.667m6.667 18.12-1.88 1.88L16 17.88l-4.787 4.787-1.88-1.88L14.12 16l-4.787-4.787 1.88-1.88L16 14.12l4.787-4.787 1.88 1.88L17.88 16z'/%3E%3C/svg%3E")}.ag-icon-chart:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6.667 12.267h4v13.067h-4zm7.466-5.6h3.733v18.667h-3.733zM21.6 17.333h3.733v8H21.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6.667 12.267h4v13.067h-4zm7.466-5.6h3.733v18.667h-3.733zM21.6 17.333h3.733v8H21.6z'/%3E%3C/svg%3E")}.ag-icon-color-picker:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M23.907 17.587 10.574 4.254l-1.88 1.88 3.173 3.173-8.28 8.28 10.16 10.16zm-16.547 0 6.387-6.387 6.387 6.387H7.361zm18.387 2s-2.667 2.893-2.667 4.667c0 1.467 1.2 2.667 2.667 2.667s2.667-1.2 2.667-2.667c0-1.773-2.667-4.667-2.667-4.667'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M23.907 17.587 10.574 4.254l-1.88 1.88 3.173 3.173-8.28 8.28 10.16 10.16zm-16.547 0 6.387-6.387 6.387 6.387H7.361zm18.387 2s-2.667 2.893-2.667 4.667c0 1.467 1.2 2.667 2.667 2.667s2.667-1.2 2.667-2.667c0-1.773-2.667-4.667-2.667-4.667'/%3E%3C/svg%3E")}.ag-icon-columns:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.333 10.667h5.333V5.334H5.333zm8 16h5.333v-5.333h-5.333zm-8 0h5.333v-5.333H5.333zm0-8h5.333v-5.333H5.333zm8 0h5.333v-5.333h-5.333zm8-13.334v5.333h5.333V5.333zm-8 5.334h5.333V5.334h-5.333zm8 8h5.333v-5.333h-5.333zm0 8h5.333v-5.333h-5.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.333 10.667h5.333V5.334H5.333zm8 16h5.333v-5.333h-5.333zm-8 0h5.333v-5.333H5.333zm0-8h5.333v-5.333H5.333zm8 0h5.333v-5.333h-5.333zm8-13.334v5.333h5.333V5.333zm-8 5.334h5.333V5.334h-5.333zm8 8h5.333v-5.333h-5.333zm0 8h5.333v-5.333h-5.333z'/%3E%3C/svg%3E")}.ag-icon-contracted:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E")}.ag-icon-copy:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 1.333H6A2.675 2.675 0 0 0 3.333 4v18.667H6V4h16zm4 5.334H11.333a2.675 2.675 0 0 0-2.667 2.667v18.667c0 1.467 1.2 2.667 2.667 2.667H26c1.467 0 2.667-1.2 2.667-2.667V9.334c0-1.467-1.2-2.667-2.667-2.667M26 28H11.333V9.333H26z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 1.333H6A2.675 2.675 0 0 0 3.333 4v18.667H6V4h16zm4 5.334H11.333a2.675 2.675 0 0 0-2.667 2.667v18.667c0 1.467 1.2 2.667 2.667 2.667H26c1.467 0 2.667-1.2 2.667-2.667V9.334c0-1.467-1.2-2.667-2.667-2.667M26 28H11.333V9.333H26z'/%3E%3C/svg%3E")}.ag-icon-cross:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m25.333 8.547-1.88-1.88L16 14.12 8.547 6.667l-1.88 1.88L14.12 16l-7.453 7.453 1.88 1.88L16 17.88l7.453 7.453 1.88-1.88L17.88 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m25.333 8.547-1.88-1.88L16 14.12 8.547 6.667l-1.88 1.88L14.12 16l-7.453 7.453 1.88 1.88L16 17.88l7.453 7.453 1.88-1.88L17.88 16z'/%3E%3C/svg%3E")}.ag-icon-csv:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M384 131.9c-7.753-8.433-110.425-128.473-114.9-133L48-.1C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48zm-35.9 2.1H257V27.9zM30 479V27h200l1 105c0 13.3-1.3 29 12 29h111l1 318z' style='fill-rule:nonzero' transform='matrix(.06285 0 0 .06285 3.934 -.054)'/%3E%3Cpath d='M.688-.226a.2.2 0 0 1-.017.074.28.28 0 0 1-.145.14.412.412 0 0 1-.234.013.28.28 0 0 1-.202-.168.468.468 0 0 1-.04-.19q0-.086.025-.155a.319.319 0 0 1 .182-.191.4.4 0 0 1 .134-.025q.087 0 .155.035a.3.3 0 0 1 .104.085.17.17 0 0 1 .036.097.06.06 0 0 1-.018.044.06.06 0 0 1-.042.019.06.06 0 0 1-.042-.013.2.2 0 0 1-.031-.046.2.2 0 0 0-.066-.079.16.16 0 0 0-.095-.027.17.17 0 0 0-.142.068.3.3 0 0 0-.053.193.4.4 0 0 0 .023.139.2.2 0 0 0 .067.083.2.2 0 0 0 .1.027q.063 0 .106-.031a.2.2 0 0 0 .065-.091.2.2 0 0 1 .023-.046q.014-.018.044-.018a.06.06 0 0 1 .044.018.06.06 0 0 1 .019.045' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 7.122 25.977)'/%3E%3Cpath d='M.622-.215a.2.2 0 0 1-.033.117.23.23 0 0 1-.098.081.4.4 0 0 1-.153.029.34.34 0 0 1-.175-.04.23.23 0 0 1-.079-.077.17.17 0 0 1-.031-.093q0-.027.019-.045a.06.06 0 0 1 .046-.019.06.06 0 0 1 .039.014.1.1 0 0 1 .027.044.3.3 0 0 0 .03.057q.015.023.044.038.03.015.076.015.065 0 .105-.03a.09.09 0 0 0 .04-.075.08.08 0 0 0-.022-.058.14.14 0 0 0-.056-.034 1 1 0 0 0-.092-.025.7.7 0 0 1-.129-.042.2.2 0 0 1-.083-.066.17.17 0 0 1-.03-.104q0-.058.032-.105a.2.2 0 0 1 .093-.07.4.4 0 0 1 .144-.025q.066 0 .114.016a.3.3 0 0 1 .08.044.2.2 0 0 1 .046.057q.015.03.015.058a.07.07 0 0 1-.018.046.06.06 0 0 1-.046.021q-.025 0-.038-.012a.2.2 0 0 1-.028-.041.2.2 0 0 0-.047-.063Q.387-.625.326-.625a.15.15 0 0 0-.09.025q-.035.024-.035.059 0 .021.012.037a.1.1 0 0 0 .032.027.4.4 0 0 0 .111.036q.06.015.11.031.048.018.083.042a.2.2 0 0 1 .054.062.2.2 0 0 1 .019.091' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 13.339 25.977)'/%3E%3Cpath d='m.184-.633.162.48.163-.483q.013-.038.019-.053a.062.062 0 0 1 .061-.039q.018 0 .034.009a.1.1 0 0 1 .025.025q.009.015.009.031L.654-.64l-.007.025-.009.024-.173.468-.019.051a.2.2 0 0 1-.021.042.1.1 0 0 1-.033.03.1.1 0 0 1-.049.012.1.1 0 0 1-.05-.011A.1.1 0 0 1 .26-.03a.2.2 0 0 1-.021-.042L.22-.123.05-.587.041-.612.033-.638.03-.662q0-.025.02-.046a.07.07 0 0 1 .05-.02q.037 0 .053.023.015.023.031.072' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 18.94 25.977)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M384 131.9c-7.753-8.433-110.425-128.473-114.9-133L48-.1C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48zm-35.9 2.1H257V27.9zM30 479V27h200l1 105c0 13.3-1.3 29 12 29h111l1 318z' style='fill-rule:nonzero' transform='matrix(.06285 0 0 .06285 3.934 -.054)'/%3E%3Cpath d='M.688-.226a.2.2 0 0 1-.017.074.28.28 0 0 1-.145.14.412.412 0 0 1-.234.013.28.28 0 0 1-.202-.168.468.468 0 0 1-.04-.19q0-.086.025-.155a.319.319 0 0 1 .182-.191.4.4 0 0 1 .134-.025q.087 0 .155.035a.3.3 0 0 1 .104.085.17.17 0 0 1 .036.097.06.06 0 0 1-.018.044.06.06 0 0 1-.042.019.06.06 0 0 1-.042-.013.2.2 0 0 1-.031-.046.2.2 0 0 0-.066-.079.16.16 0 0 0-.095-.027.17.17 0 0 0-.142.068.3.3 0 0 0-.053.193.4.4 0 0 0 .023.139.2.2 0 0 0 .067.083.2.2 0 0 0 .1.027q.063 0 .106-.031a.2.2 0 0 0 .065-.091.2.2 0 0 1 .023-.046q.014-.018.044-.018a.06.06 0 0 1 .044.018.06.06 0 0 1 .019.045' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 7.122 25.977)'/%3E%3Cpath d='M.622-.215a.2.2 0 0 1-.033.117.23.23 0 0 1-.098.081.4.4 0 0 1-.153.029.34.34 0 0 1-.175-.04.23.23 0 0 1-.079-.077.17.17 0 0 1-.031-.093q0-.027.019-.045a.06.06 0 0 1 .046-.019.06.06 0 0 1 .039.014.1.1 0 0 1 .027.044.3.3 0 0 0 .03.057q.015.023.044.038.03.015.076.015.065 0 .105-.03a.09.09 0 0 0 .04-.075.08.08 0 0 0-.022-.058.14.14 0 0 0-.056-.034 1 1 0 0 0-.092-.025.7.7 0 0 1-.129-.042.2.2 0 0 1-.083-.066.17.17 0 0 1-.03-.104q0-.058.032-.105a.2.2 0 0 1 .093-.07.4.4 0 0 1 .144-.025q.066 0 .114.016a.3.3 0 0 1 .08.044.2.2 0 0 1 .046.057q.015.03.015.058a.07.07 0 0 1-.018.046.06.06 0 0 1-.046.021q-.025 0-.038-.012a.2.2 0 0 1-.028-.041.2.2 0 0 0-.047-.063Q.387-.625.326-.625a.15.15 0 0 0-.09.025q-.035.024-.035.059 0 .021.012.037a.1.1 0 0 0 .032.027.4.4 0 0 0 .111.036q.06.015.11.031.048.018.083.042a.2.2 0 0 1 .054.062.2.2 0 0 1 .019.091' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 13.339 25.977)'/%3E%3Cpath d='m.184-.633.162.48.163-.483q.013-.038.019-.053a.062.062 0 0 1 .061-.039q.018 0 .034.009a.1.1 0 0 1 .025.025q.009.015.009.031L.654-.64l-.007.025-.009.024-.173.468-.019.051a.2.2 0 0 1-.021.042.1.1 0 0 1-.033.03.1.1 0 0 1-.049.012.1.1 0 0 1-.05-.011A.1.1 0 0 1 .26-.03a.2.2 0 0 1-.021-.042L.22-.123.05-.587.041-.612.033-.638.03-.662q0-.025.02-.046a.07.07 0 0 1 .05-.02q.037 0 .053.023.015.023.031.072' style='fill-rule:nonzero' transform='matrix(8.39799 0 0 12.455 18.94 25.977)'/%3E%3C/svg%3E")}.ag-icon-cut:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='m19 3-6 6 2 2 7-7V3m-10 9.5a.503.503 0 0 1-.5-.5c0-.274.226-.5.5-.5s.5.226.5.5-.226.5-.5.5M6 20c-1.097 0-2-.903-2-2a2 2 0 0 1 2-2c1.097 0 2 .903 2 2a2 2 0 0 1-2 2M6 8c-1.097 0-2-.903-2-2a2 2 0 0 1 2-2c1.097 0 2 .903 2 2a2 2 0 0 1-2 2m3.64-.36c.23-.5.36-1.05.36-1.64 0-2.194-1.806-4-4-4S2 3.806 2 6s1.806 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.194 0-4 1.806-4 4s1.806 4 4 4 4-1.806 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1z' style='fill-rule:nonzero' transform='translate(4 4)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='m19 3-6 6 2 2 7-7V3m-10 9.5a.503.503 0 0 1-.5-.5c0-.274.226-.5.5-.5s.5.226.5.5-.226.5-.5.5M6 20c-1.097 0-2-.903-2-2a2 2 0 0 1 2-2c1.097 0 2 .903 2 2a2 2 0 0 1-2 2M6 8c-1.097 0-2-.903-2-2a2 2 0 0 1 2-2c1.097 0 2 .903 2 2a2 2 0 0 1-2 2m3.64-.36c.23-.5.36-1.05.36-1.64 0-2.194-1.806-4-4-4S2 3.806 2 6s1.806 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.194 0-4 1.806-4 4s1.806 4 4 4 4-1.806 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1z' style='fill-rule:nonzero' transform='translate(4 4)'/%3E%3C/svg%3E")}.ag-icon-desc:before,.ag-icon-down:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m26.667 16-1.88-1.88-7.453 7.44V5.333h-2.667V21.56l-7.44-7.453L5.334 16l10.667 10.667L26.668 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m26.667 16-1.88-1.88-7.453 7.44V5.333h-2.667V21.56l-7.44-7.453L5.334 16l10.667 10.667L26.668 16z'/%3E%3C/svg%3E")}.ag-icon-excel:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M384 131.9c-7.753-8.433-110.425-128.473-114.9-133L48-.1C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48zm-35.9 2.1H257V27.9zM30 479V27h200l1 105c0 13.3-1.3 29 12 29h111l1 318z' style='fill-rule:nonzero' transform='matrix(.06285 0 0 .06285 3.934 -.054)'/%3E%3Cpath d='m.052-.139.16-.234-.135-.208a.4.4 0 0 1-.028-.052.1.1 0 0 1-.01-.042.05.05 0 0 1 .018-.037.07.07 0 0 1 .045-.016q.03 0 .047.018a1 1 0 0 1 .047.066l.107.174.115-.174.024-.038.019-.026.021-.015a.1.1 0 0 1 .027-.005.06.06 0 0 1 .044.016.05.05 0 0 1 .018.039q0 .033-.038.089l-.141.211.152.234a.3.3 0 0 1 .03.051.1.1 0 0 1 .009.038.1.1 0 0 1-.008.031.1.1 0 0 1-.024.023.1.1 0 0 1-.034.008.1.1 0 0 1-.035-.008.1.1 0 0 1-.023-.022L.427-.067.301-.265l-.134.204-.022.034-.016.019a.1.1 0 0 1-.022.015.1.1 0 0 1-.03.005.06.06 0 0 1-.044-.016.06.06 0 0 1-.017-.047q0-.036.036-.088' style='fill-rule:nonzero' transform='matrix(17.82892 0 0 16.50777 10.371 25.928)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M384 131.9c-7.753-8.433-110.425-128.473-114.9-133L48-.1C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48zm-35.9 2.1H257V27.9zM30 479V27h200l1 105c0 13.3-1.3 29 12 29h111l1 318z' style='fill-rule:nonzero' transform='matrix(.06285 0 0 .06285 3.934 -.054)'/%3E%3Cpath d='m.052-.139.16-.234-.135-.208a.4.4 0 0 1-.028-.052.1.1 0 0 1-.01-.042.05.05 0 0 1 .018-.037.07.07 0 0 1 .045-.016q.03 0 .047.018a1 1 0 0 1 .047.066l.107.174.115-.174.024-.038.019-.026.021-.015a.1.1 0 0 1 .027-.005.06.06 0 0 1 .044.016.05.05 0 0 1 .018.039q0 .033-.038.089l-.141.211.152.234a.3.3 0 0 1 .03.051.1.1 0 0 1 .009.038.1.1 0 0 1-.008.031.1.1 0 0 1-.024.023.1.1 0 0 1-.034.008.1.1 0 0 1-.035-.008.1.1 0 0 1-.023-.022L.427-.067.301-.265l-.134.204-.022.034-.016.019a.1.1 0 0 1-.022.015.1.1 0 0 1-.03.005.06.06 0 0 1-.044-.016.06.06 0 0 1-.017-.047q0-.036.036-.088' style='fill-rule:nonzero' transform='matrix(17.82892 0 0 16.50777 10.371 25.928)'/%3E%3C/svg%3E")}.ag-icon-expanded:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.94 9.88 19.06 8l-8 8 8 8 1.88-1.88L14.833 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.94 9.88 19.06 8l-8 8 8 8 1.88-1.88L14.833 16z'/%3E%3C/svg%3E")}.ag-icon-eye-slash:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21.106 15.088A5.19 5.19 0 0 0 16 10.814a5.17 5.17 0 0 0-3.668 1.522L9.866 9.868a12.2 12.2 0 0 1 6.133-1.646c5.186 0 9.614 3.225 11.408 7.778a12.34 12.34 0 0 1-5.276 6.133l-2.468-2.466a5.17 5.17 0 0 0 1.449-2.802h-2.123c-.148.508-.42.964-.782 1.33l-1.33-1.33h-2.514l2.196 2.196q-.272.049-.56.05a3.11 3.11 0 0 1-2.99-2.245h-2.123a5.19 5.19 0 0 0 7.3 3.836l2.247 2.247a12.2 12.2 0 0 1-4.434.828c-5.186 0-9.614-3.225-11.408-7.778a12.3 12.3 0 0 1 3.781-5.111l2.924 2.924a5.1 5.1 0 0 0-.404 1.275h4.206l-1.296-1.296a3.1 3.1 0 0 1 2.196-.903c1.404 0 2.587.924 2.976 2.199h2.13z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21.106 15.088A5.19 5.19 0 0 0 16 10.814a5.17 5.17 0 0 0-3.668 1.522L9.866 9.868a12.2 12.2 0 0 1 6.133-1.646c5.186 0 9.614 3.225 11.408 7.778a12.34 12.34 0 0 1-5.276 6.133l-2.468-2.466a5.17 5.17 0 0 0 1.449-2.802h-2.123c-.148.508-.42.964-.782 1.33l-1.33-1.33h-2.514l2.196 2.196q-.272.049-.56.05a3.11 3.11 0 0 1-2.99-2.245h-2.123a5.19 5.19 0 0 0 7.3 3.836l2.247 2.247a12.2 12.2 0 0 1-4.434.828c-5.186 0-9.614-3.225-11.408-7.778a12.3 12.3 0 0 1 3.781-5.111l2.924 2.924a5.1 5.1 0 0 0-.404 1.275h4.206l-1.296-1.296a3.1 3.1 0 0 1 2.196-.903c1.404 0 2.587.924 2.976 2.199h2.13z'/%3E%3C/svg%3E")}.ag-icon-eye:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 8.222c-5.186 0-9.614 3.225-11.408 7.778 1.794 4.553 6.222 7.778 11.408 7.778S25.614 20.553 27.408 16C25.614 11.447 21.186 8.222 16 8.222m0 12.964c-2.862 0-5.186-2.324-5.186-5.186s2.324-5.186 5.186-5.186 5.186 2.324 5.186 5.186-2.324 5.186-5.186 5.186m0-8.297c-1.721 0-3.111 1.39-3.111 3.111s1.39 3.111 3.111 3.111 3.111-1.39 3.111-3.111-1.39-3.111-3.111-3.111'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 8.222c-5.186 0-9.614 3.225-11.408 7.778 1.794 4.553 6.222 7.778 11.408 7.778S25.614 20.553 27.408 16C25.614 11.447 21.186 8.222 16 8.222m0 12.964c-2.862 0-5.186-2.324-5.186-5.186s2.324-5.186 5.186-5.186 5.186 2.324 5.186 5.186-2.324 5.186-5.186 5.186m0-8.297c-1.721 0-3.111 1.39-3.111 3.111s1.39 3.111 3.111 3.111 3.111-1.39 3.111-3.111-1.39-3.111-3.111-3.111'/%3E%3C/svg%3E")}.ag-icon-filter:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.333 24h5.333v-2.667h-5.333zM4 8v2.667h24V8zm4 9.333h16v-2.667H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.333 24h5.333v-2.667h-5.333zM4 8v2.667h24V8zm4 9.333h16v-2.667H8z'/%3E%3C/svg%3E")}.ag-icon-first:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24.273 22.12 18.153 16l6.12-6.12L22.393 8l-8 8 8 8zM7.727 8h2.667v16H7.727z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24.273 22.12 18.153 16l6.12-6.12L22.393 8l-8 8 8 8zM7.727 8h2.667v16H7.727z'/%3E%3C/svg%3E")}.ag-icon-group:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18.667 21.333h8.889A3.555 3.555 0 0 1 24 24.889h-5.333zm8.888-7.111v3.556h-8.889v-3.556zM24 7.111a3.555 3.555 0 0 1 3.556 3.556h-16V7.111zm-8.889 17.778h-3.556v-3.556h3.556zm0-7.111h-3.556v-3.556h3.556zM8 10.667H4.444A3.555 3.555 0 0 1 8 7.111z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18.667 21.333h8.889A3.555 3.555 0 0 1 24 24.889h-5.333zm8.888-7.111v3.556h-8.889v-3.556zM24 7.111a3.555 3.555 0 0 1 3.556 3.556h-16V7.111zm-8.889 17.778h-3.556v-3.556h3.556zm0-7.111h-3.556v-3.556h3.556zM8 10.667H4.444A3.555 3.555 0 0 1 8 7.111z'/%3E%3C/svg%3E")}.ag-icon-last:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m7.727 9.88 6.12 6.12-6.12 6.12L9.607 24l8-8-8-8zM21.607 8h2.667v16h-2.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m7.727 9.88 6.12 6.12-6.12 6.12L9.607 24l8-8-8-8zM21.607 8h2.667v16h-2.667z'/%3E%3C/svg%3E")}.ag-icon-left:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 14.667H10.44l7.453-7.453L16 5.334 5.333 16.001 16 26.668l1.88-1.88-7.44-7.453h16.227v-2.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 14.667H10.44l7.453-7.453L16 5.334 5.333 16.001 16 26.668l1.88-1.88-7.44-7.453h16.227v-2.667z'/%3E%3C/svg%3E")}.ag-icon-linked:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.2 16a4.136 4.136 0 0 1 4.133-4.133h5.333V9.334H9.333c-3.68 0-6.667 2.987-6.667 6.667s2.987 6.667 6.667 6.667h5.333v-2.533H9.333A4.136 4.136 0 0 1 5.2 16.002zm5.467 1.333h10.667v-2.667H10.667zm12-8h-5.333v2.533h5.333c2.28 0 4.133 1.853 4.133 4.133s-1.853 4.133-4.133 4.133h-5.333v2.533h5.333c3.68 0 6.667-2.987 6.667-6.667s-2.987-6.667-6.667-6.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.2 16a4.136 4.136 0 0 1 4.133-4.133h5.333V9.334H9.333c-3.68 0-6.667 2.987-6.667 6.667s2.987 6.667 6.667 6.667h5.333v-2.533H9.333A4.136 4.136 0 0 1 5.2 16.002zm5.467 1.333h10.667v-2.667H10.667zm12-8h-5.333v2.533h5.333c2.28 0 4.133 1.853 4.133 4.133s-1.853 4.133-4.133 4.133h-5.333v2.533h5.333c3.68 0 6.667-2.987 6.667-6.667s-2.987-6.667-6.667-6.667z'/%3E%3C/svg%3E")}.ag-icon-loading:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.778 11.708 3.25-3.251 2.516 2.516-3.251 3.25h4.597v3.556h-4.597l3.251 3.25-2.516 2.516-3.25-3.251v4.597h-3.556v-4.597l-3.25 3.251-2.516-2.516 3.251-3.25H7.11v-3.556h4.597l-3.251-3.25 2.516-2.516 3.25 3.251V7.111h3.556zm-3.251 7.847h2.944l2.084-2.084v-2.944l-2.084-2.084h-2.944l-2.084 2.084v2.944z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.778 11.708 3.25-3.251 2.516 2.516-3.251 3.25h4.597v3.556h-4.597l3.251 3.25-2.516 2.516-3.25-3.251v4.597h-3.556v-4.597l-3.25 3.251-2.516-2.516 3.251-3.25H7.11v-3.556h4.597l-3.251-3.25 2.516-2.516 3.25 3.251V7.111h3.556zm-3.251 7.847h2.944l2.084-2.084v-2.944l-2.084-2.084h-2.944l-2.084 2.084v2.944z'/%3E%3C/svg%3E")}.ag-icon-maximize:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 4h24v2.667H4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 4h24v2.667H4z'/%3E%3C/svg%3E")}.ag-icon-menu:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 24h24v-2.667H4zm0-6.667h24v-2.667H4zM4 8v2.667h24V8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 24h24v-2.667H4zm0-6.667h24v-2.667H4zM4 8v2.667h24V8z'/%3E%3C/svg%3E")}.ag-icon-menu-alt:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23000' d='M16 26.667a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 24q0-1.1.784-1.883A2.57 2.57 0 0 1 16 21.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784m0-8a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 16q0-1.1.784-1.883A2.57 2.57 0 0 1 16 13.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784m0-8a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 8q0-1.1.784-1.883A2.57 2.57 0 0 1 16 5.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23000' d='M16 26.667a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 24q0-1.1.784-1.883A2.57 2.57 0 0 1 16 21.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784m0-8a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 16q0-1.1.784-1.883A2.57 2.57 0 0 1 16 13.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784m0-8a2.57 2.57 0 0 1-1.883-.784A2.57 2.57 0 0 1 13.333 8q0-1.1.784-1.883A2.57 2.57 0 0 1 16 5.333q1.1 0 1.883.784.784.783.784 1.883t-.784 1.883a2.57 2.57 0 0 1-1.883.784'/%3E%3C/svg%3E")}.ag-icon-minimize:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 25.333h16V28H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 25.333h16V28H8z'/%3E%3C/svg%3E")}.ag-icon-minus:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M6.572 6.572a13.32 13.32 0 0 0 0 18.856 13.32 13.32 0 0 0 18.856 0 13.32 13.32 0 0 0 0-18.856 13.32 13.32 0 0 0-18.856 0m17.527 8.099v2.658H7.901v-2.658z' style='fill-rule:nonzero'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M6.572 6.572a13.32 13.32 0 0 0 0 18.856 13.32 13.32 0 0 0 18.856 0 13.32 13.32 0 0 0 0-18.856 13.32 13.32 0 0 0-18.856 0m17.527 8.099v2.658H7.901v-2.658z' style='fill-rule:nonzero'/%3E%3C/svg%3E")}.ag-icon-next:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E")}.ag-icon-none:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 24h16v-2.667H4zM4 8v2.667h24V8zm0 9.333h24v-2.667H4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 24h16v-2.667H4zM4 8v2.667h24V8zm0 9.333h24v-2.667H4z'/%3E%3C/svg%3E")}.ag-icon-not-allowed:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667M5.333 16c0-5.893 4.773-10.667 10.667-10.667 2.467 0 4.733.84 6.533 2.253L7.586 22.533A10.54 10.54 0 0 1 5.333 16M16 26.667c-2.467 0-4.733-.84-6.533-2.253L24.414 9.467A10.54 10.54 0 0 1 26.667 16c0 5.893-4.773 10.667-10.667 10.667'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667M5.333 16c0-5.893 4.773-10.667 10.667-10.667 2.467 0 4.733.84 6.533 2.253L7.586 22.533A10.54 10.54 0 0 1 5.333 16M16 26.667c-2.467 0-4.733-.84-6.533-2.253L24.414 9.467A10.54 10.54 0 0 1 26.667 16c0 5.893-4.773 10.667-10.667 10.667'/%3E%3C/svg%3E")}.ag-icon-paste:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.333 4H19.76C19.2 2.453 17.733 1.333 16 1.333S12.8 2.453 12.24 4H6.667A2.675 2.675 0 0 0 4 6.667V28c0 1.467 1.2 2.667 2.667 2.667h18.667c1.467 0 2.667-1.2 2.667-2.667V6.667C28.001 5.2 26.801 4 25.334 4zM16 4c.733 0 1.333.6 1.333 1.333s-.6 1.333-1.333 1.333-1.333-.6-1.333-1.333S15.267 4 16 4m9.333 24H6.666V6.667h2.667v4h13.333v-4h2.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.333 4H19.76C19.2 2.453 17.733 1.333 16 1.333S12.8 2.453 12.24 4H6.667A2.675 2.675 0 0 0 4 6.667V28c0 1.467 1.2 2.667 2.667 2.667h18.667c1.467 0 2.667-1.2 2.667-2.667V6.667C28.001 5.2 26.801 4 25.334 4zM16 4c.733 0 1.333.6 1.333 1.333s-.6 1.333-1.333 1.333-1.333-.6-1.333-1.333S15.267 4 16 4m9.333 24H6.666V6.667h2.667v4h13.333v-4h2.667z'/%3E%3C/svg%3E")}.ag-icon-pin:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m11.106 22.093-4.444 4.444-1.259-1.259 4.444-4.444zm5.872-16.63 9.618 9.62-.962.962-.962-.962-7.694 3.847 1.924 1.924-2.74 2.74-7.696-7.696 2.741-2.74 1.924 1.925 3.847-7.696-.962-.962z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m11.106 22.093-4.444 4.444-1.259-1.259 4.444-4.444zm5.872-16.63 9.618 9.62-.962.962-.962-.962-7.694 3.847 1.924 1.924-2.74 2.74-7.696-7.696 2.741-2.74 1.924 1.925 3.847-7.696-.962-.962z'/%3E%3C/svg%3E")}.ag-icon-pivot:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 30.223H5.334a3.556 3.556 0 0 1-3.556-3.556V5.334a3.556 3.556 0 0 1 3.556-3.556h21.333a3.556 3.556 0 0 1 3.556 3.556v21.333a3.556 3.556 0 0 1-3.556 3.556m-16-8.89H5.334v5.333h5.333zm16-7.11H12.444v12.444h14.223zm-9.15 6.85-2.039 2.037 2.039 2.039-1.257 1.257-3.295-3.296 3.295-3.295q.63.628 1.257 1.257zm-6.85-6.85H5.334v5.333h5.333zm15.74 3.816-1.257 1.256-2.039-2.037-2.037 2.037-1.257-1.256 3.295-3.296zM10.667 5.333H5.334v5.333h5.333zm8.889 0h-7.112v5.333h7.112zm7.111 0h-5.333v5.333h5.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 30.223H5.334a3.556 3.556 0 0 1-3.556-3.556V5.334a3.556 3.556 0 0 1 3.556-3.556h21.333a3.556 3.556 0 0 1 3.556 3.556v21.333a3.556 3.556 0 0 1-3.556 3.556m-16-8.89H5.334v5.333h5.333zm16-7.11H12.444v12.444h14.223zm-9.15 6.85-2.039 2.037 2.039 2.039-1.257 1.257-3.295-3.296 3.295-3.295q.63.628 1.257 1.257zm-6.85-6.85H5.334v5.333h5.333zm15.74 3.816-1.257 1.256-2.039-2.037-2.037 2.037-1.257-1.256 3.295-3.296zM10.667 5.333H5.334v5.333h5.333zm8.889 0h-7.112v5.333h7.112zm7.111 0h-5.333v5.333h5.333z'/%3E%3C/svg%3E")}.ag-icon-plus:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M6.572 6.572a13.32 13.32 0 0 0 0 18.856 13.32 13.32 0 0 0 18.856 0 13.32 13.32 0 0 0 0-18.856 13.32 13.32 0 0 0-18.856 0m17.527 8.099v2.658h-6.77v6.77h-2.658v-6.77h-6.77v-2.658h6.77v-6.77h2.658v6.77z' style='fill-rule:nonzero'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 32 32'%3E%3Cpath d='M6.572 6.572a13.32 13.32 0 0 0 0 18.856 13.32 13.32 0 0 0 18.856 0 13.32 13.32 0 0 0 0-18.856 13.32 13.32 0 0 0-18.856 0m17.527 8.099v2.658h-6.77v6.77h-2.658v-6.77h-6.77v-2.658h6.77v-6.77h2.658v6.77z' style='fill-rule:nonzero'/%3E%3C/svg%3E")}.ag-icon-previous:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.94 9.88 19.06 8l-8 8 8 8 1.88-1.88L14.833 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.94 9.88 19.06 8l-8 8 8 8 1.88-1.88L14.833 16z'/%3E%3C/svg%3E")}.ag-icon-right:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 5.333-1.88 1.88 7.44 7.453H5.333v2.667H21.56l-7.44 7.453 1.88 1.88 10.667-10.667L16 5.332z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 5.333-1.88 1.88 7.44 7.453H5.333v2.667H21.56l-7.44 7.453 1.88 1.88 10.667-10.667L16 5.332z'/%3E%3C/svg%3E")}.ag-icon-save:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.333 16v9.333H6.666V16H3.999v9.333C3.999 26.8 5.199 28 6.666 28h18.667C26.8 28 28 26.8 28 25.333V16zm-8 .893 3.453-3.44 1.88 1.88L15.999 22l-6.667-6.667 1.88-1.88 3.453 3.44V4h2.667v12.893z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.333 16v9.333H6.666V16H3.999v9.333C3.999 26.8 5.199 28 6.666 28h18.667C26.8 28 28 26.8 28 25.333V16zm-8 .893 3.453-3.44 1.88 1.88L15.999 22l-6.667-6.667 1.88-1.88 3.453 3.44V4h2.667v12.893z'/%3E%3C/svg%3E")}.ag-icon-small-down:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.333 12.667 16 19.334l6.667-6.667H9.334z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.333 12.667 16 19.334l6.667-6.667H9.334z'/%3E%3C/svg%3E")}.ag-icon-small-left:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.333 9.333 12.666 16l6.667 6.667V9.334z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.333 9.333 12.666 16l6.667 6.667V9.334z'/%3E%3C/svg%3E")}.ag-icon-small-right:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12.667 22.667 19.334 16l-6.667-6.667v13.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12.667 22.667 19.334 16l-6.667-6.667v13.333z'/%3E%3C/svg%3E")}.ag-icon-small-up:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.333 19.333 16 12.666l6.667 6.667H9.334z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.333 19.333 16 12.666l6.667 6.667H9.334z'/%3E%3C/svg%3E")}.ag-icon-tick:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m11.727 21.167-5.56-5.56-1.893 1.88 7.453 7.453 16-16-1.88-1.88z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m11.727 21.167-5.56-5.56-1.893 1.88 7.453 7.453 16-16-1.88-1.88z'/%3E%3C/svg%3E")}.ag-icon-tree-closed:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m12.94 8-1.88 1.88L17.167 16l-6.107 6.12L12.94 24l8-8z'/%3E%3C/svg%3E")}.ag-icon-tree-indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6.667 14.667h18.667v2.667H6.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6.667 14.667h18.667v2.667H6.667z'/%3E%3C/svg%3E")}.ag-icon-tree-open:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.12 11.06 16 17.167 9.88 11.06 8 12.94l8 8 8-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.12 11.06 16 17.167 9.88 11.06 8 12.94l8 8 8-8z'/%3E%3C/svg%3E")}.ag-icon-unlinked:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.667 9.333h-5.333v2.533h5.333a4.136 4.136 0 0 1 4.133 4.133c0 1.907-1.307 3.507-3.08 3.973l1.947 1.947c2.173-1.107 3.667-3.32 3.667-5.92a6.67 6.67 0 0 0-6.667-6.667zm-1.334 5.334h-2.92l2.667 2.667h.253zM2.667 5.693 6.814 9.84A6.65 6.65 0 0 0 2.667 16a6.67 6.67 0 0 0 6.667 6.667h5.333v-2.533H9.334a4.136 4.136 0 0 1-4.133-4.133c0-2.12 1.613-3.867 3.68-4.093l2.76 2.76h-.973v2.667h3.64l3.027 3.027v2.307h2.307l5.347 5.333 1.68-1.68L4.362 4.002 2.669 5.695z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.667 9.333h-5.333v2.533h5.333a4.136 4.136 0 0 1 4.133 4.133c0 1.907-1.307 3.507-3.08 3.973l1.947 1.947c2.173-1.107 3.667-3.32 3.667-5.92a6.67 6.67 0 0 0-6.667-6.667zm-1.334 5.334h-2.92l2.667 2.667h.253zM2.667 5.693 6.814 9.84A6.65 6.65 0 0 0 2.667 16a6.67 6.67 0 0 0 6.667 6.667h5.333v-2.533H9.334a4.136 4.136 0 0 1-4.133-4.133c0-2.12 1.613-3.867 3.68-4.093l2.76 2.76h-.973v2.667h3.64l3.027 3.027v2.307h2.307l5.347 5.333 1.68-1.68L4.362 4.002 2.669 5.695z'/%3E%3C/svg%3E")}.ag-icon-up:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5.333 16 1.88 1.88 7.453-7.44v16.227h2.667V10.44l7.44 7.453L26.666 16 15.999 5.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5.333 16 1.88 1.88 7.453-7.44v16.227h2.667V10.44l7.44 7.453L26.666 16 15.999 5.333z'/%3E%3C/svg%3E")}.ag-icon-grip:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 12H5.334v2.667h21.333zM5.333 20h21.333v-2.667H5.333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.667 12H5.334v2.667h21.333zM5.333 20h21.333v-2.667H5.333z'/%3E%3C/svg%3E")}.ag-icon-settings:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23000' d='M30 8h-4.1c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2v2h14.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30zm-9 4c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3M2 24h4.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30v-2H15.9c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2zm9-4c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23000' d='M30 8h-4.1c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2v2h14.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30zm-9 4c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3M2 24h4.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30v-2H15.9c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2zm9-4c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3'/%3E%3C/svg%3E")}
/* Part tabStyle/quartz */.ag-tabs-header{background-color:var(--ag-tab-bar-background-color);border-bottom:var(--ag-tab-bar-border);gap:var(--ag-tab-spacing);padding:var(--ag-tab-bar-top-padding) var(--ag-tab-bar-horizontal-padding) 0}.ag-tabs-header-wrapper{display:flex}.ag-tabs-header-wrapper .ag-tabs-header{flex:1}.ag-tabs-close-button-wrapper{border:0;padding:var(--ag-grid-size)}.ag-ltr .ag-tabs-close-button-wrapper{border-right:1px solid var(--ag-border-color)}.ag-rtl .ag-tabs-close-button-wrapper{border-left:1px solid var(--ag-border-color)}.ag-tabs-close-button{background-color:unset;border:0;cursor:pointer;padding:0}.ag-tab{align-items:center;background-color:var(--ag-tab-background-color);border-left:var(--ag-tab-selected-border-width) solid transparent;border-right:var(--ag-tab-selected-border-width) solid transparent;color:var(--ag-tab-text-color);display:flex;flex:1;justify-content:center;padding:var(--ag-tab-top-padding) var(--ag-tab-horizontal-padding) var(--ag-tab-bottom-padding);position:relative}.ag-tab:hover{background-color:var(--ag-tab-hover-background-color);color:var(--ag-tab-hover-text-color)}.ag-tab.ag-tab-selected{background-color:var(--ag-tab-selected-background-color);color:var(--ag-tab-selected-text-color)}.ag-ltr .ag-tab.ag-tab-selected:not(:first-of-type){border-left-color:var(--ag-tab-selected-border-color)}.ag-ltr .ag-tab.ag-tab-selected:not(:last-of-type),.ag-rtl .ag-tab.ag-tab-selected:not(:first-of-type){border-right-color:var(--ag-tab-selected-border-color)}.ag-rtl .ag-tab.ag-tab-selected:not(:last-of-type){border-left-color:var(--ag-tab-selected-border-color)}.ag-tab:after{background-color:var(--ag-tab-selected-underline-color);bottom:0;content:"";display:block;height:var(--ag-tab-selected-underline-width);left:0;opacity:0;position:absolute;right:0;transition:opacity var(--ag-tab-selected-underline-transition-duration)}.ag-tab.ag-tab-selected:after{opacity:1}.ag-tab:focus-visible{box-shadow:inset var(--ag-focus-shadow)}
/* Part inputStyle/bordered */:where(input[class^=ag-][type=number]:not(.ag-number-field-input-stepper)){-moz-appearance:textfield}:where(input[class^=ag-][type=number]:not(.ag-number-field-input-stepper))::-webkit-inner-spin-button,:where(input[class^=ag-][type=number]:not(.ag-number-field-input-stepper))::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]){background-color:var(--ag-input-background-color);border:var(--ag-input-border);border-radius:var(--ag-input-border-radius);color:var(--ag-input-text-color);min-height:var(--ag-input-height)}.ag-ltr :where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]){padding-left:var(--ag-input-padding-start)}.ag-rtl :where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]){padding-right:var(--ag-input-padding-start)}:where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]):where(:disabled){background-color:var(--ag-input-disabled-background-color);border:var(--ag-input-disabled-border);color:var(--ag-input-disabled-text-color)}:where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]):where(:focus){background-color:var(--ag-input-focus-background-color);border:var(--ag-input-focus-border);box-shadow:var(--ag-input-focus-shadow);color:var(--ag-input-focus-text-color)}:where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]):where(:invalid){background-color:var(--ag-input-invalid-background-color);border:var(--ag-input-invalid-border);color:var(--ag-input-invalid-text-color)}:where(input[class^=ag-]:not([type]),input[class^=ag-][type=text],input[class^=ag-][type=number],input[class^=ag-][type=tel],input[class^=ag-][type=date],input[class^=ag-][type=datetime-local],textarea[class^=ag-]):where(.invalid){background-color:var(--ag-input-invalid-background-color);border:var(--ag-input-invalid-border);color:var(--ag-input-invalid-text-color)}
@tailwind base;
/* Define CSS variables */
:root {
--primary: #4a3045;
--secondary: #e2c86b;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--secondary) var(--primary);
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background: var(--primary);
border-radius: 25px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--secondary);
border-radius: 14px;
border: 3px solid var(--primary);
}
@tailwind components;
@tailwind utilities;
body {
@apply bg-CDE-purple-dark text-CDE-off-white;
}
@layer components {
.btn-primary {
@apply py-2 px-4 bg-CDE-blue hover:bg-CDE-blue-dark rounded-md font-semibold hover:cursor-pointer;
}
.btn-primary-disabled {
@apply py-2 px-4 bg-CDE-blue rounded-md font-semibold hover:cursor-not-allowed;
}
.input-prefix::before {
content: "$";
}
.card-selected{
@apply shadow-xl ring-1 ring-CDE-purple-lighter-tone-1 bg-CDE-purple-lighter-text-bg;
}
.card-selected.sidebar-item:not(.project){
margin-left: .25rem;
margin-right: -0.25rem;
}
.hover-outline {
@apply rounded-md cursor-pointer transition-all duration-100;
}
.hover-outline:hover {
@apply ring-1 ring-CDE-off-white ring-inset;
}
.btn-delete {
@apply py-2 px-4 bg-CDE-red hover:bg-CDE-red-darker rounded-md font-semibold hover:cursor-pointer;
}
.btn-golden {
@apply px-4 py-2 font-semibold rounded-md bg-CDE-yellow-logo hover:bg-CDE-yellow-dark text-CDE-purple-dark;
}
.btn-mini {
@apply place-self-center bg-CDE-blue p-1 text-sm font-semibold text-CDE-off-white rounded hover:bg-CDE-blue-dark;
}
.btn-mini-delete {
@apply place-self-center bg-CDE-red p-1 text-sm font-semibold text-CDE-off-white rounded hover:bg-CDE-red-darker;
}
.input-field {
@apply w-full bg-CDE-purple-darker-tone-2 text-CDE-off-white py-2 px-4 rounded-lg hover:bg-CDE-purple-darker-tone-1 transition-colors duration-150 focus:ring-CDE-blue-light;
}
.input-field-sm {
@apply w-full bg-CDE-purple-darker-tone-2 text-CDE-off-white text-sm py-1 px-4 rounded-lg hover:bg-CDE-purple-darker-tone-1 transition-colors duration-150 focus:ring-CDE-blue-light;
}
/* Shared chips — docs/chips.md */
.cde-chip {
@apply inline-flex max-w-full items-center truncate rounded px-2 py-0.5 text-xs font-semibold;
}
.cde-chip--existing {
@apply bg-CDE-yellow-logo text-CDE-purple-dark;
}
.cde-chip--option {
@apply px-1.5 py-0.5 text-[10px] uppercase tracking-wide bg-CDE-yellow-logo/90 text-CDE-purple-dark;
}
.cde-chip--selection {
@apply absolute inset-y-1 left-2 right-2 z-[1] justify-between gap-1 bg-CDE-accent-surface text-CDE-accent ring-1 ring-CDE-accent/35;
}
.cde-chip__logo {
width: 1.35rem;
height: 1.35rem;
flex: none;
border-radius: 9999px;
object-fit: contain;
background: rgba(30, 18, 30, 0.35);
}
.cde-chip--selection-logo {
padding-left: 0.35rem;
}
.cde-chip__label {
@apply min-w-0 flex-1 truncate text-left;
}
.cde-chip__primary {
@apply block min-w-0 truncate;
}
.cde-chip__secondary {
@apply block min-w-0 truncate text-[0.68rem] font-medium leading-tight text-CDE-accent/75;
}
.cde-chip--selection-stacked {
align-items: center;
min-height: 2.55rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.cde-chip--selection-stacked .cde-chip__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.05rem;
white-space: normal;
}
.cde-chip__clear {
@apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-CDE-accent hover:bg-CDE-surface-hover;
}
.cde-chip--inline {
gap: 0.15rem;
max-width: 100%;
padding: 0.1rem 0.15rem 0.1rem 0.45rem;
background: rgba(226, 200, 107, 0.16);
border: 1px solid rgba(226, 200, 107, 0.35);
font-size: 0.68rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.92);
}
.combobox-inline-chip__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.combobox-inline-chip__remove {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
border-radius: 0.25rem;
font-size: 0.85rem;
line-height: 1;
color: rgba(250, 250, 250, 0.7);
}
.combobox-inline-chip__remove:hover {
background: rgba(250, 250, 250, 0.12);
color: rgba(250, 250, 250, 0.95);
}
.heading2 {
@apply text-CDE-yellow-logo text-lg font-semibold;
}
.filter-field {
@apply bg-CDE-off-white border-t-0 border-r-0 border-l-0 border-b-2 focus:border-b-4 focus:border-b-CDE-purple-darker-tone-2 focus:ring-0 h-5 text-sm font-semibold w-40;
}
.reveal-cell {
@apply rounded-md text-CDE-purple-dark shadow-md bg-CDE-gray-light absolute z-10 w-max;
}
.modal {
@apply fixed p-12 z-10 bg-CDE-purple-dark -translate-x-1/2 left-1/2 rounded-lg shadow-deep text-opacity-100 overflow-y-auto overflow-x-clip max-h-[calc(100vh_-_84px)];
}
/* Receipt attach + view modals: wider landscape shell + glass atmosphere. */
.modal:has(.receipt-crop),
.modal:has(.receipt-view) {
width: min(56rem, calc(100vw - 2rem));
top: 4.5rem;
padding: 1.25rem 1.5rem 1.35rem;
border: 1px solid rgba(186, 157, 196, 0.34);
background:
radial-gradient(ellipse 80% 60% at 12% 0%, rgba(226, 200, 107, 0.1), transparent 55%),
radial-gradient(ellipse 70% 55% at 92% 18%, rgba(91, 141, 239, 0.12), transparent 50%),
linear-gradient(165deg, rgba(72, 48, 70, 0.94), rgba(33, 21, 33, 0.96) 58%, rgba(45, 29, 44, 0.92));
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(250, 250, 250, 0.08),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.modal:has(.receipt-crop) > h2,
.modal:has(.receipt-view) > h2 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Managerial TE edit modal — equal top pair + full-width user band. */
.modal:has(.te-modal) {
width: min(68rem, calc(100vw - 2rem));
top: 3.5rem;
/* Top/right padding clears the absolute close (X) so cards never sit under it. */
padding: 2.75rem 2.75rem 1.2rem 1.35rem;
border: 1px solid rgba(186, 157, 196, 0.34);
background:
radial-gradient(ellipse 80% 60% at 12% 0%, rgba(226, 200, 107, 0.1), transparent 55%),
radial-gradient(ellipse 70% 55% at 92% 18%, rgba(91, 141, 239, 0.1), transparent 50%),
linear-gradient(165deg, rgba(72, 48, 70, 0.94), rgba(33, 21, 33, 0.96) 58%, rgba(45, 29, 44, 0.92));
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(250, 250, 250, 0.08),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* Title lives in the Time entry details card — hide shared modal h2. */
.modal:has(.te-modal) > h2 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.modal:has(.te-modal) #close-modal {
top: 0.85rem;
right: 0.85rem;
z-index: 20;
}
.te-modal {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-width: 0;
}
/* Top row: Time entry details | More details — equal height. */
.te-modal__main {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 0.85rem;
align-items: stretch;
min-width: 0;
}
/* Layout only — chrome comes from `.te-glass.cp-section-card` on the
section (same recipe as Project Information / Access). */
.te-modal-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.te-modal__main > .te-modal-card {
height: 100%;
}
.te-modal-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.te-modal-card__head {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.75rem;
}
.te-modal-card__head--compact {
margin-bottom: 0.55rem;
}
.te-modal-card__head-text {
flex: 1 1 auto;
min-width: 0;
}
.te-modal-card__icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.45rem;
background: rgba(226, 200, 107, 0.12);
color: #e2c86b;
}
.te-modal-card__icon svg {
width: 1.05rem;
height: 1.05rem;
}
.te-modal-card__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: #e2c86b;
}
.te-modal-card__title--entry {
font-size: 1.35rem;
letter-spacing: 0.01em;
}
.te-modal-card__subtitle {
margin: 0.15rem 0 0;
font-size: 0.78rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.62);
}
.te-modal-card__list-row .te-status-pill,
.te-modal-card__list-row .te-status-picker {
vertical-align: middle;
}
.te-modal-card__list-row .cp-status-picker {
justify-content: flex-start;
}
.te-modal-card__list {
display: flex;
flex-direction: column;
margin: 0;
}
.te-modal-card__list > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0;
border-top: 1px solid rgba(186, 157, 196, 0.16);
}
.te-modal-card__list > div:first-child {
border-top: 0;
padding-top: 0.05rem;
}
.te-modal-card__list dt {
margin: 0;
flex: none;
min-width: 5.75rem;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.58);
}
.te-modal-card__list dd {
margin: 0;
min-width: 0;
flex: 1 1 auto;
text-align: left;
font-size: 0.84rem;
font-weight: 550;
color: rgba(250, 250, 250, 0.92);
}
.te-modal-card--details .te-modal-card__list > div {
justify-content: flex-start;
}
/* Full-width user band: two thin columns under the top pair. */
.te-modal-card--user {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.te-modal-card__list--split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 1.75rem;
align-items: start;
}
.te-modal-card__list-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.te-modal-card__list-col > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.42rem 0;
border-top: 1px solid rgba(186, 157, 196, 0.16);
}
.te-modal-card__list-col > div:first-child {
border-top: 0;
padding-top: 0.05rem;
}
.te-modal-card__list--split dt {
min-width: 5.5rem;
}
.te-modal-card__list--split dd {
text-align: left;
flex: 1 1 auto;
}
.te-modal-card__value {
display: block;
}
.te-modal-card__value-secondary {
display: block;
margin-top: 0.15rem;
font-size: 0.75rem;
font-weight: 500;
color: rgba(250, 250, 250, 0.55);
}
.te-modal-card__muted {
color: rgba(250, 250, 250, 0.45);
}
/* Information-card inline-edit rows (hover pencil → per-field turbo frame). */
.te-modal-card__list--inline .te-modal-card__list-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 0;
border-top: 1px solid rgba(186, 157, 196, 0.16);
}
.te-modal-card__list--inline .te-modal-card__list-row:first-child {
border-top: 0;
padding-top: 0.1rem;
}
.te-modal-card__list--inline .te-modal-card__list-row dt {
margin: 0;
flex: none;
min-width: 6.5rem;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.58);
}
.te-modal-card__list--inline .te-modal-card__list-row dd {
margin: 0;
flex: 1 1 auto;
min-width: 0;
text-align: left;
font-size: 0.84rem;
font-weight: 550;
color: rgba(250, 250, 250, 0.92);
}
.te-modal-card__list--inline .te-modal-card__list-row dd form,
.te-modal-card__list--inline .te-modal-card__list-row dd turbo-frame {
display: block;
width: 100%;
min-width: 0;
}
.te-modal-card__list--inline .te-modal-card__list-row dd a {
color: inherit;
text-decoration: none;
}
.te-modal-inline-edit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
min-width: 0;
min-height: 1.5rem;
}
.te-modal-inline-edit__value {
min-width: 0;
flex: 1 1 auto;
}
.te-modal-inline-edit__icon {
flex: none;
display: none;
width: 1rem;
height: 1rem;
color: rgba(226, 200, 107, 0.72);
}
.te-modal-inline-edit.group:hover .te-modal-inline-edit__icon,
.te-modal-inline-edit.group:focus-within .te-modal-inline-edit__icon {
display: block;
}
.te-modal-card__list--inline .te-modal-card__list-row dd a:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.65);
outline-offset: 2px;
border-radius: 2px;
}
.te-modal-inline-fields {
display: flex;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
min-width: 0;
}
.te-modal-inline-fields__control {
flex: 1 1 auto;
min-width: 0;
}
.te-modal-inline-fields__actions {
display: flex;
flex: none;
align-items: center;
gap: 0.35rem;
padding-top: 0.15rem;
}
.te-modal-inline-form .field {
display: contents;
}
.te-modal-inline-form .input-field,
.te-modal-inline-form .te-combobox-input {
@apply w-full rounded-md border border-CDE-border-default bg-CDE-surface-interactive py-2 px-3 text-sm text-CDE-text-primary placeholder:text-CDE-text-muted shadow-soft-inner hover:bg-CDE-surface-hover focus:border-CDE-focus focus:ring-1 focus:ring-CDE-focus;
}
.te-modal-inline-form .te-field .input-field,
.te-modal-inline-form .te-field .te-combobox-input {
padding-left: 2.25rem;
}
.te-modal-inline-form .te-field--hours .input-field {
padding-left: 1.65rem;
}
.te-modal-inline-form .te-field--with-stepper .input-field {
padding-right: 1.35rem;
}
.te-modal-inline-form .te-field--project .te-combobox-input {
min-height: 2.85rem;
}
.te-modal-inline-form .te-modal-form__textarea {
min-height: 4.75rem;
resize: vertical;
}
.te-modal-inline-form .te-field--comment .te-field__icon {
top: 0.85rem;
transform: none;
}
.te-modal-combobox {
width: 100%;
}
/* Let the fixed date-picker panel paint past the modal card overflow. */
.modal:has(.te-modal .date-picker [aria-expanded="true"]),
.te-modal:has(.date-picker [aria-expanded="true"]),
.te-modal-card:has(.date-picker [aria-expanded="true"]) {
overflow: visible;
}
.te-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-top: 0.15rem;
}
.te-modal__footer-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.te-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 2.35rem;
padding: 0.45rem 0.95rem;
border-radius: 0.5rem;
font-size: 0.88rem;
font-weight: 650;
line-height: 1.2;
border: 1px solid transparent;
}
.te-modal__btn svg {
width: 1rem;
height: 1rem;
}
.te-modal__btn--danger {
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.55);
background: transparent;
}
.te-modal__btn--danger:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.te-modal__btn--ghost {
color: rgba(250, 250, 250, 0.9);
border-color: rgba(186, 157, 196, 0.35);
background: rgba(255, 255, 255, 0.04);
}
.te-modal__btn--primary {
color: #fff;
background: #3b82f6;
border-color: #3b82f6;
}
.te-modal__btn--primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 960px) {
.te-modal__main {
grid-template-columns: 1fr;
}
.te-modal-card__list--split {
grid-template-columns: 1fr;
gap: 0;
}
.te-modal-card__list-col + .te-modal-card__list-col > div:first-child {
border-top: 1px solid rgba(186, 157, 196, 0.16);
padding-top: 0.42rem;
}
}
@media (max-width: 640px) {
.te-modal-card__head {
flex-wrap: wrap;
}
.te-modal__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.te-modal__footer-right {
display: grid;
grid-template-columns: 1fr;
}
}
/* App-level confirm dialog — see docs/confirm-dialog.md */
.confirm-dialog {
@apply fixed inset-0 z-[60] flex items-center justify-center p-4;
}
.confirm-dialog[hidden] {
display: none !important;
}
/* `.confirm-dialog__btn` sets display:inline-flex; without this, the HTML
[hidden] UA rule loses and the empty alternate button still paints
(Send invite / View app as are two-button asks). Same pattern as
.combobox-chip-commit[hidden] / .hover-detail--logo:not([hidden]). */
.confirm-dialog__btn[hidden] {
display: none !important;
}
.confirm-dialog__backdrop {
@apply absolute inset-0 bg-black/50;
}
.confirm-dialog__panel {
@apply relative z-[1] w-full max-w-md rounded-xl border p-6 text-CDE-off-white outline-none;
border-color: rgba(186, 157, 196, 0.36);
background: rgba(45, 29, 44, 0.92);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(250, 250, 250, 0.08),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.confirm-dialog__title {
@apply text-lg font-semibold text-CDE-off-white;
}
.confirm-dialog__message {
@apply mt-2 text-sm leading-relaxed text-CDE-off-white/90 whitespace-pre-line;
}
.confirm-dialog__actions {
@apply mt-6 flex flex-wrap items-center justify-end gap-3;
}
.confirm-dialog__btn {
@apply inline-flex items-center justify-center rounded-md px-4 py-2.5 text-sm font-semibold transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-CDE-purple-dark;
}
.confirm-dialog__btn--cancel {
@apply border border-CDE-purple-light/50 bg-transparent text-CDE-off-white hover:bg-white/10 focus:ring-CDE-purple-light/50;
}
.confirm-dialog__btn--alternate {
@apply border border-CDE-purple-light/50 bg-transparent text-CDE-off-white hover:bg-white/10 focus:ring-CDE-purple-light/50;
}
.confirm-dialog__btn--confirm {
@apply bg-CDE-yellow-logo text-CDE-purple-dark hover:bg-CDE-yellow-dark focus:ring-CDE-yellow-logo/70;
}
.confirm-dialog--danger .confirm-dialog__btn--confirm {
@apply bg-red-700 text-white hover:bg-red-800 focus:ring-red-500/70;
}
.row-with-nested-content {
@apply cursor-pointer relative;
}
.show-dropdown:focus-within .dropdown {
@apply block;
}
.show-dropdown2:focus-within .dropdown2 {
@apply block;
}
/* Shared dropdown: trigger stays activated while menu is open (docs/dropdown-menus.md). */
[data-controller~="dropdown"] [data-dropdown-target="button"].is-open,
[data-controller~="dropdown"] [data-dropdown-target="button"][aria-expanded="true"] {
@apply bg-CDE-surface-hover;
}
.CDE-purple-dark-semi-transparent {
background-color: rgba(74, 48, 69, 0.9);
}
.row-with-nested-content:hover {
@apply text-CDE-purple-dark bg-CDE-gray-light;
}
.row-with-nested-content::after {
@apply absolute transition-transform ease-in-out duration-200 left-3;
content: "";
display: block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #e2c86b; /* Chevron pointing down */
transform: translateY(-50%) rotate(0deg);
top: 50%;
}
.active-tab {
@apply relative font-bold shadow-md-inner bg-CDE-purple-dark;
}
.active-tab::after {
@apply bg-CDE-purple-dark absolute h-3 rounded-sm;
content: "";
bottom: -5px;
left: 50%;
width: 96%;
transform: translateX(-50%);
z-index: 10;
}
.row-with-nested-content:active::after {
@apply scale-110;
}
.row-with-nested-content:hover::after {
border-top: 5px solid #4a3045;
}
.nested-table-child {
@apply shadow-md-inner rounded-md mb-4 ml-4;
}
.group-reveal {
@apply overflow-visible max-w-full px-1 -ml-1;
}
.selected-date {
@apply outline outline-2 outline-CDE-off-white;
}
.today-date {
@apply ring ring-inset ring-CDE-purple-logo;
}
.hover-date {
@apply outline-dotted outline-CDE-off-white;
}
/* Dirty TE fields — blue ring (CDE-blue-light). Higher specificity under
#te-main-stack so TE input focus rings do not wash it out. Relates to
Save changes (te-btn-secondary-filled) as the “unsaved → save” chrome pair —
the filled button uses the same CDE-blue-light as the dirty ring. */
.cell-changed {
@apply ring-2 ring-inset ring-CDE-blue-light rounded-md;
}
#te-main-stack .input-field.cell-changed,
#te-main-stack .te-field.cell-changed .input-field,
#te-main-stack .te-project-combobox.cell-changed .te-combobox-input {
@apply border-CDE-blue-light ring-2 ring-inset ring-CDE-blue-light focus:border-CDE-blue-light focus:ring-2 focus:ring-inset focus:ring-CDE-blue-light;
}
#te-main-stack .te-entry-card--dirty {
box-shadow:
inset 0.25rem 0 0 var(--te-entry-accent),
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(0, 118, 245, 0.35),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.base-cell {
@apply truncate whitespace-nowrap pl-7 pr-5 py-2;
}
.cell-field {
@apply bg-CDE-purple-dark rounded-md outline-none w-full text-CDE-gray-light focus:border-CDE-off-white;
}
/*
* Fixed sidebars (staff TE calendar, shared page chrome) pin to the viewport.
* Nav is h-12 (3rem). While impersonating, the yellow banner is h-8 (2rem)
* above the nav — bump --app-chrome-top so fixed panels clear banner + nav.
* Approvals uses flex/grid inside (not viewport-fixed), so it shrinks
* with the banner without this class.
*/
:root {
--app-nav-height: 3rem;
--impersonation-banner-height: 2rem;
--app-chrome-top: var(--app-nav-height);
}
body.impersonating {
--app-chrome-top: calc(var(--app-nav-height) + var(--impersonation-banner-height));
}
.app-fixed-below-chrome {
top: var(--app-chrome-top);
}
.app-top-nav {
background:
linear-gradient(
180deg,
rgba(255, 252, 247, 0.98) 0%,
rgba(244, 236, 226, 0.96) 55%,
rgba(232, 220, 206, 0.94) 100%
);
border-bottom: 1px solid rgba(74, 48, 69, 0.12);
box-shadow: 0 1px 0 rgba(226, 200, 107, 0.18);
}
.main-nav-list {
@apply gap-4;
}
.main-nav {
@apply relative inline-flex h-9 items-center gap-2 rounded-md border border-transparent px-3 py-1.5 text-[0.9375rem] font-semibold text-CDE-purple-dark/85;
}
.main-nav__icon {
@apply h-5 w-5 shrink-0 text-CDE-purple-dark/70;
}
.main-nav:hover {
@apply bg-white/70 text-CDE-purple-dark duration-200;
}
.main-nav:hover .main-nav__icon {
@apply text-CDE-purple-dark;
}
/* Active top-nav — thin gold outline pill (staff TE mockup), cream chrome */
.main-nav--active,
.main-nav[aria-current="page"] {
@apply bg-white/40 text-CDE-purple-dark;
border-color: #E2C86B; /* CDE-yellow-logo */
box-shadow: inset 0 0 0 0.5px rgba(226, 200, 107, 0.35);
}
.main-nav--active .main-nav__icon,
.main-nav[aria-current="page"] .main-nav__icon {
@apply text-CDE-yellow-darkest;
}
/* Top flash drawer — message + circular countdown dismiss (alert Stimulus). */
.flash-alert {
@apply inline-flex max-w-[min(36rem,calc(100vw-2rem))] items-center gap-3 py-1.5 pl-5 pr-2;
--flash-alert-circumference: 47.1239; /* 2π × 7.5 */
}
.flash-alert__message {
@apply min-w-0 flex-1 text-left leading-snug;
}
.flash-alert__dismiss {
@apply relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-CDE-off-white/90;
}
.flash-alert__dismiss:hover {
@apply bg-white/15 text-CDE-off-white;
}
.flash-alert__dismiss:focus-visible {
@apply outline outline-2 outline-offset-2 outline-CDE-off-white;
}
.flash-alert__timer {
@apply absolute inset-0 h-full w-full;
}
.flash-alert__timer-track,
.flash-alert__timer-progress {
stroke-width: 1.75;
transform-origin: center;
transform: rotate(-90deg);
}
.flash-alert__timer-track {
stroke: rgba(255, 255, 255, 0.28);
}
.flash-alert__timer-progress {
stroke: currentColor;
stroke-linecap: round;
stroke-dasharray: var(--flash-alert-circumference);
stroke-dashoffset: 0;
}
.flash-alert__timer-progress.is-running {
animation: flash-alert-countdown linear forwards;
animation-duration: var(--flash-alert-duration, 8s);
}
@keyframes flash-alert-countdown {
to {
stroke-dashoffset: var(--flash-alert-circumference);
}
}
.flash-alert__close {
@apply relative h-3.5 w-3.5;
}
.magic-wand {
@apply bg-no-repeat relative w-full my-2;
background-image: url(data:image/svg+xml;base64,IDxzdmcgY2xhc3M9ImFic29sdXRlIHctNSBoLTUgaW5zZXQteS0xLzMgaW5zZXQteC0xNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTc2IDUxMiI+PHBhdGggZmlsbD0iI0UyQzg2QiIgZD0iTTIzNC43IDQyLjdMMTk3IDU2LjhjLTMgMS4xLTUgNC01IDcuMnMyIDYuMSA1IDcuMmwzNy43IDE0LjFMMjQ4LjggMTIzYzEuMSAzIDQgNSA3LjIgNXM2LjEtMiA3LjItNWwxNC4xLTM3LjdMMzE1IDcxLjJjMy0xLjEgNS00IDUtNy4ycy0yLTYuMS01LTcuMkwyNzcuMyA0Mi43IDI2My4yIDVjLTEuMS0zLTQtNS03LjItNXMtNi4xIDItNy4yIDVMMjM0LjcgNDIuN3pNNDYuMSAzOTUuNGMtMTguNyAxOC43LTE4LjcgNDkuMSAwIDY3LjlsMzQuNiAzNC42YzE4LjcgMTguNyA0OS4xIDE4LjcgNjcuOSAwTDUyOS45IDExNi41YzE4LjctMTguNyAxOC43LTQ5LjEgMC02Ny45TDQ5NS4zIDE0LjFjLTE4LjctMTguNy00OS4xLTE4LjctNjcuOSAwTDQ2LjEgMzk1LjR6TTQ4NC42IDgyLjZsLTEwNSAxMDUtMjMuMy0yMy4zIDEwNS0xMDUgMjMuMyAyMy4zek03LjUgMTE3LjJDMyAxMTguOSAwIDEyMy4yIDAgMTI4czMgOS4xIDcuNSAxMC44TDY0IDE2MGwyMS4yIDU2LjVjMS43IDQuNSA2IDcuNSAxMC44IDcuNXM5LjEtMyAxMC44LTcuNUwxMjggMTYwbDU2LjUtMjEuMmM0LjUtMS43IDcuNS02IDcuNS0xMC44cy0zLTkuMS03LjUtMTAuOEwxMjggOTYgMTA2LjggMzkuNUMxMDUuMSAzNSAxMDAuOCAzMiA5NiAzMnMtOS4xIDMtMTAuOCA3LjVMNjQgOTYgNy41IDExNy4yem0zNTIgMjU2Yy00LjUgMS43LTcuNSA2LTcuNSAxMC44czMgOS4xIDcuNSAxMC44TDQxNiA0MTZsMjEuMiA1Ni41YzEuNyA0LjUgNiA3LjUgMTAuOCA3LjVzOS4xLTMgMTAuOC03LjVMNDgwIDQxNmw1Ni41LTIxLjJjNC41LTEuNyA3LjUtNiA3LjUtMTAuOHMtMy05LjEtNy41LTEwLjhMNDgwIDM1MmwtMjEuMi01Ni41Yy0xLjctNC41LTYtNy41LTEwLjgtNy41cy05LjEgMy0xMC44IDcuNUw0MTYgMzUybC01Ni41IDIxLjJ6Ii8+PC9zdmc+);
background-position: 60px 50%;
background-size: 20px 20px;
}
.row-hidden-by-search {
@apply hidden;
}
.table-hidden-by-search {
@apply hidden;
}
/*
* Hub atmospheres — login/TE family, tab-varying texture (north star).
* Staff / Clients·Projects / Settings only; do not restyle global .btn-primary.
*/
/* Staff Management — soft grid + dots (people directory feel) */
.staff-atmosphere {
isolation: isolate;
background:
radial-gradient(circle at 22% 78%, rgba(114, 81, 131, 0.3), transparent 26rem),
radial-gradient(circle at 82% 14%, rgba(99, 64, 92, 0.34), transparent 30rem),
linear-gradient(152deg, #2f1c2e 0%, #4A3045 50%, #271927 100%);
}
.staff-atmosphere::before,
.staff-atmosphere::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.staff-atmosphere::before {
opacity: 0.14;
background-image:
linear-gradient(90deg, rgba(250, 250, 250, 0.14) 1px, transparent 1px),
linear-gradient(rgba(250, 250, 250, 0.12) 1px, transparent 1px),
radial-gradient(circle at 20% 12%, rgba(250, 250, 250, 0.55) 1px, transparent 2px);
background-size: 12rem 12rem, 12rem 12rem, 3.5rem 3.5rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25) 38%, rgba(0,0,0,0.25) 62%, rgba(0,0,0,0.9));
}
.staff-atmosphere::after {
opacity: 0.1;
background:
linear-gradient(28deg, transparent 0 32%, rgba(250, 250, 250, 0.12) 32.1% 32.3%, transparent 32.4% 100%),
repeating-linear-gradient(90deg, transparent 0 6rem, rgba(250, 250, 250, 0.06) 6.05rem 6.1rem, transparent 6.15rem 12rem);
}
.staff-atmosphere > * {
position: relative;
z-index: 1;
}
/* Match Clients/Projects opaque rail so sticky search / add bar share one floor. */
.staff-atmosphere #page-sidebar {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: hidden;
background: #322032;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
inset -1px 0 0 rgba(250, 250, 250, 0.08),
8px 0 24px rgba(0, 0, 0, 0.22);
}
.staff-atmosphere #page-sidebar > turbo-frame#sidebar {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
height: 100%;
}
.staff-atmosphere #page-header {
background: rgba(69, 45, 64, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset 0 -1px 0 rgba(250, 250, 250, 0.12),
0 10px 32px rgba(0, 0, 0, 0.22);
}
/* User show follows Project: header sits flush on atmosphere, no glass bar. */
.staff-atmosphere #cp-user-show > #page-header {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.staff-atmosphere .sidebar-item.card-selected,
.cp-atmosphere .sidebar-item.card-selected {
box-shadow:
inset 3px 0 0 #E2C86B,
0 0 0 1px rgba(186, 157, 196, 0.28);
}
.staff-empty {
@apply relative z-10 mx-auto mt-16 flex max-w-lg flex-col items-center gap-2 rounded-xl border px-8 py-10 text-center;
border-color: rgba(186, 157, 196, 0.28);
background: rgba(45, 29, 44, 0.72);
box-shadow:
0 12px 34px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.staff-empty::before {
content: "";
display: block;
width: 2.25rem;
height: 0.25rem;
border-radius: 999px;
background: #E2C86B;
margin-bottom: 0.25rem;
}
/*
* Clients/Projects atmosphere — same engineering-line recipe as My Time
* (.te-shell: large grid + station dots + long construction strokes) with
* an isometric grid and different stroke angles. Scoped via .cp-atmosphere.
*
* Lines are painted on the main canvas (and the empty state), never on the
* rail. The sidebar stays opaque. Project-show cards sit in the same
* isolation context as their line overlays so a light backdrop-filter can
* soften the grid through the glass — a handful of panels, same cost class
* as My Time.
*/
.cp-atmosphere {
isolation: isolate;
background:
radial-gradient(circle at 18% 82%, rgba(114, 81, 131, 0.36), transparent 26rem),
radial-gradient(circle at 84% 8%, rgba(99, 64, 92, 0.42), transparent 30rem),
linear-gradient(162deg, #221522 0%, #3c263a 50%, #281828 100%);
}
.cp-atmosphere:not(:has(#page-sidebar))::before,
.cp-atmosphere:not(:has(#page-sidebar))::after,
.cp-atmosphere #main-page-content:not(:has(#cp-project-show)):not(:has(#cp-client-show))::before,
.cp-atmosphere #main-page-content:not(:has(#cp-project-show)):not(:has(#cp-client-show))::after,
#cp-project-show::before,
#cp-project-show::after,
#cp-client-show::before,
#cp-client-show::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.cp-atmosphere:not(:has(#page-sidebar))::before,
.cp-atmosphere #main-page-content:not(:has(#cp-project-show)):not(:has(#cp-client-show))::before,
#cp-project-show::before,
#cp-client-show::before {
opacity: 0.2;
background-image:
linear-gradient(60deg, rgba(250, 250, 250, 0.14) 1px, transparent 1px),
linear-gradient(150deg, rgba(250, 250, 250, 0.14) 1px, transparent 1px),
radial-gradient(circle at 28% 16%, rgba(250, 250, 250, 0.65) 1px, transparent 2px),
radial-gradient(circle at 64% 78%, rgba(250, 250, 250, 0.5) 1px, transparent 2px),
radial-gradient(circle at 88% 34%, rgba(250, 250, 250, 0.45) 1px, transparent 2px);
background-size: 16rem 16rem, 16rem 16rem, 12rem 12rem, 9.5rem 9.5rem, 14rem 14rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.16), rgba(0,0,0,0.42) 18%, rgba(0,0,0,0.55));
}
.cp-atmosphere:not(:has(#page-sidebar))::after,
.cp-atmosphere #main-page-content:not(:has(#cp-project-show)):not(:has(#cp-client-show))::after,
#cp-project-show::after,
#cp-client-show::after {
opacity: 0.22;
background:
linear-gradient(32deg, transparent 0 24%, rgba(250, 250, 250, 0.16) 24.1% 24.32%, transparent 24.4% 100%),
linear-gradient(148deg, transparent 0 71%, rgba(250, 250, 250, 0.14) 71.1% 71.32%, transparent 71.42% 100%),
linear-gradient(86deg, transparent 0 41%, rgba(250, 250, 250, 0.08) 41.1% 41.26%, transparent 41.35% 100%),
repeating-linear-gradient(0deg, transparent 0 8.5rem, rgba(250, 250, 250, 0.08) 8.55rem 8.61rem, transparent 8.67rem 15rem);
box-shadow:
inset 3.5rem 0 6rem rgba(0, 0, 0, 0.14),
inset -3.5rem 0 6rem rgba(0, 0, 0, 0.12);
}
.cp-atmosphere > * {
position: relative;
z-index: 1;
}
.cp-atmosphere #main-page-content:not(:has(#cp-project-show)):not(:has(#cp-client-show)) > *,
#cp-project-show > *,
#cp-client-show > * {
position: relative;
z-index: 1;
}
.cp-atmosphere #page-sidebar {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: hidden;
background: #322032;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
inset -1px 0 0 rgba(250, 250, 250, 0.08),
8px 0 24px rgba(0, 0, 0, 0.22);
}
.cp-atmosphere #page-sidebar > turbo-frame#sidebar {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
height: 100%;
}
/* Clients/Projects rail: sticky search outside the list; expanded client
heads stick to the top of the scrolling list. */
.cp-rail {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
height: 100%;
width: 20rem;
overflow: hidden;
}
.cp-rail__search {
position: sticky;
top: 0;
z-index: 20;
flex-shrink: 0;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
padding: 0.25rem 0.75rem 0.5rem;
background: #322032;
box-shadow: 0 1px 0 rgba(250, 250, 250, 0.06);
}
.cp-rail__search .search-box {
margin-top: 0.5rem;
}
/* Listless inline-chip rail search — no dropdown; Enter commits chips.
Stay inside the rail: full width of the padded search slot, never wider. */
.cp-rail__search-combobox {
margin: 0.5rem 0 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.cp-rail__search-combobox .combobox-chip-input {
background: rgba(250, 250, 250, 0.06);
border: 1px solid rgba(250, 250, 250, 0.14);
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.cp-rail__search-combobox .combobox-chip-input:focus-within {
@apply ring-2 ring-CDE-blue-light;
border-color: transparent;
}
.cp-rail__search-combobox .combobox-search-icon {
color: rgba(250, 250, 250, 0.45);
}
.cp-rail__search-combobox .combobox-inline-input {
color: #fafafa;
}
.cp-rail__search-combobox .combobox-inline-input::placeholder {
color: rgba(250, 250, 250, 0.45);
}
.cp-rail__list {
--cp-rail-sticky-top: -0.375rem; /* ~6px — seat stuck parent under search */
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
/* No top padding: padding above sticky heads leaves a strip where prior
project chrome peeks between search and the stuck client (Tracker same). */
padding: 0 0 1rem;
overscroll-behavior: contain;
}
/* Flat Staff rail: breathe between cards. Do not make the scroll list itself
a flex column — .cp-rail-card has overflow:hidden, so flex items would
shrink to zero height inside the constrained overflow-y:auto container.
Projects get gap via .cp-rail-group__stack (unconstrained content height). */
.cp-rail__list > .cp-rail-card.is-kind-staff {
margin-top: 0.45rem;
}
.cp-rail__list > .cp-rail-card.is-kind-staff:first-child {
margin-top: 0.15rem;
}
/* Client group is structural only — no outline wrapping client + projects.
Each row is its own Tracker-style card with a kind-coloured left bar. */
.cp-rail-group {
position: relative;
border: none;
outline: none;
background: transparent;
box-shadow: none;
/* Browser scroll-anchoring fights collapse height changes + the JS pin. */
overflow-anchor: none;
}
.cp-rail-group__head {
position: relative;
display: flex;
align-items: center;
z-index: 1;
padding: 0.15rem 0;
/* Solid rail shelf — same paint as sticky search — so scrolled project
chrome cannot ghost through the sticky expanded client. */
background-color: #322032;
isolation: isolate;
}
.cp-rail-group__head > .cp-rail-card {
position: relative;
z-index: 1;
}
/* Only stick while the project stack is open (chevron or Enter expand).
Negative top seats the parent flush under search so prior rows cannot
peek in the gap above the stuck card. */
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) > .cp-rail-group__head,
.cp-rail-group.is-expanded > .cp-rail-group__head {
position: sticky;
top: var(--cp-rail-sticky-top);
z-index: 10;
background-color: #322032;
box-shadow: 0 1px 0 rgba(250, 250, 250, 0.08);
}
/* Opaque underlay extends upward into the stick offset so the gap under
search stays covered while prior chrome scrolls away. */
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) > .cp-rail-group__head::before,
.cp-rail-group.is-expanded > .cp-rail-group__head::before {
content: "";
position: absolute;
top: var(--cp-rail-sticky-top);
right: 0;
bottom: -1px;
left: 0;
z-index: 0;
background-color: #322032;
pointer-events: none;
}
.cp-rail-group__stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
/* Left nest indent; right gutter matches client card margin so rights align. */
padding: 0.15rem var(--cp-rail-gutter, 0.5rem) 0.4rem 1.15rem;
}
/* Same kind accents as Tracker .approvals-group.is-kind-* (gold / blue).
Closed / projects: small radius + straight ::before bar.
Expanded client: open-tip radius; crescent from a curved ::before bar
(not inset — inset + radius lets scrolled chrome peek through). */
.cp-rail-card {
--cp-rail-accent: rgba(226, 200, 107, 0.68);
--cp-rail-accent-soft: rgba(226, 200, 107, 0.28);
--cp-rail-accent-focus: rgba(226, 200, 107, 0.82);
--cp-rail-bar-width: 0.25rem;
--cp-rail-gutter: 0.5rem;
--cp-rail-radius-closed: 0.35rem;
--cp-rail-radius-open: 0.95rem;
/* Opaque floor under gradients / gold wash so sticky scrollers cannot
peek through semi-transparent stops (same look, solid underpaint). */
--cp-rail-card-floor: rgb(53, 35, 51);
position: relative;
box-sizing: border-box;
margin: 0 var(--cp-rail-gutter);
overflow: hidden;
border-radius: var(--cp-rail-radius-closed);
background-color: var(--cp-rail-card-floor);
background-image: linear-gradient(180deg, rgb(59, 41, 57) 0%, rgb(53, 35, 51) 100%);
box-shadow: 0 1px 0 rgba(250, 250, 250, 0.07);
transition:
border-radius 140ms ease,
background-color 140ms ease,
box-shadow 140ms ease;
}
.cp-rail-card::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
width: var(--cp-rail-bar-width);
background: var(--cp-rail-accent);
border-radius: var(--cp-rail-radius-closed) 0 0 var(--cp-rail-radius-closed);
pointer-events: none;
transition:
opacity 140ms ease,
border-radius 140ms ease,
background-color 140ms ease,
width 140ms ease;
}
.cp-rail-card.is-kind-client,
.cp-rail-card.is-kind-staff {
--cp-rail-accent: rgba(226, 200, 107, 0.68);
--cp-rail-accent-soft: rgba(226, 200, 107, 0.28);
--cp-rail-accent-focus: rgba(226, 200, 107, 0.82);
}
.cp-rail-card.is-kind-project {
--cp-rail-accent: rgba(95, 167, 232, 0.68);
--cp-rail-accent-soft: rgba(95, 167, 232, 0.28);
--cp-rail-accent-focus: rgba(95, 167, 232, 0.82);
/* Stack supplies left indent + shared right gutter. */
margin-left: 0;
margin-right: 0;
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client {
border-radius: var(--cp-rail-radius-open);
/* No inset left accent — inset + open radius lets scrolled project chrome
peek through the top-left corner. Crescent comes from ::before below. */
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(250, 250, 250, 0.05),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client::before,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client::before {
/* Thin bar; right edge curves inward with the open-tip corner (crescent). */
opacity: 1;
border-radius: var(--cp-rail-radius-open) 0.4rem 0.4rem var(--cp-rail-radius-open);
}
.cp-rail-card:hover {
background-color: var(--cp-rail-card-floor);
background-image: linear-gradient(180deg, rgb(68, 48, 66) 0%, rgb(58, 38, 56) 100%);
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.2),
0 1px 0 rgba(250, 250, 250, 0.1);
}
.cp-rail-card:hover::before {
background: var(--cp-rail-accent-focus);
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client:hover,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client:hover {
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(250, 250, 250, 0.06),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.cp-rail-card.is-selected,
.cp-rail-card:has(.card-selected) {
--cp-rail-card-floor: rgb(58, 38, 56);
background-color: var(--cp-rail-card-floor);
background-image: linear-gradient(180deg, rgb(66, 46, 64) 0%, rgb(58, 38, 56) 100%);
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.cp-rail-card.is-selected::before,
.cp-rail-card:has(.card-selected)::before {
width: 0.28rem;
background: var(--cp-rail-accent-focus);
}
/* Selected staff: Tracker-style lighter plum lift (same family as
.approvals-group.is-tracker-*.is-selected) + brighter solid left bar.
Floors sit a step above Tracker browse values so the dense rail still
reads selected vs idle at a glance. */
.cp-rail-card.is-kind-staff.is-selected,
.cp-rail-card.is-kind-staff:has(.card-selected) {
--cp-rail-card-floor: rgb(68, 48, 66);
background-color: var(--cp-rail-card-floor);
background-image: linear-gradient(180deg, rgb(86, 62, 84) 0%, rgb(68, 48, 66) 100%);
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(226, 200, 107, 0.42),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
}
.cp-rail-card.is-kind-staff.is-selected::before,
.cp-rail-card.is-kind-staff:has(.card-selected)::before {
width: 0.34rem;
background: #f4e7b0;
}
.cp-rail-card.is-kind-staff.is-selected:hover,
.cp-rail-card.is-kind-staff:has(.card-selected):hover {
--cp-rail-card-floor: rgb(72, 52, 70);
background-color: var(--cp-rail-card-floor);
background-image: linear-gradient(180deg, rgb(94, 68, 92) 0%, rgb(72, 52, 70) 100%);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.24),
0 0 0 1px rgba(226, 200, 107, 0.52),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.cp-rail-card.is-kind-staff.is-selected:hover::before,
.cp-rail-card.is-kind-staff:has(.card-selected):hover::before {
background: #f8efc8;
}
/* Selected client: stronger gold wash + thicker left bar.
Gold wash stays translucent for look; opaque plum floor blocks peeking. */
.cp-rail-card.is-kind-client.is-selected,
.cp-rail-card.is-kind-client:has(.card-selected) {
--cp-rail-card-floor: rgb(58, 38, 56);
background-color: var(--cp-rail-card-floor);
background-image:
linear-gradient(90deg, rgba(226, 200, 107, 0.24) 0%, rgb(66, 46, 64) 48%, rgb(58, 38, 56) 100%);
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.cp-rail-card.is-kind-client.is-selected::before,
.cp-rail-card.is-kind-client:has(.card-selected)::before {
width: 0.32rem;
background: #e2c86b;
}
.cp-rail-card.is-kind-client.is-selected:hover,
.cp-rail-card.is-kind-client:has(.card-selected):hover {
--cp-rail-card-floor: rgb(60, 40, 58);
background-color: var(--cp-rail-card-floor);
background-image:
linear-gradient(90deg, rgba(226, 200, 107, 0.3) 0%, rgb(70, 50, 68) 48%, rgb(60, 40, 58) 100%);
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(226, 200, 107, 0.48),
inset 0 1px 0 rgba(250, 250, 250, 0.16);
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client.is-selected,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client.is-selected,
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client:has(.card-selected),
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client:has(.card-selected) {
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client.is-selected::before,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client.is-selected::before,
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client:has(.card-selected)::before,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client:has(.card-selected)::before {
width: 0.32rem;
background: #e2c86b;
opacity: 1;
}
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client.is-selected:hover,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client.is-selected:hover,
.cp-rail-group:has(.cp-rail-group__stack:not(.hidden)) .cp-rail-card.is-kind-client:has(.card-selected):hover,
.cp-rail-group.is-expanded .cp-rail-card.is-kind-client:has(.card-selected):hover {
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(226, 200, 107, 0.48),
inset 0 1px 0 rgba(250, 250, 250, 0.16);
}
.cp-rail-card .sidebar-item {
max-width: none;
border-radius: 0;
background: transparent;
}
/* Selected fill lives on the card; drop the old perimeter / inset ring. */
.cp-atmosphere .cp-rail .sidebar-item.card-selected,
.staff-atmosphere .cp-rail .sidebar-item.card-selected {
box-shadow: none;
background: transparent;
}
.cp-rail-card__chevron {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin-right: 0.35rem;
padding: 0.25rem;
color: rgba(226, 200, 107, 0.88);
border-radius: 0.35rem;
transition:
background-color 120ms ease,
color 120ms ease;
}
.cp-rail-card__chevron svg {
width: 1.15rem;
height: 1.15rem;
transition: transform 150ms ease;
}
.cp-rail-card__chevron[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cp-rail-card__chevron:hover,
.cp-rail-card__chevron:focus-visible {
color: #e2c86b;
background: rgba(250, 250, 250, 0.08);
}
.cp-rail-card__chevron:focus-visible {
outline: 2px solid var(--cp-rail-accent-focus, rgba(226, 200, 107, 0.82));
outline-offset: 1px;
}
/* Header sits on the atmosphere (My Time pattern). Do not glass-wrap it. */
/* Project / Client / Staff show cards share global `.te-glass` (clearer fill +
blur on ::before). Do not re-fork host backdrop-filter here — that traps
Tracker position:fixed tips (hover-detail / pie). */
/* Staff user show — Slice 1 mock chrome (designations placeholder + impersonation). */
#cp-user-show .cp-project-stack {
gap: 1rem;
}
#cp-card-designations.cp-section-card--fill {
min-height: 18rem;
}
/* Frame fills the section card so the body can scroll under a sticky head. */
#cp-card-designations turbo-frame#user_designations {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#cp-card-designations .cp-designations-head {
justify-content: space-between;
gap: 0.75rem;
flex-shrink: 0;
}
#cp-card-designations .cp-designations-add {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 0.4rem 0.85rem;
font-size: 0.75rem;
line-height: 1.2;
margin-left: auto;
}
#cp-card-designations .cp-designations-head .cp-section-card__title {
flex: 0 1 auto;
min-width: 0;
}
.cp-designations-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.cp-designations-groups {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cp-designations-group__head {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.45rem;
}
.cp-designations-group__title {
margin: 0;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.82);
}
.cp-designations-group__count {
display: inline-flex;
align-items: center;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 650;
line-height: 1.2;
border: 1px solid transparent;
}
.cp-designations-group--default .cp-designations-group__count,
.cp-designations-group--specific .cp-designations-group__count {
color: #7dce9a;
background: rgba(125, 206, 154, 0.14);
border-color: rgba(125, 206, 154, 0.35);
}
.cp-designations-group--upcoming .cp-designations-group__count {
color: #e2c86b;
background: rgba(226, 200, 107, 0.14);
border-color: rgba(226, 200, 107, 0.35);
}
.cp-designations-group--past .cp-designations-group__count {
color: rgba(250, 250, 250, 0.62);
background: rgba(250, 250, 250, 0.08);
border-color: rgba(250, 250, 250, 0.16);
}
.cp-designations-cards {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.cp-designation-card {
position: relative;
display: grid;
/* Left ~2/3 (icon + name/dates), right fixed third for Client. */
grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 33.333%);
align-items: center;
gap: 0.7rem;
min-height: 3.6rem;
padding: 0.65rem 0.85rem 0.65rem 0.85rem;
border-radius: 0.65rem;
border: 1px solid rgba(186, 157, 196, 0.28);
background: rgba(255, 255, 255, 0.08);
color: inherit;
text-decoration: none;
overflow: hidden;
}
a.cp-designation-card:hover,
a.cp-designation-card:focus-visible {
border-color: rgba(226, 200, 107, 0.45);
background: rgba(255, 255, 255, 0.12);
outline: none;
}
.cp-designation-card__accent {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.22rem;
}
.cp-designation-card--default .cp-designation-card__accent,
.cp-designation-card--specific .cp-designation-card__accent {
background: #6ea8ff;
}
.cp-designation-card--upcoming .cp-designation-card__accent {
background: #e2c86b;
}
.cp-designation-card--past .cp-designation-card__accent {
background: rgba(250, 250, 250, 0.28);
}
.cp-designation-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border-radius: 0.45rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(250, 250, 250, 0.9);
}
.cp-designation-card__icon .cp-access-group__icon {
width: 1.15rem;
height: 1.15rem;
}
.cp-designation-card__main {
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: 0;
}
.cp-designation-card__name {
font-size: 0.88rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.95);
}
.cp-designation-card__meta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
color: rgba(250, 250, 250, 0.55);
font-size: 0.72rem;
}
.cp-designation-card__clock {
width: 0.85rem;
height: 0.85rem;
flex-shrink: 0;
}
.cp-designation-card__range {
min-width: 0;
white-space: nowrap;
}
.cp-designation-card__divider {
width: 1px;
align-self: stretch;
background: rgba(186, 157, 196, 0.28);
}
.cp-designation-card__side {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
width: 100%;
}
.cp-designation-card__side-icon {
display: inline-flex;
flex-shrink: 0;
color: rgba(250, 250, 250, 0.45);
}
.cp-designation-card__side-icon .cp-access-group__icon {
width: 0.95rem;
height: 0.95rem;
}
.cp-designation-card__side-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.cp-designation-card__side-label {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.42);
}
.cp-designation-card__side-value {
font-size: 0.78rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.9);
}
.cp-designations-form {
display: flex;
flex-direction: column;
gap: 0.9rem;
max-width: 36rem;
}
.cp-designations-form__field {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.cp-designations-form__field--full {
width: 100%;
}
.cp-designations-form__label {
font-size: 0.72rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.78);
}
.cp-designations-form__locked {
padding: 0.55rem 0.75rem;
border-radius: 0.45rem;
border: 1px solid rgba(186, 157, 196, 0.28);
background: rgba(255, 255, 255, 0.06);
font-size: 0.85rem;
color: rgba(250, 250, 250, 0.88);
}
.cp-designations-combobox {
width: 100%;
}
/* Staff Designation form: shrink-wrap selection chips; designation role ·
discipline stays on one line (dropdown still shows stacked secondary). */
.cp-designations-combobox.combobox--selection-chip .cde-chip--selection {
left: 0.5rem;
right: auto;
width: max-content;
max-width: calc(100% - 2.25rem);
justify-content: flex-start;
gap: 0.25rem;
padding-left: 0.55rem;
padding-right: 0.3rem;
}
.cp-designations-combobox.combobox--selection-chip .cde-chip__label {
flex: 0 1 auto;
}
.cp-designations-combobox .cde-chip--selection-stacked {
min-height: 0;
padding-top: 0;
padding-bottom: 0;
}
.cp-designations-combobox .cde-chip--selection-stacked .cde-chip__label {
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
gap: 0.35rem;
white-space: nowrap;
}
.cp-designations-combobox .cde-chip--selection-stacked .cde-chip__primary,
.cp-designations-combobox .cde-chip--selection-stacked .cde-chip__secondary {
display: inline;
white-space: nowrap;
}
.cp-designations-combobox .cde-chip--selection-stacked .cde-chip__secondary {
font-size: inherit;
font-weight: 500;
line-height: inherit;
color: inherit;
opacity: 0.78;
}
.cp-designations-combobox .cde-chip--selection-stacked .cde-chip__secondary:not(.hidden)::before {
content: "· ";
}
.cp-designations-combobox.combobox--selection-chip.combobox--chip-active:has(
.cde-chip--selection-stacked
)
input[data-combobox-target="input"] {
min-height: 0;
}
.cp-designations-dates {
width: 100%;
}
.cp-designations-form__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
@media (max-width: 820px) {
.cp-designation-card {
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-rows: auto auto;
}
.cp-designation-card__divider {
display: none;
}
.cp-designation-card__side {
grid-column: 3 / 4;
grid-row: 2;
}
}
.cp-user-impersonation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 0.85rem;
margin-top: 1.25rem;
}
.cp-user-impersonation--labeled {
padding-top: 1rem;
border-top: 1px solid rgba(186, 157, 196, 0.28);
}
.cp-user-impersonation__label {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.78);
}
.cp-user-impersonation__btn {
min-width: 14rem;
text-align: center;
}
#cp-user-show #cp-card-activity.cp-section-card--activity {
width: 100%;
}
/* Legacy gold-inset chart strip (staff/other hubs). Project + Client show use .te-glass. */
.cp-atmosphere .entity-show-charts:not(#cp-project-stats):not(#cp-client-stats) {
background: rgba(69, 45, 64, 0.68);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-color: rgba(186, 157, 196, 0.4);
box-shadow:
inset 0 1px 0 rgba(250, 250, 250, 0.14),
inset 0 2px 0 rgba(226, 200, 107, 0.22),
0 12px 30px rgba(0, 0, 0, 0.26);
}
.entity-show-charts {
display: flex;
align-items: flex-end;
flex-shrink: 0;
min-height: 3.5rem;
padding: 0.45rem 1rem 0.4rem;
}
.entity-show-charts .tracker-charts {
width: 100%;
}
/* Project / Client show Tracker cluster: labeled bars need stage height. Tracker cards unchanged. */
#cp-project-stats.entity-show-charts,
#cp-client-stats.entity-show-charts {
min-height: 6.75rem;
align-items: stretch;
padding: 0.85rem 1rem 0.75rem;
overflow: visible;
}
/* Same idea as Tracker .approvals-group:has(.hover-detail): raise this host
while a shared hover-detail / pie tip is open so later section cards cannot
cover the popup. Do not change Tracker page CSS. */
#cp-project-stats:has(.hover-detail:not([hidden])),
#cp-client-stats:has(.hover-detail:not([hidden])) {
position: relative;
z-index: 5;
}
.cp-empty {
@apply relative z-10 mx-auto mt-16 flex max-w-lg flex-col items-center gap-2 rounded-xl border px-8 py-10 text-center;
border-color: rgba(186, 157, 196, 0.28);
background: rgba(45, 29, 44, 0.72);
box-shadow:
0 12px 34px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Project / Client show — tabless scrolling column of section cards */
.cp-project-page {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
.cp-project-header__identity {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.cp-header-client-link {
color: inherit;
text-decoration: none;
}
.cp-header-client-link:hover,
.cp-header-client-link:focus-visible {
color: #e2c86b;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.cp-project-header__badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.cp-header-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.15rem 0.65rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(250, 250, 250, 0.88);
background: rgba(45, 29, 44, 0.72);
border: 1px solid rgba(186, 157, 196, 0.36);
}
.cp-header-badge--status {
color: #e2c86b;
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.45);
}
.cp-rail-status {
display: inline-flex;
flex-shrink: 0;
align-items: center;
border-radius: 999px;
padding: 0.05rem 0.4rem;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #e2c86b;
background: rgba(226, 200, 107, 0.14);
border: 1px solid rgba(226, 200, 107, 0.38);
}
/* Status color is meaning, not decoration: in-progress green, open-to-all
teal (still healthy, distinct from assigned-only Active), paused amber
(wait), completed blue (settled), cancelled muted red (stopped). Labels
stay in the chip so color is not the only cue. */
.cp-header-badge--status.cp-status--active,
.cp-rail-status.cp-status--active {
color: #7dce9a;
background: rgba(125, 206, 154, 0.16);
border-color: rgba(125, 206, 154, 0.45);
}
.cp-header-badge--status.cp-status--active_open,
.cp-rail-status.cp-status--active_open {
color: #6ec8c0;
background: rgba(110, 200, 192, 0.16);
border-color: rgba(110, 200, 192, 0.45);
}
.cp-header-badge--status.cp-status--paused,
.cp-rail-status.cp-status--paused {
color: #e2c86b;
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.45);
}
.cp-header-badge--status.cp-status--completed,
.cp-rail-status.cp-status--completed {
color: #8bb4e8;
background: rgba(139, 180, 232, 0.16);
border-color: rgba(139, 180, 232, 0.45);
}
.cp-header-badge--status.cp-status--cancelled,
.cp-rail-status.cp-status--cancelled {
color: #e08a8a;
background: rgba(224, 138, 138, 0.16);
border-color: rgba(224, 138, 138, 0.45);
}
/* Staff employment status: active reuses project Active green; on leave
amber (temporary pause); terminated muted red (stopped). */
.cp-header-badge--status.cp-status--on_leave {
color: #e2c86b;
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.45);
}
.cp-header-badge--status.cp-status--terminated {
color: #e08a8a;
background: rgba(224, 138, 138, 0.16);
border-color: rgba(224, 138, 138, 0.45);
}
.cp-status-picker {
position: relative;
display: inline-flex;
min-width: 0;
}
.cp-status-picker__trigger {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
color: inherit;
}
.cp-status-picker__trigger.is-open,
.cp-status-picker__trigger:hover {
filter: brightness(1.08);
}
/* Badge is the open cue. Beat shared dropdown trigger fill
(`bg-CDE-surface-hover` on [data-dropdown-target=button].is-open). */
[data-controller~="dropdown"] .cp-status-picker__trigger.is-open,
[data-controller~="dropdown"] .cp-status-picker__trigger[aria-expanded="true"] {
background: transparent;
}
.cp-status-picker__trigger:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 2px;
}
.cp-status-picker__chevron {
width: 0.7rem;
height: 0.7rem;
flex-shrink: 0;
color: rgba(226, 200, 107, 0.78);
}
/* display:flex only when open. Unlayered `display: flex` on the base
would beat Tailwind `.hidden` (@layer utilities) and keep the menu visible.
Hug the badges — never stretch to the Information column / viewport
(portaled `position:fixed` + option `width:100%` was full-bleed). */
.cp-status-picker__menu {
flex-direction: column;
align-items: stretch;
gap: 0.2rem;
width: max-content;
max-width: min(16rem, calc(100vw - 1rem));
padding: 0.35rem;
border-radius: 0.55rem;
border: 1px solid rgba(186, 157, 196, 0.36);
background: #2d1d2c;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
overflow-y: auto;
}
.cp-status-picker__menu:not(.hidden) {
display: flex;
}
.cp-status-picker__option {
display: flex;
align-items: center;
width: auto;
padding: 0.28rem 0.4rem;
border: 0;
border-radius: 0.4rem;
background: transparent;
cursor: pointer;
text-align: left;
}
.cp-status-picker__option:hover,
.cp-status-picker__option.is-current {
background: rgba(250, 250, 250, 0.08);
}
.cp-rail-meta {
display: flex;
min-width: 0;
align-items: center;
gap: 0.35rem;
}
/* PM chips: sentence case, muted — not the uppercase gold status treatment. */
.cp-rail-pm-badge {
display: inline-flex;
min-width: 0;
max-width: 100%;
align-items: baseline;
border-radius: 999px;
padding: 0.08rem 0.45rem 0.1rem;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.25;
text-transform: none;
color: rgba(250, 250, 250, 0.84);
background: rgba(45, 29, 44, 0.55);
border: 1px solid rgba(186, 157, 196, 0.32);
}
.cp-rail-meta .cp-rail-pm-badge {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Shared inset so stats left/right edges match the two-column cards. */
.cp-project-stack {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 1rem;
min-height: 0;
padding: 0.25rem 1rem 1.5rem;
}
/* Flex, not grid: both stacks stretch to the taller column. Access
(`cp-section-card--fill`) absorbs leftover height on the right. */
.cp-project-columns {
display: flex;
flex-direction: row;
flex: 0 1 auto;
align-items: stretch;
gap: 1rem;
min-height: 0;
}
.cp-project-columns__stack {
display: flex;
flex-direction: column;
flex: 1 1 0;
align-items: stretch;
gap: 1rem;
min-width: 0;
min-height: 0;
}
.cp-section-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 1rem 1.1rem 1.05rem;
}
.cp-section-card--fill {
flex: 1 1 auto;
}
@media (max-width: 1100px) {
.cp-project-columns {
flex-direction: column;
}
.cp-section-card--fill {
flex: 0 1 auto;
}
}
.cp-section-card--compact {
padding: 0.7rem 0.9rem 0.75rem;
}
/* Awaiting is short copy + CTA — never grow or scroll. */
.cp-section-card--no-scroll {
flex: 0 0 auto;
overflow: visible;
}
.cp-section-card--no-scroll > .cp-section-card__body {
overflow: visible;
flex: 0 0 auto;
}
.cp-info-group {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(186, 157, 196, 0.18);
}
.cp-info-group .cp-info-list {
margin-top: 0;
}
.cp-section-card__title {
margin: 0;
font-size: 0.95rem;
font-weight: 650;
color: #e2c86b;
}
.cp-section-card > .cp-section-card__title,
.cp-section-card > .cp-section-card__head {
flex-shrink: 0;
}
.cp-section-card__body {
overflow-y: auto;
overscroll-behavior: contain;
min-height: 0;
flex: 1 1 auto;
}
.cp-section-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.cp-section-card__head .cp-section-card__title {
margin: 0;
}
#cp-card-access .cp-section-card__head .cp-section-card__title {
flex: 1 1 auto;
min-width: 0;
}
.cp-section-card__link {
font-size: 0.75rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.82);
}
.cp-info-list {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0.7rem 0 0;
}
.cp-info-list__row {
display: grid;
grid-template-columns: 9.5rem minmax(0, 1fr);
gap: 0.75rem;
font-size: 0.85rem;
}
.cp-info-list__row dt {
margin: 0;
font-weight: 600;
color: rgba(226, 200, 107, 0.78);
}
.cp-info-list__row dd {
margin: 0;
min-width: 0;
color: rgba(250, 250, 250, 0.88);
}
#cp-card-information .cp-info-list__row dd form,
#cp-card-information .cp-info-list__row dd turbo-frame {
display: block;
width: 100%;
min-width: 0;
}
#cp-card-information .cp-info-list__row dd .group {
width: 100%;
min-width: 0;
}
#cp-card-information .cp-info-list__row dd a {
color: inherit;
text-decoration: none;
}
#cp-card-information .cp-info-list__row dd svg {
width: 1rem;
height: 1rem;
color: rgba(226, 200, 107, 0.72);
}
#cp-card-information .cp-info-list__row dd .group:focus-within svg {
display: block;
}
#cp-card-information .cp-info-list__row dd a:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.65);
outline-offset: 2px;
border-radius: 2px;
}
#cp-card-access {
min-height: 0;
overflow: hidden;
}
#cp-card-access .cp-access-groups,
#cp-card-access > .cp-section-card__body {
min-height: 0;
flex: 1 1 auto;
}
#cp-card-access:has(.hover-detail:not([hidden])) {
position: relative;
z-index: 5;
}
#cp-card-access .cp-section-card__head {
gap: 0.55rem;
margin-bottom: 0.5rem;
flex-wrap: nowrap;
}
.cp-switch {
position: relative;
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
color: rgba(250, 250, 250, 0.82);
}
.cp-switch input {
@apply sr-only;
}
.cp-switch__hit {
display: inline-flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
}
.cp-switch input:disabled + .cp-switch__hit {
cursor: default;
}
.cp-switch__track {
display: inline-block;
width: 1.85rem;
height: 1rem;
border-radius: 999px;
background: rgba(45, 29, 44, 0.9);
border: 1px solid rgba(186, 157, 196, 0.42);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}
.cp-switch__track::after {
content: "";
display: block;
width: 0.7rem;
height: 0.7rem;
margin: 0.08rem 0 0 0.1rem;
border-radius: 999px;
background: rgba(250, 250, 250, 0.82);
}
.cp-switch input:checked + .cp-switch__hit .cp-switch__track {
background: rgba(125, 206, 154, 0.38);
border-color: rgba(125, 206, 154, 0.7);
}
.cp-switch input:checked + .cp-switch__hit .cp-switch__track::after {
margin-left: auto;
margin-right: 0.1rem;
}
.cp-switch input:disabled + .cp-switch__hit .cp-switch__track,
.cp-switch input:disabled + .cp-switch__hit .cp-switch__label {
opacity: 0.55;
}
.cp-switch input:focus-visible + .cp-switch__hit .cp-switch__track {
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 2px;
}
.cp-access-add-form {
flex: 0 1 11rem;
min-width: 8rem;
max-width: 14rem;
}
.cp-access-add {
width: 100%;
}
.cp-access-empty {
margin: 0.25rem 0 0;
font-size: 0.8rem;
color: rgba(250, 250, 250, 0.72);
}
.cp-access-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
flex: 1 1 auto;
align-content: start;
min-height: 0;
margin: 0;
padding: 0;
list-style: none;
}
.cp-access-group {
min-width: 0;
padding: 0.38rem 0.42rem 0.5rem;
border-radius: 0.5rem;
border: 1px solid rgba(186, 157, 196, 0.2);
/* Same lift as User designations `.cp-designation-card` (lighter, not darker). */
background: rgba(255, 255, 255, 0.08);
overflow: visible;
}
.cp-access-group__head {
display: flex;
align-items: center;
gap: 0.28rem;
min-width: 0;
margin-bottom: 0.32rem;
}
.cp-access-group__icon {
flex-shrink: 0;
width: 1.05rem;
height: 1.05rem;
color: rgba(226, 200, 107, 0.78);
}
/* Match Open-to-all toggle label (.cp-switch is 0.72rem / 600). */
.cp-access-group__name {
flex: 1 1 auto;
min-width: 0;
font-size: 0.72rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.82);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-access-group__count {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.32rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.78);
background: rgba(45, 29, 44, 0.72);
border: 1px solid rgba(186, 157, 196, 0.28);
}
.cp-access-group__avatars {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0.1rem 0.15rem 0.2rem 0;
list-style: none;
overflow: visible;
}
.cp-access-person {
position: relative;
flex: 0 0 auto;
overflow: visible;
}
/* Anchored to the person host so it paints over the circle, not clipped by
`.user-avatar-placeholder { overflow: hidden }`. */
.cp-access-hours {
position: absolute;
right: -0.3rem;
bottom: -0.28rem;
z-index: 2;
min-width: 1.15rem;
padding: 0.08rem 0.28rem;
border-radius: 999px;
font-size: 0.58rem;
font-weight: 700;
line-height: 1.15;
color: #fafafa;
background: rgba(45, 29, 44, 0.96);
border: 1px solid rgba(226, 200, 107, 0.62);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
/* Shared hover chrome for remove (X) and re-add (+) on Access avatars. */
.cp-access-action-form {
position: absolute;
top: -0.28rem;
right: -0.28rem;
z-index: 3;
margin: 0;
opacity: 0;
pointer-events: none;
}
.cp-access-person:hover .cp-access-action-form,
.cp-access-person:focus-within .cp-access-action-form {
opacity: 1;
pointer-events: auto;
}
.cp-access-action {
display: grid;
place-items: center;
width: 1rem;
height: 1rem;
padding: 0;
border-radius: 999px;
}
.cp-access-action:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 1px;
}
.cp-access-action svg {
width: 0.55rem;
height: 0.55rem;
}
.cp-access-remove {
color: #f3c0c0;
background: rgba(90, 28, 32, 0.92);
border: 1px solid rgba(224, 138, 138, 0.7);
}
.cp-access-add {
color: #c8ecd4;
background: rgba(24, 72, 48, 0.94);
border: 1px solid rgba(110, 186, 138, 0.72);
}
.cp-initials {
position: relative;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
color: #e2c86b;
cursor: default;
overflow: hidden;
background:
radial-gradient(circle at 32% 28%, rgba(250, 250, 250, 0.16), transparent 58%),
#3b2939;
box-shadow:
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.cp-initials .user-avatar-placeholder__initials {
font-size: 0.7rem;
letter-spacing: 0.03em;
}
.cp-initials__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
/* Ghost = submitted hours, not on HABTM. Dashed ring + soft opacity
(chip only — hours badge / +/- stay full strength as siblings). */
.cp-initials--ghost {
color: rgba(198, 176, 206, 0.78);
background:
radial-gradient(circle at 32% 28%, rgba(250, 250, 250, 0.05), transparent 58%),
#231820;
border: 1.5px dashed rgba(186, 157, 196, 0.62);
box-shadow:
inset 0 1px 0 rgba(250, 250, 250, 0.05);
opacity: 0.72;
}
.cp-initials--ghost .user-avatar-placeholder__bust {
opacity: 0.18;
}
.cp-initials--ghost .cp-initials__img {
opacity: 0.78;
}
.cp-initials:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 1px;
}
@media (max-width: 1100px) {
.cp-access-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phone / narrow viewport on Project show — same Access head order as the
Tracker panel. Wide project show keeps title | toggle | Add staff. */
@media (max-width: 640px) {
#cp-card-access .cp-section-card__head {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 0.45rem;
}
#cp-card-access .cp-section-card__head .cp-section-card__title {
order: 1;
flex: 0 0 auto;
}
#cp-card-access .cp-access-add-form {
order: 2;
flex: 1 1 auto;
max-width: none;
width: 100%;
}
#cp-card-access .cp-switch {
order: 3;
align-self: flex-start;
}
.cp-access-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cp-info-list__row {
grid-template-columns: 6.75rem minmax(0, 1fr);
gap: 0.45rem;
}
}
/* Viewport fits ~3 rows; infinite-scroll loads 10 then +15 inside the panel. */
#cp-card-activity.cp-section-card--activity {
--cp-activity-head-h: 1.55rem;
--cp-activity-row-h: 1.85rem;
flex: 0 0 auto;
}
#cp-card-activity.cp-section-card--activity > .cp-activity-panel {
flex: 0 1 auto;
max-height: calc(
var(--cp-activity-head-h) +
(3 * var(--cp-activity-row-h))
);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 0 0 0.55rem;
border-radius: 0.55rem;
background: #2d1d2c;
}
.cp-activity-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.cp-activity-table th {
position: sticky;
top: 0;
z-index: 1;
padding: 0.35rem 0.4rem 0.4rem 0;
text-align: left;
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.72);
border-bottom: 1px solid rgba(186, 157, 196, 0.28);
background: #2d1d2c;
}
.cp-activity-table td {
padding: 0.4rem 0.4rem 0.4rem 0;
color: rgba(250, 250, 250, 0.86);
border-bottom: 1px solid rgba(186, 157, 196, 0.12);
}
.cp-activity-table td:last-child {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Clickable TE rows → turbo-frame-link (modal today; panel frame later). */
.cp-activity-table tr.cp-activity-row {
cursor: pointer;
}
.cp-activity-table tr.cp-activity-row:hover td,
.cp-activity-table tr.cp-activity-row:focus-visible td {
background: rgba(215, 179, 51, 0.08);
}
.cp-activity-table tr.cp-activity-row:focus-visible {
outline: none;
}
.cp-activity-table tr.cp-activity-row:focus-visible td:first-child {
box-shadow: inset 2px 0 0 #d7b333;
}
.cp-activity-empty {
text-align: left !important;
color: rgba(250, 250, 250, 0.62);
}
.cp-activity-scroll-sentinel td {
padding: 0;
border-bottom: 0;
height: 0;
line-height: 0;
}
.cp-activity-scroll-sentinel__probe {
display: block;
width: 1px;
height: 1px;
}
.cp-activity-scroll-status {
margin: 0.35rem 0 0;
font-size: 0.72rem;
color: rgba(250, 250, 250, 0.62);
}
/* Client show — side cards sized by Projects stats content; Information
matches that height and scrolls inside. Projects table fills leftover
viewport; its panel owns the page scrollbar. */
#cp-client-show.cp-project-page {
height: 100%;
max-height: 100%;
/* Prefer scrolling inside Projects / Information; page scrolls only if
charts + stats + table floor cannot fit. */
overflow-x: hidden;
overflow-y: auto;
}
#cp-client-show .cp-project-stack {
flex: 1 1 auto;
min-height: 0;
/* Breathing room under the Projects card vs viewport edge. */
padding-bottom: 2.5rem;
}
#cp-client-show #cp-client-stats {
flex: 0 0 auto;
}
/* Stats (in flow) sets the row height. Information is positioned to match
that height so its taller field list scrolls inside the card body. */
#cp-client-show .cp-project-columns {
position: relative;
display: block;
flex: 0 0 auto;
min-height: 0;
}
#cp-client-show .cp-project-columns__stack:has(#cp-card-projects-stats) {
width: calc(50% - 0.5rem);
margin-left: auto;
min-height: auto;
}
#cp-client-show .cp-project-columns__stack:has(#cp-card-information) {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: calc(50% - 0.5rem);
min-height: 0;
display: flex;
flex-direction: column;
}
#cp-client-show #cp-card-projects-stats {
flex: 0 0 auto;
height: auto;
min-height: 0;
}
#cp-client-show #cp-card-information {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
#cp-client-show #cp-card-information > .cp-section-card__body {
overflow-y: auto;
overscroll-behavior: contain;
}
#cp-client-show #cp-card-projects-table {
/* Fill leftover viewport under charts + side cards; panel scrolls.
Override .cp-section-card overflow:hidden so the Tracker-like
ring/radius is not clipped by the glass shell. */
flex: 1 1 auto;
min-height: 16.5rem;
overflow: visible;
}
/* Tracker-like table shell: rounded ring, left inset, zebra rows.
Scroll lives on the panel (sticky thead still works). */
#cp-client-show #cp-card-projects-table > .cp-client-projects-panel {
--cp-projects-table-radius: 0.75rem;
--cp-projects-table-border: rgba(186, 157, 196, 0.26);
--cp-projects-table-header-fill: #3a2438;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0 0 0.4rem;
border-radius: var(--cp-projects-table-radius);
background:
linear-gradient(
var(--cp-projects-table-header-fill),
var(--cp-projects-table-header-fill)
)
top / 100% 2.4rem no-repeat,
rgba(53, 35, 51, 0.92);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px var(--cp-projects-table-border);
}
#cp-client-show .cp-client-projects-table {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
#cp-client-show .cp-client-projects-table th,
#cp-client-show .cp-client-projects-table td {
padding: 0.45rem 0.55rem 0.45rem 0.85rem;
border-bottom: 0;
}
#cp-client-show .cp-client-projects-table td {
position: relative;
border-top: 1px solid rgba(250, 250, 250, 0.08);
vertical-align: middle;
overflow: hidden;
}
#cp-client-show .cp-client-projects-table th {
background-color: var(--cp-projects-table-header-fill);
box-shadow: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#cp-client-show .cp-client-projects-table thead th:first-child {
border-top-left-radius: var(--cp-projects-table-radius);
}
#cp-client-show .cp-client-projects-table thead th:last-child {
border-top-right-radius: var(--cp-projects-table-radius);
}
#cp-client-show .cp-client-projects-table td:last-child {
text-align: left;
}
#cp-client-show .cp-client-projects-table tbody tr.cp-client-project-row:nth-child(odd) td {
background: rgba(72, 48, 70, 0.28);
}
#cp-client-show .cp-client-projects-table tbody tr.cp-client-project-row:nth-child(even) td {
background: rgba(53, 35, 51, 0.12);
}
#cp-client-show .cp-client-projects-table tbody tr.cp-client-project-row:hover td {
background: rgba(250, 250, 250, 0.06);
overflow: visible;
}
/*
* Column widths — Name takes remaining space (min-width so truncate/hover
* still shows text). Fixed rem columns must leave room: with table-layout
* fixed + a narrow main column, 18% alone collapsed Name to ~1ch.
* Start stays wider for "Jan 15, 2026".
*/
#cp-client-show .cp-client-col--name,
#cp-client-show .cp-client-cell--name {
width: auto;
min-width: 12rem;
}
#cp-client-show .cp-client-col--status,
#cp-client-show .cp-client-cell--status {
width: 6.5rem;
}
#cp-client-show .cp-client-col--client-pm,
#cp-client-show .cp-client-cell--client-pm,
#cp-client-show .cp-client-col--cde-pm,
#cp-client-show .cp-client-cell--cde-pm {
width: 7.75rem;
}
#cp-client-show .cp-client-col--budget,
#cp-client-show .cp-client-cell--budget,
#cp-client-show .cp-client-col--remaining,
#cp-client-show .cp-client-cell--remaining {
width: 5.75rem;
}
#cp-client-show .cp-client-col--hours,
#cp-client-show .cp-client-cell--hours {
width: 5.5rem;
}
#cp-client-show .cp-client-col--start,
#cp-client-show .cp-client-cell--start {
width: 8.25rem;
}
#cp-client-show .cp-client-col--est,
#cp-client-show .cp-client-cell--est {
width: 7rem;
}
/* Single-line truncate + Tracker-style in-place hover expand. */
#cp-client-show .cp-client-cell__text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
}
#cp-client-show .cp-client-cell--status .cp-header-badge {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Hover expand: full text overlays the truncated cell in-place (same idea as
* Tracker .approvals-cell:hover .approvals-cell__text) — not a floating tip.
*/
#cp-client-show .cp-client-cell:hover .cp-client-cell__text {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: max-content;
max-width: min(28rem, 70vw);
padding: 0.45rem 0.55rem 0.45rem 0.85rem;
overflow: visible;
white-space: nowrap;
text-overflow: clip;
color: inherit;
background-color: #3a2438;
border-radius: 0.35rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#cp-client-show .cp-client-cell--status:hover .cp-client-cell__text,
#cp-client-show .cp-client-cell--budget:hover .cp-client-cell__text,
#cp-client-show .cp-client-cell--remaining:hover .cp-client-cell__text,
#cp-client-show .cp-client-cell--hours:hover .cp-client-cell__text,
#cp-client-show .cp-client-cell--start:hover .cp-client-cell__text,
#cp-client-show .cp-client-cell--est:hover .cp-client-cell__text {
/* Short / fixed columns rarely need expand; keep nowrap without overlay. */
position: static;
width: auto;
max-width: none;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
@media (max-width: 1100px) {
#cp-client-show .cp-project-columns {
display: flex;
flex-direction: column;
gap: 1rem;
}
#cp-client-show .cp-project-columns__stack:has(#cp-card-information),
#cp-client-show .cp-project-columns__stack:has(#cp-card-projects-stats) {
/* Leave absolute side-by-side mode; size to content so cards do not
collapse under each other (flex-basis 0 + min-height 0 overlap). */
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
margin-left: 0;
flex: 0 0 auto;
min-height: auto;
}
/* Stacked: cap Information at typical stats-content height; it scrolls. */
#cp-client-show #cp-card-information {
flex: 0 1 auto;
max-height: 19.5rem;
}
}
#cp-card-projects-stats:has(.hover-detail:not([hidden])) {
position: relative;
z-index: 5;
}
.cp-client-projects-stats {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: stretch;
}
.cp-client-projects-stats__label {
margin: 0 0 0.4rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.72);
}
.cp-client-status-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.cp-client-status-chips .cp-header-badge {
cursor: default;
}
.cp-client-top-active {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cp-client-top-active li {
display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr) auto;
gap: 0.45rem;
align-items: baseline;
font-size: 0.82rem;
color: rgba(250, 250, 250, 0.88);
}
.cp-client-top-active__rank {
color: rgba(226, 200, 107, 0.78);
font-weight: 600;
}
.cp-client-top-active__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp-client-top-active__hours {
color: rgba(250, 250, 250, 0.62);
font-variant-numeric: tabular-nums;
}
.cp-client-avg-hours {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.cp-client-avg-hours__value {
font-size: 1.35rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.92);
font-variant-numeric: tabular-nums;
}
.cp-client-avg-hours__unit {
font-size: 0.82rem;
color: rgba(250, 250, 250, 0.62);
}
.cp-client-avg-hours__caption {
margin: 0.25rem 0 0;
font-size: 0.72rem;
color: rgba(250, 250, 250, 0.55);
}
.cp-client-projects-panel {
overflow: auto;
}
.cp-client-projects-table {
min-width: 58rem;
}
.cp-client-sort-btn {
display: inline-flex;
align-items: center;
gap: 0.2rem;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-decoration: none;
cursor: pointer;
}
.cp-client-sort-btn.is-active,
.cp-client-sort-btn:hover,
.cp-client-sort-btn:focus-visible {
color: #e2c86b;
}
.cp-client-sort-btn__mark {
font-size: 0.85em;
line-height: 1;
}
.cp-client-project-link {
color: inherit;
text-decoration: none;
font-weight: 600;
}
.cp-client-project-link:hover,
.cp-client-project-link:focus-visible {
color: #e2c86b;
}
.cp-client-projects-stats__empty {
margin: 0;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.55);
}
.cp-client-top-active__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
text-decoration: none;
font-weight: 500;
}
.cp-client-top-active__name:hover,
.cp-client-top-active__name:focus-visible {
color: #e2c86b;
}
.cp-info-notes__title {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.78);
}
.cp-info-notes__body {
margin-top: 0.45rem;
min-width: 0;
}
.cp-info-notes__value {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(250, 250, 250, 0.88);
}
#cp-card-information .cp-info-notes__body form,
#cp-card-information .cp-info-notes__body turbo-frame {
display: block;
width: 100%;
min-width: 0;
}
#cp-card-information .cp-info-notes__body .group {
width: 100%;
min-width: 0;
align-items: flex-start;
}
#cp-card-information .cp-info-notes__body a {
color: inherit;
text-decoration: none;
}
#cp-card-information .cp-info-notes__body textarea {
width: 100%;
min-height: 7rem;
}
.cp-awaiting-copy {
margin: 0;
font-size: 0.8rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.78);
}
.cp-section-card__head .cp-review-btn {
flex-shrink: 0;
margin-top: 0;
align-self: center;
padding: 0.28rem 0.7rem;
font-size: 0.75rem;
line-height: 1.2;
}
.cp-review-btn {
padding: 0.28rem 0.7rem;
font-size: 0.75rem;
line-height: 1.2;
}
/* Shared hub glass panels (Staff + CP) — TE-adjacent, not TE-local class reuse */
.staff-atmosphere [id^="panel-"][id$="-container"],
.cp-atmosphere [id^="panel-"][id$="-container"],
.staff-atmosphere .hub-glass-panel,
.cp-atmosphere .hub-glass-panel {
position: relative;
isolation: isolate;
border: 1px solid rgba(186, 157, 196, 0.36);
background: rgba(45, 29, 44, 0.78);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(250, 250, 250, 0.06),
inset 0 1px 0 rgba(250, 250, 250, 0.16);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.staff-atmosphere [id^="panel-"][id$="-container"]::before,
.cp-atmosphere [id^="panel-"][id$="-container"]::before,
.staff-atmosphere .hub-glass-panel::before,
.cp-atmosphere .hub-glass-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.1), transparent 42%);
z-index: 0;
}
.staff-atmosphere [id^="panel-"][id$="-container"] > *,
.cp-atmosphere [id^="panel-"][id$="-container"] > *,
.staff-atmosphere .hub-glass-panel > *,
.cp-atmosphere .hub-glass-panel > * {
position: relative;
z-index: 1;
}
.staff-atmosphere #tabs-list .tab,
.cp-atmosphere #tabs-list .tab {
background: rgba(53, 35, 51, 0.72);
border: 1px solid rgba(186, 157, 196, 0.18);
border-bottom: none;
}
.staff-atmosphere #tabs-list .tab.active-tab,
.cp-atmosphere #tabs-list .tab.active-tab {
background: rgba(45, 29, 44, 0.88);
border-color: rgba(215, 179, 51, 0.35);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.staff-atmosphere #tabs-list .tab.active-tab::after,
.cp-atmosphere #tabs-list .tab.active-tab::after {
background: #E2C86B;
height: 3px;
bottom: -1px;
}
.staff-atmosphere .sidebar-item .text-sm,
.cp-atmosphere .sidebar-item .text-sm {
@apply text-CDE-text-secondary;
}
.login-shell {
background:
radial-gradient(circle at 22% 78%, rgba(114, 81, 131, 0.4), transparent 30rem),
radial-gradient(circle at 78% 16%, rgba(99, 64, 92, 0.5), transparent 34rem),
linear-gradient(135deg, #2b172b 0%, #4A3045 48%, #2a172a 100%);
}
.login-shell::before,
.login-shell::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
}
.login-shell::before {
opacity: 0.22;
background-image:
linear-gradient(90deg, rgba(250, 250, 250, 0.16) 1px, transparent 1px),
linear-gradient(rgba(250, 250, 250, 0.16) 1px, transparent 1px),
radial-gradient(circle at 20% 10%, rgba(250, 250, 250, 0.7) 1px, transparent 2px),
radial-gradient(circle at 86% 14%, rgba(250, 250, 250, 0.7) 1px, transparent 2px);
background-size: 18rem 18rem, 18rem 18rem, 13rem 13rem, 10rem 10rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.95), rgba(0,0,0,0.25) 36%, rgba(0,0,0,0.25) 64%, rgba(0,0,0,0.95));
}
.login-shell::after {
opacity: 0.26;
background:
linear-gradient(16deg, transparent 0 21%, rgba(250, 250, 250, 0.18) 21.1% 21.35%, transparent 21.45% 100%),
linear-gradient(126deg, transparent 0 72%, rgba(250, 250, 250, 0.16) 72.1% 72.35%, transparent 72.45% 100%),
repeating-linear-gradient(90deg, transparent 0 5.75rem, rgba(250, 250, 250, 0.09) 5.8rem 5.86rem, transparent 5.92rem 11rem);
box-shadow:
inset 5rem 0 8rem rgba(0, 0, 0, 0.16),
inset -5rem 0 8rem rgba(0, 0, 0, 0.16);
}
.login-brand-link {
@apply relative inline-flex rounded-lg;
isolation: isolate;
}
.login-brand-link::before {
content: "";
position: absolute;
inset: -3rem -5.5rem -3.4rem -5.5rem;
z-index: -1;
border-radius: 999px;
background: radial-gradient(ellipse at 38% 34%, rgba(250, 250, 250, 0.15), rgba(190, 157, 199, 0.2) 34%, rgba(190, 157, 199, 0.08) 64%, transparent 82%);
filter: blur(36px);
opacity: 0.78;
}
.login-brand-logo {
@apply h-9 w-auto sm:h-10 lg:h-11;
filter:
drop-shadow(0 0 12px rgba(190, 157, 199, 0.18))
drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
.login-panel {
@apply relative mx-auto w-full max-w-4xl rounded-xl border border-CDE-purple-light/40 p-4 shadow-deep sm:p-5;
background: rgba(69, 45, 64, 0.74);
box-shadow:
0 18px 70px rgba(0, 0, 0, 0.48),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
backdrop-filter: blur(18px);
}
.login-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.08), transparent 38%);
}
.login-environment-bar {
@apply relative z-10 mb-4 grid gap-3 rounded-lg border border-CDE-purple-light/30 px-4 py-3 sm:grid-cols-[1fr_auto] sm:items-center sm:px-5;
background: rgba(69, 45, 64, 0.58);
}
.login-card {
@apply relative z-10 rounded-lg border border-CDE-purple-light/30 p-5;
background: rgba(43, 23, 43, 0.34);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.05);
}
.login-section-kicker {
@apply mb-3 h-1 w-9 rounded-full bg-CDE-yellow-logo;
}
.login-field {
@apply block w-full rounded-md border border-CDE-purple-light/40 bg-CDE-purple-darker-tone-2/70 px-4 py-2 text-sm text-CDE-off-white placeholder:text-CDE-purple-lighter-tone-3 shadow-md-inner focus:border-CDE-yellow-logo focus:ring-2 focus:ring-CDE-yellow-logo/40;
}
.login-submit {
@apply flex w-full items-center justify-center gap-2 rounded-md border border-CDE-yellow-light bg-CDE-yellow-logo px-4 py-2.5 text-sm font-bold text-CDE-purple-dark shadow-md transition-colors duration-150 hover:bg-CDE-yellow-dark focus:outline-none focus:ring-2 focus:ring-CDE-yellow-logo focus:ring-offset-2 focus:ring-offset-CDE-purple-dark hover:cursor-pointer;
}
.login-microsoft-button {
@apply flex w-full items-center gap-5 rounded-md border border-CDE-purple-light/70 bg-CDE-purple-darker-tone-2/55 px-5 py-3 text-sm font-bold text-CDE-off-white transition-colors duration-150 hover:border-CDE-yellow-logo hover:bg-CDE-purple-darker-tone-1 focus:outline-none focus:ring-2 focus:ring-CDE-yellow-logo focus:ring-offset-2 focus:ring-offset-CDE-purple-dark;
}
/* Login: radios use HTML form= (#new_session / #forgot_password); :has() shows the
matching Entra button, helper sentence, and Forgot/Back twin links. No Stimulus. */
.login-entra-inactive {
display: none;
}
.login-context-toggle {
@apply flex overflow-hidden rounded-md border border-CDE-purple-light/50;
}
.login-context-option {
@apply relative flex-1 cursor-pointer px-6 py-2.5 text-center text-xs text-CDE-gray-light transition-colors duration-150 sm:min-w-36;
}
.login-context-option span {
@apply font-medium;
}
.login-context-option input {
@apply sr-only;
}
.login-context-option:has(input:checked) {
@apply bg-CDE-yellow-logo text-CDE-purple-dark shadow-md-inner;
}
.login-context-option:focus-within {
@apply ring-2 ring-inset ring-CDE-yellow-logo;
}
.login-context-option-disabled {
@apply opacity-50 cursor-not-allowed;
}
.login-data-context:has(#login-data-context-production:checked) .login-entra-sandbox,
.login-data-context:has(#login-data-context-sandbox:checked) .login-entra-production,
.login-data-context:has(#login-data-context-production:checked) .login-forgot-sandbox,
.login-data-context:has(#login-data-context-sandbox:checked) .login-forgot-production,
.login-data-context:has(#login-data-context-production:checked) .login-back-sandbox,
.login-data-context:has(#login-data-context-sandbox:checked) .login-back-production,
.login-data-context:has(#login-data-context-production:checked) .login-context-help-sandbox,
.login-data-context:has(#login-data-context-sandbox:checked) .login-context-help-production {
display: none;
}
.login-data-context:has(#login-data-context-sandbox:checked) .login-entra-sandbox,
.login-data-context:has(#login-data-context-production:checked) .login-entra-production,
.login-data-context:has(#login-data-context-sandbox:checked) .login-forgot-sandbox,
.login-data-context:has(#login-data-context-production:checked) .login-forgot-production,
.login-data-context:has(#login-data-context-sandbox:checked) .login-back-sandbox,
.login-data-context:has(#login-data-context-production:checked) .login-back-production {
display: block;
}
/* Timesheet UX Phase 3 — staff TE chrome. Tracker centre (`#approvals-center`)
reuses `.te-shell` for the same dark lined atmosphere; the Tracker rail does
not. Do not restyle global .btn-primary. */
.te-shell {
isolation: isolate;
background:
radial-gradient(circle at 16% 84%, rgba(114, 81, 131, 0.38), transparent 28rem),
radial-gradient(circle at 86% 10%, rgba(99, 64, 92, 0.46), transparent 32rem),
linear-gradient(148deg, #211521 0%, #3a2438 48%, #271927 100%);
}
.te-shell::before,
.te-shell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.te-shell::before {
opacity: 0.2;
background-image:
linear-gradient(90deg, rgba(250, 250, 250, 0.14) 1px, transparent 1px),
linear-gradient(rgba(250, 250, 250, 0.14) 1px, transparent 1px),
radial-gradient(circle at 18% 12%, rgba(250, 250, 250, 0.65) 1px, transparent 2px),
radial-gradient(circle at 78% 22%, rgba(250, 250, 250, 0.55) 1px, transparent 2px);
background-size: 14rem 14rem, 14rem 14rem, 11rem 11rem, 9rem 9rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.22) 34%, rgba(0,0,0,0.22) 66%, rgba(0,0,0,0.9));
}
.te-shell::after {
opacity: 0.22;
background:
linear-gradient(22deg, transparent 0 27%, rgba(250, 250, 250, 0.16) 27.1% 27.32%, transparent 27.4% 100%),
linear-gradient(118deg, transparent 0 63%, rgba(250, 250, 250, 0.14) 63.1% 63.32%, transparent 63.42% 100%),
repeating-linear-gradient(90deg, transparent 0 7.25rem, rgba(250, 250, 250, 0.08) 7.3rem 7.36rem, transparent 7.42rem 13rem);
box-shadow:
inset 4rem 0 7rem rgba(0, 0, 0, 0.18),
inset -4rem 0 7rem rgba(0, 0, 0, 0.18);
}
/* Shared glass card chrome (My Time panels + Clients/Projects/Staff section
cards). Clearer fill so atmosphere lines ghost through; blur on ::before
(not the host) so Tracker position:fixed hover tips are not trapped. */
.te-glass {
@apply relative rounded-xl border;
isolation: isolate;
border-color: rgba(186, 157, 196, 0.36);
background: rgba(45, 29, 44, 0.68);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(250, 250, 250, 0.06),
inset 0 1px 0 rgba(250, 250, 250, 0.16);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.te-glass::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.1), transparent 42%);
backdrop-filter: blur(14px) saturate(1.06);
-webkit-backdrop-filter: blur(14px) saturate(1.06);
z-index: 0;
}
.te-glass > * {
position: relative;
z-index: 1;
}
.te-btn-accent {
@apply inline-flex items-center justify-center gap-2 rounded-md bg-CDE-accent px-4 py-2.5 text-sm font-semibold text-CDE-purple-dark shadow-surface transition-colors duration-150 hover:bg-CDE-accent-hover hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-CDE-accent/70 focus:ring-offset-2 focus:ring-offset-CDE-surface;
}
.te-btn-secondary {
@apply inline-flex items-center justify-center gap-2 rounded-md border border-CDE-border-strong bg-transparent px-4 py-2.5 text-sm font-semibold text-CDE-text-primary transition-colors duration-150 hover:border-CDE-accent hover:bg-CDE-surface-hover hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-CDE-accent/40 focus:ring-offset-2 focus:ring-offset-CDE-surface;
}
/* Filled Save changes — same CDE-blue-light as the dirty-field ring so the
primary save action reads as the resolve for unsaved edits. */
.te-btn-secondary-filled {
@apply inline-flex items-center justify-center gap-2 rounded-md border border-CDE-blue-light bg-CDE-blue-light px-4 py-2.5 text-sm font-semibold text-white transition-colors duration-150 hover:border-CDE-blue hover:bg-CDE-blue hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-CDE-blue-light/70 focus:ring-offset-2 focus:ring-offset-CDE-surface;
}
.te-btn-secondary.magic-wand {
background-position: 1.1rem 50%;
padding-left: 2.75rem;
}
#page-sidebar .input-field,
#te-main-stack .input-field {
@apply w-full rounded-md border border-CDE-border-default bg-CDE-surface-interactive py-1.5 px-3 text-sm text-CDE-text-primary placeholder:text-CDE-text-muted shadow-soft-inner hover:bg-CDE-surface-hover focus:border-CDE-focus focus:ring-1 focus:ring-CDE-focus;
}
#page-sidebar label {
@apply mb-1 block text-xs font-medium text-CDE-text-secondary;
}
.te-status-pill {
@apply inline-flex shrink-0 items-center rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize;
}
.te-status-pill--unsubmitted {
@apply bg-CDE-accent-surface text-CDE-accent;
}
.te-status-pill--submitted {
@apply bg-CDE-success/15 text-CDE-success;
}
.te-status-pill--approved {
@apply bg-CDE-info/15 text-CDE-info;
}
.te-status-pill--locked {
@apply bg-CDE-surface-hover text-CDE-text-muted;
}
/* Entry/expense rows nested inside `.te-glass` — same border/outline family
as section cards, slightly denser fill so fields stay readable.
Left accent is an inset box-shadow (Tracker group-card pattern) so it
follows the card radius instead of a square child bar that squares off. */
.te-entry-card {
@apply relative flex w-full items-stretch overflow-visible rounded-lg border;
--te-entry-accent: transparent;
isolation: isolate;
border-color: rgba(186, 157, 196, 0.36);
background: rgba(45, 29, 44, 0.78);
box-shadow:
inset 0.25rem 0 0 var(--te-entry-accent),
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(250, 250, 250, 0.06),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.te-entry-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.08), transparent 48%);
z-index: 0;
}
.te-entry-card > * {
position: relative;
z-index: 1;
}
.te-entry-body {
@apply flex min-w-0 flex-1 flex-nowrap items-center gap-x-3 gap-y-1 px-3 py-1.5;
}
/* Submitted / approved / locked day rows — headed table (not editable cards). */
.te-day-table-wrap {
overflow-x: auto;
border-radius: 0.65rem;
border: 1px solid rgba(186, 157, 196, 0.36);
background: rgba(45, 29, 44, 0.62);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(250, 250, 250, 0.08);
}
.te-day-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.te-day-table th {
padding: 0.55rem 0.75rem;
text-align: left;
font-size: 0.7rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.72);
background: rgba(58, 36, 56, 0.96);
border-bottom: 1px solid rgba(186, 157, 196, 0.28);
white-space: nowrap;
}
.te-day-table td {
padding: 0.6rem 0.75rem;
vertical-align: middle;
font-size: 0.875rem;
color: #fafafa;
border-bottom: 1px solid rgba(186, 157, 196, 0.16);
}
/* Same client/expense accent strip as editable cards (inset on first cell).
Default transparent, then accent classes MUST follow so they win cascade. */
.te-day-table__row {
--te-entry-accent: transparent;
}
.te-entry-card--accent-info {
--te-entry-accent: rgba(95, 167, 232, 0.92);
}
.te-entry-card--accent-success {
--te-entry-accent: rgba(127, 203, 139, 0.92);
}
.te-entry-card--accent-accent {
--te-entry-accent: rgba(226, 200, 107, 0.92);
}
.te-entry-card--accent-plum {
--te-entry-accent: rgba(144, 124, 159, 0.92);
}
.te-day-table th:first-child,
.te-day-table__row > td:first-child {
padding-left: 0.95rem;
}
.te-day-table__row > td:first-child {
box-shadow: inset 0.25rem 0 0 var(--te-entry-accent);
}
.te-day-table tbody tr:last-child td {
border-bottom: 0;
}
.te-day-table tbody tr:nth-child(even) td {
background: rgba(250, 250, 250, 0.025);
}
.te-day-table tbody tr:hover td {
background: rgba(250, 250, 250, 0.05);
}
.te-day-table__col--hours,
.te-day-table__col--amount,
.te-day-table__hours,
.te-day-table__amount {
width: 5.5rem;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.te-day-table__col--status,
.te-day-table__status {
width: 7.5rem;
}
.te-day-table__col--actions,
.te-day-table__actions {
width: 2.75rem;
text-align: center;
}
.te-day-table__project {
width: 28%;
}
.te-day-table__activity {
width: 18%;
}
.te-day-table__comment {
width: auto;
}
.te-entry-project {
@apply min-w-0 flex-[1.4_1_12rem];
}
.te-entry-activity {
@apply w-36 min-w-0 shrink;
}
.te-entry-hours {
@apply w-[5.75rem] shrink-0;
}
.te-entry-comment {
@apply min-w-0 flex-1;
}
.te-entry-actions {
@apply ml-auto flex shrink-0 items-center gap-1;
}
.te-entry-label {
@apply mb-0.5 text-xs font-medium text-CDE-text-secondary;
}
.te-entry-project-name {
@apply truncate text-sm font-semibold leading-tight text-CDE-text-primary;
}
.te-entry-project-sub {
@apply mt-0 truncate text-xs leading-tight text-CDE-text-secondary;
}
.te-entry-project .input-field,
.te-project-combobox .te-combobox-input {
margin-top: 0;
}
.te-combobox-input {
@apply w-full truncate py-1 pr-8 text-sm;
}
/* Shared combobox drop affordance — docs/combobox.md */
.combobox-toggle {
@apply absolute right-1 top-1/2 z-[1] inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-CDE-text-muted hover:bg-CDE-surface-hover hover:text-CDE-text-primary;
}
/* Inline chip field chrome — docs/chips.md, docs/combobox.md */
.combobox-chip-input {
@apply w-full rounded-lg bg-CDE-purple-darker-tone-2 text-CDE-off-white transition-colors duration-150 hover:bg-CDE-purple-darker-tone-1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.45rem 0.35rem 0.65rem;
}
.combobox-chip-input:focus-within {
@apply ring-2 ring-CDE-blue-light;
}
.combobox-chip-input--search {
padding-left: 0.5rem;
}
.combobox-search-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
color: rgba(250, 250, 250, 0.45);
pointer-events: none;
}
/* Progressive Enter affordance for listless inline-chip fields (CP rail).
Visible only while there is pending typed text that is not already a chip.
`[hidden]` must beat `inline-flex` or the cue stays visible when idle. */
.combobox-chip-commit {
@apply absolute right-1 top-1/2 z-[1] inline-flex -translate-y-1/2 items-center justify-center rounded;
gap: 0.2rem;
padding: 0.12rem 0.35rem 0.12rem 0.28rem;
color: rgba(250, 250, 250, 0.55);
background: rgba(250, 250, 250, 0.06);
border: 1px solid rgba(250, 250, 250, 0.14);
}
.combobox-chip-commit[hidden] {
display: none;
}
.combobox-chip-commit:hover {
color: rgba(250, 250, 250, 0.9);
background: rgba(250, 250, 250, 0.1);
border-color: rgba(250, 250, 250, 0.22);
}
.combobox-chip-commit__icon {
display: block;
width: 0.72rem;
height: 0.72rem;
flex-shrink: 0;
/* Keep the horizontal arrow on the "E" midline (viewBox y=8). */
align-self: center;
}
.combobox-chip-commit__key {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.cp-rail__search-combobox .combobox-chip-commit {
color: rgba(250, 250, 250, 0.55);
}
.combobox-inline-chips {
display: contents;
}
/* Sticky footer action inside the shared combobox listbox (e.g. Tracker's
"Add all (N) to list") — stays put while the option rows above it scroll. */
.combobox-listbox__footer {
position: sticky;
bottom: 0;
z-index: 1;
background: inherit;
border-top: 1px solid rgba(250, 250, 250, 0.16);
}
/* Already on this list (Tracker list editor; Project Access Add staff) —
grayed and unselectable rather than skipped silently. */
[data-combobox-target="option"].is-added {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.combobox-option__main {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.combobox-option__logo {
width: 1.45rem;
height: 1.45rem;
flex: none;
margin-top: 0.1rem;
border-radius: 9999px;
object-fit: contain;
background: rgba(30, 18, 30, 0.45);
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.28);
}
.combobox-option__already-note {
flex: none;
margin-left: 0.4rem;
padding: 0.12rem 0.4rem;
border-radius: 999px;
border: 1px solid rgba(250, 250, 250, 0.18);
background: rgba(250, 250, 250, 0.08);
font-size: 0.62rem;
font-weight: 650;
font-style: normal;
letter-spacing: 0.02em;
line-height: 1.2;
white-space: nowrap;
color: rgba(250, 250, 250, 0.62);
}
.combobox-option__budgets {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.2rem;
min-width: 7.5rem;
text-align: right;
}
.combobox-option__budget-label {
display: block;
font-size: 0.62rem;
line-height: 1.15;
letter-spacing: 0.01em;
color: rgba(250, 250, 250, 0.55);
}
.combobox-option__budget-amount {
display: block;
font-size: 0.75rem;
line-height: 1.15;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.combobox-option__group {
position: sticky;
top: 0;
z-index: 1;
padding: 0.4rem 0.75rem 0.25rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #e2c86b;
background: #3a2438;
pointer-events: none;
}
/* Restrained leading icons on TE fields — docs/icons-and-affordance.md */
.te-field {
@apply relative;
}
.te-field__icon {
@apply pointer-events-none absolute left-2 top-1/2 z-[1] -translate-y-1/2 text-CDE-text-muted;
}
.te-field__icon svg {
@apply h-3.5 w-3.5;
}
/* Beat #te-main-stack / #page-sidebar .input-field px-3 so text clears the icon. */
#te-main-stack .te-field .input-field,
#te-main-stack .te-field .te-combobox-input,
#page-sidebar .te-field .input-field,
#page-sidebar .te-field .te-combobox-input,
.te-field .input-field,
.te-field .te-combobox-input {
padding-left: 2.25rem;
}
/* Template combobox has no leading icon — drop the icon gutter. */
#te-main-stack .te-field--no-leading-icon .input-field,
#te-main-stack .te-field--no-leading-icon .te-combobox-input,
#page-sidebar .te-field--no-leading-icon .input-field,
#page-sidebar .te-field--no-leading-icon .te-combobox-input,
.te-field--no-leading-icon .input-field,
.te-field--no-leading-icon .te-combobox-input {
padding-left: 0.75rem;
}
/* Hours: tighter icon gutter; right pad clears custom stepper (native spins hidden). */
#te-main-stack .te-field--hours .input-field,
#page-sidebar .te-field--hours .input-field,
.te-field--hours .input-field {
padding-left: 1.65rem;
}
#te-main-stack .te-field--with-stepper .input-field,
#page-sidebar .te-field--with-stepper .input-field,
.te-field--with-stepper .input-field {
padding-right: 1.35rem;
}
.te-field--hours .input-field[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.te-field--hours .input-field[type="number"]::-webkit-inner-spin-button,
.te-field--hours .input-field[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.te-number-stepper {
@apply absolute right-0.5 top-1/2 z-[1] flex -translate-y-1/2 flex-col;
}
.te-number-stepper__btn {
@apply flex h-3.5 w-4 items-center justify-center rounded-sm text-CDE-text-muted;
@apply hover:bg-CDE-surface-hover hover:text-CDE-text-primary;
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-CDE-info;
}
.te-number-stepper__btn svg {
@apply h-2 w-2.5;
}
.te-number-stepper__btn:disabled {
@apply pointer-events-none opacity-40;
}
/* Selection chip fills the input chrome when a project is committed */
.combobox--selection-chip.combobox--chip-active .te-combobox-input,
.combobox--selection-chip.combobox--chip-active input[data-combobox-target="input"] {
color: transparent;
caret-color: transparent;
}
.combobox--selection-chip .cde-chip--selection {
left: 2.25rem;
right: 1.75rem;
max-width: none;
}
.combobox--selection-chip.combobox--chip-active:has(.cde-chip--selection-stacked) .te-combobox-input,
.combobox--selection-chip.combobox--chip-active:has(.cde-chip--selection-stacked)
input[data-combobox-target="input"] {
min-height: 2.85rem;
}
.te-btn-row-save {
@apply rounded px-2 py-1 text-xs font-semibold text-CDE-purple-dark bg-CDE-accent hover:bg-CDE-yellow-dark;
}
.te-btn-row-cancel {
@apply rounded px-2 py-1 text-xs font-medium text-CDE-text-secondary hover:bg-CDE-surface-hover hover:text-CDE-text-primary;
}
#te-main-stack .te-entry-card .input-field {
border-color: rgba(144, 124, 159, 0.28);
background: rgba(59, 41, 57, 0.4);
box-shadow: none;
@apply py-1 text-sm;
}
#te-main-stack .te-entry-card .input-field.truncate {
@apply overflow-hidden text-ellipsis whitespace-nowrap;
}
/* Active Storage avatar / logo circle + corner edit chip */
.profile-image {
position: relative;
display: inline-flex;
flex-shrink: 0;
/* Chip hangs past the rim — do not clip to the circle. */
overflow: visible;
border-radius: 9999px;
background: rgba(59, 41, 57, 0.55);
}
.profile-image__img {
@apply relative z-0 h-full w-full rounded-full object-cover;
}
/*
* Expand the hover hit box past the SE rim so moving onto the pencil
* (which sits outside the circle) still counts as hovering this host
* (`#…profile_image_header…` / `.profile-image--editable`).
*/
.profile-image--editable::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: -0.7rem;
bottom: -0.7rem;
}
/* Bottom-right pencil chip sits over the rim (half outside the circle). */
.profile-image__edit {
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
display: inline-flex;
width: 1.375rem;
height: 1.375rem;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
color: #fafafa;
background: #2d1d2c; /* CDE-purple-dark — same as .modal */
box-shadow:
0 0 0 1px rgba(250, 250, 250, 0.12),
0 1px 2px rgba(20, 12, 20, 0.45);
transform: translate(35%, 35%);
/* Delay hide so a brief slip off the disc does not snatch the chip away. */
transition:
opacity 150ms ease 280ms,
visibility 0s linear 280ms;
}
.profile-image--editable:hover .profile-image__edit,
.profile-image--editable:focus-within .profile-image__edit {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s, 0s;
}
.profile-image__edit:hover {
background: #3b2939; /* CDE-purple-darker-tone-1 */
}
.profile-image__edit:focus-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s, 0s;
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 1px;
}
.profile-image__edit-icon {
width: 0.8125rem;
height: 0.8125rem;
}
.avatar-crop {
min-width: min(100%, 22rem);
}
.avatar-crop__actions {
@apply mt-6 flex flex-wrap items-center justify-between gap-3;
}
.avatar-crop__remove {
@apply inline-flex items-center justify-center rounded-md border border-red-400/40 bg-transparent px-3 py-2 text-sm font-semibold text-red-200 transition-colors duration-150 hover:border-red-300 hover:bg-red-900/35 hover:text-red-100 focus:outline-none focus:ring-2 focus:ring-red-300/50;
}
.avatar-crop__stage {
position: relative;
width: 20rem;
max-width: 100%;
aspect-ratio: 1;
margin-inline: auto;
border-radius: 9999px;
overflow: hidden;
border: 1px solid rgba(186, 157, 196, 0.36);
background:
radial-gradient(circle at 30% 28%, rgba(250, 250, 250, 0.08), transparent 55%),
rgba(45, 29, 44, 0.95);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.avatar-crop__stage--active {
border-color: rgba(226, 200, 107, 0.7);
}
.avatar-crop__canvas {
display: block;
width: 100%;
height: 100%;
cursor: grab;
touch-action: none;
}
.avatar-crop__canvas:active {
cursor: grabbing;
}
.avatar-crop__placeholder {
pointer-events: none;
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 1.5rem;
text-align: center;
font-size: 0.875rem;
color: rgba(250, 250, 250, 0.72);
}
.avatar-crop__zoom {
width: 8rem;
accent-color: #5b8def;
}
.receipt-crop {
width: 100%;
}
.receipt-crop__layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.95fr);
gap: 1.1rem 1.35rem;
align-items: stretch;
}
@media (max-width: 720px) {
.receipt-crop__layout {
grid-template-columns: 1fr;
}
.modal:has(.receipt-crop),
.modal:has(.receipt-view) {
width: min(28rem, calc(100vw - 1.25rem));
top: 3.5rem;
padding: 1rem 1rem 1.15rem;
}
}
.receipt-crop__preview {
position: relative;
min-height: 15.5rem;
border-radius: 0.85rem;
border: 1px solid rgba(186, 157, 196, 0.3);
background:
radial-gradient(circle at 28% 22%, rgba(250, 250, 250, 0.08), transparent 52%),
rgba(33, 21, 33, 0.72);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.08);
overflow: hidden;
}
.receipt-crop__preview-empty {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 0.55rem;
padding: 1.25rem;
text-align: center;
font-size: 0.875rem;
color: rgba(250, 250, 250, 0.55);
}
.receipt-crop__preview-empty-icon {
width: 2.25rem;
height: 2.25rem;
opacity: 0.7;
}
.receipt-crop__image-panel {
display: grid;
gap: 0.45rem;
padding: 0.65rem;
height: 100%;
}
.receipt-crop__stage {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 0.55rem;
border: 1px solid rgba(186, 157, 196, 0.36);
background: rgba(21, 12, 21, 0.88);
touch-action: none;
}
.receipt-crop__canvas {
display: block;
width: 100%;
height: auto;
max-height: 16.5rem;
pointer-events: none;
}
.receipt-crop__crop-hint {
margin: 0;
text-align: center;
font-size: 0.7rem;
line-height: 1.3;
color: rgba(250, 250, 250, 0.58);
}
.receipt-crop__box {
position: absolute;
box-sizing: border-box;
border: 1.5px solid rgba(226, 200, 107, 0.9);
cursor: move;
touch-action: none;
}
.receipt-crop__handle {
position: absolute;
width: 0.7rem;
height: 0.7rem;
background: #e2c86b;
border: 1px solid rgba(33, 21, 33, 0.85);
border-radius: 0.125rem;
z-index: 1;
}
.receipt-crop__handle--n {
top: -0.35rem;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.receipt-crop__handle--s {
bottom: -0.35rem;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.receipt-crop__handle--e {
right: -0.35rem;
top: 50%;
transform: translateY(-50%);
cursor: ew-resize;
}
.receipt-crop__handle--w {
left: -0.35rem;
top: 50%;
transform: translateY(-50%);
cursor: ew-resize;
}
.receipt-crop__handle--ne {
top: -0.35rem;
right: -0.35rem;
cursor: nesw-resize;
}
.receipt-crop__handle--nw {
top: -0.35rem;
left: -0.35rem;
cursor: nwse-resize;
}
.receipt-crop__handle--se {
bottom: -0.35rem;
right: -0.35rem;
cursor: nwse-resize;
}
.receipt-crop__handle--sw {
bottom: -0.35rem;
left: -0.35rem;
cursor: nesw-resize;
}
.receipt-crop__pdf-preview {
position: absolute;
inset: 0.65rem;
}
.receipt-crop__pdf-frame {
width: 100%;
height: 100%;
min-height: 14rem;
border: 0;
border-radius: 0.5rem;
background: #fafafa;
}
.receipt-crop__rail {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-width: 0;
}
.receipt-crop__rail-head {
display: grid;
gap: 0.3rem;
}
.receipt-crop__title {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #e2c86b;
}
.receipt-crop__lede {
margin: 0;
font-size: 0.8125rem;
line-height: 1.4;
color: rgba(250, 250, 250, 0.72);
}
.receipt-crop__drop {
position: relative;
border-radius: 0.75rem;
border: 1px dashed rgba(186, 157, 196, 0.4);
background:
linear-gradient(160deg, rgba(250, 250, 250, 0.05), transparent 55%),
rgba(45, 29, 44, 0.45);
transition: border-color 120ms ease, background-color 120ms ease;
}
.receipt-crop__drop--active {
border-color: rgba(226, 200, 107, 0.75);
background: rgba(72, 48, 70, 0.55);
}
.receipt-crop__placeholder {
display: grid;
justify-items: center;
gap: 0.35rem;
padding: 1.1rem 1rem 1.15rem;
text-align: center;
}
.receipt-crop__drop-icon {
width: 1.75rem;
height: 1.75rem;
color: rgba(226, 200, 107, 0.85);
margin-bottom: 0.15rem;
}
.receipt-crop__drop-lead {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.9);
}
.receipt-crop__drop-or {
margin: 0;
font-size: 0.75rem;
color: rgba(250, 250, 250, 0.55);
}
.receipt-crop__choose {
margin-top: 0.35rem;
}
.receipt-crop__drop-meta {
margin: 0.35rem 0 0;
font-size: 0.7rem;
color: rgba(250, 250, 250, 0.5);
}
.receipt-crop__selected {
display: grid;
gap: 0.55rem;
}
.receipt-crop__selected-label {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.receipt-crop__file-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 0.65rem;
align-items: start;
padding: 0.75rem 0.8rem;
border-radius: 0.7rem;
border: 1px solid rgba(186, 157, 196, 0.3);
background: rgba(45, 29, 44, 0.62);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.08);
}
.receipt-crop__file-card--ready {
border-color: rgba(226, 200, 107, 0.45);
}
.receipt-crop__file-icon {
width: 1.5rem;
height: 1.5rem;
margin-top: 0.1rem;
color: #e2c86b;
}
.receipt-crop__file-meta {
min-width: 0;
display: grid;
gap: 0.2rem;
}
.receipt-crop__file-name {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.95);
}
.receipt-crop__file-detail {
margin: 0;
font-size: 0.72rem;
color: rgba(250, 250, 250, 0.55);
}
.receipt-crop__progress {
display: grid;
gap: 0.25rem;
margin-top: 0.35rem;
}
.receipt-crop__progress-track {
height: 0.35rem;
border-radius: 999px;
background: rgba(250, 250, 250, 0.1);
overflow: hidden;
}
.receipt-crop__progress-bar {
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #5b8def, #e2c86b);
transition: width 180ms ease;
}
.receipt-crop__progress-label {
font-size: 0.68rem;
color: rgba(250, 250, 250, 0.62);
}
.receipt-crop__ready {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.1rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #211521;
background: #e2c86b;
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.35);
}
.receipt-crop__ready-icon {
width: 0.85rem;
height: 0.85rem;
}
.receipt-crop__clear {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 0.4rem;
color: rgba(250, 250, 250, 0.7);
background: transparent;
border: 1px solid transparent;
transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.receipt-crop__clear:hover {
color: rgba(250, 250, 250, 0.95);
background: rgba(250, 250, 250, 0.08);
border-color: rgba(186, 157, 196, 0.28);
}
.receipt-crop__replace {
font-size: 0.78rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.95);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.receipt-crop__note {
display: flex;
gap: 0.45rem;
align-items: flex-start;
margin: 0;
padding: 0.55rem 0.65rem;
border-radius: 0.55rem;
border: 1px solid rgba(91, 141, 239, 0.28);
background: rgba(91, 141, 239, 0.1);
font-size: 0.72rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.78);
}
.receipt-crop__note-icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
font-style: italic;
color: #211521;
background: #5b8def;
}
.receipt-crop__error {
margin: 0;
font-size: 0.8125rem;
color: #fca5a5;
}
.receipt-crop__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem;
margin-top: auto;
padding-top: 0.25rem;
}
.receipt-crop__cancel {
@apply px-4 py-2 rounded-md font-semibold hover-outline;
}
.te-receipt-btn--attached {
color: #e2c86b;
}
/* View-receipt modal — same landscape recipe as attach (.receipt-crop). */
.receipt-view {
width: 100%;
}
.receipt-view__layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.95fr);
gap: 1.1rem 1.35rem;
align-items: stretch;
}
@media (max-width: 720px) {
.receipt-view__layout {
grid-template-columns: 1fr;
}
}
.receipt-view__preview {
position: relative;
display: grid;
place-items: center;
min-height: 15.5rem;
border-radius: 0.85rem;
border: 1px solid rgba(186, 157, 196, 0.3);
background:
radial-gradient(circle at 28% 22%, rgba(250, 250, 250, 0.08), transparent 52%),
rgba(33, 21, 33, 0.72);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.08);
overflow: hidden;
padding: 0.65rem;
}
.receipt-view__preview-empty {
display: grid;
place-content: center;
min-height: 12rem;
padding: 1.25rem;
text-align: center;
font-size: 0.875rem;
color: rgba(250, 250, 250, 0.55);
}
.receipt-view__image {
display: block;
width: 100%;
max-height: 16.5rem;
margin: 0;
border-radius: 0.55rem;
object-fit: contain;
background: rgba(21, 12, 21, 0.88);
}
.receipt-view__pdf {
display: block;
width: 100%;
height: 16.5rem;
border: 0;
border-radius: 0.55rem;
background: rgba(250, 250, 250, 0.96);
}
.receipt-view__rail {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-width: 0;
}
.receipt-view__rail-head {
display: grid;
gap: 0.3rem;
}
.receipt-view__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #e2c86b;
}
.receipt-view__lede {
margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: rgba(250, 250, 250, 0.72);
}
.receipt-view__selected {
display: grid;
gap: 0.4rem;
}
.receipt-view__selected-label {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.receipt-view__file-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.65rem;
padding: 0.7rem 0.75rem;
border-radius: 0.7rem;
border: 1px solid rgba(186, 157, 196, 0.28);
background: rgba(45, 29, 44, 0.72);
}
.receipt-view__file-card--ready {
border-color: rgba(74, 222, 128, 0.35);
}
.receipt-view__file-icon {
width: 1.65rem;
height: 1.65rem;
color: #e2c86b;
flex-shrink: 0;
}
.receipt-view__file-meta {
min-width: 0;
display: grid;
gap: 0.15rem;
}
.receipt-view__file-name {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: #fafafa;
}
.receipt-view__file-detail {
margin: 0;
font-size: 0.75rem;
color: rgba(250, 250, 250, 0.58);
}
.receipt-view__ready {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #052e16;
background: #4ade80;
white-space: nowrap;
}
.receipt-view__ready-icon {
width: 0.85rem;
height: 0.85rem;
}
.receipt-view__note {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
padding: 0.55rem 0.7rem;
border-radius: 0.55rem;
background: rgba(250, 250, 250, 0.06);
border: 1px solid rgba(186, 157, 196, 0.22);
font-size: 0.75rem;
line-height: 1.4;
color: rgba(250, 250, 250, 0.7);
}
.receipt-view__note-icon {
display: inline-grid;
place-items: center;
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
border-radius: 9999px;
background: rgba(250, 250, 250, 0.14);
font-size: 0.65rem;
font-weight: 700;
font-style: italic;
color: #fafafa;
flex-shrink: 0;
}
.receipt-view__note-link {
color: #e2c86b;
text-decoration: underline;
text-underline-offset: 2px;
}
.receipt-view__note-link:hover {
color: #f0d98a;
}
.receipt-view__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.65rem;
margin-top: auto;
padding-top: 0.25rem;
}
.receipt-view__secondary {
@apply px-4 py-2 rounded-md font-semibold hover-outline;
}
.receipt-view__danger {
@apply px-4 py-2 rounded-md font-semibold text-CDE-red hover-outline;
}
/* My Time / Staff show large avatar size (matches HeaderComponent w-24). */
.te-avatar {
width: 6rem;
height: 6rem;
}
/*
* Shared staff missing-avatar chrome (bust silhouette + gold initials).
* Size comes from the host (`.te-avatar`, `w-8 h-8`, `.cp-initials`, etc.).
*/
.profile-image--user-placeholder,
.user-avatar-placeholder {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 9999px;
background:
radial-gradient(circle at 32% 28%, rgba(250, 250, 250, 0.16), transparent 58%),
#3b2939;
box-shadow:
0 0 0 1px rgba(226, 200, 107, 0.38),
0 8px 18px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
color: #e2c86b;
container-type: size;
}
/* Editable hosts still need the pencil chip outside the circle. */
.profile-image.profile-image--user-placeholder {
overflow: visible;
}
.user-avatar-placeholder__bust {
position: absolute;
inset: 18% 16% 2%;
fill: currentColor;
opacity: 0.28;
pointer-events: none;
}
.user-avatar-placeholder__initials {
position: relative;
z-index: 1;
font-size: max(0.5rem, 30cqmin);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
color: inherit;
}
/* Fallback when container queries are unavailable (fixed TE size). */
.te-avatar.profile-image--user-placeholder .user-avatar-placeholder__initials {
font-size: 1.45rem;
}
.te-quote {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
/* My Time day strip: fixed date slot so prev/next stay put while cycling. */
.te-day-nav {
width: max-content;
max-width: 100%;
}
.te-day-nav__arrow {
flex-shrink: 0;
}
.te-day-nav__date {
min-width: 300px;
margin: 0;
text-align: center;
white-space: nowrap;
}
.te-hours-ring {
position: relative;
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
flex-shrink: 0;
border-radius: 9999px;
background: conic-gradient(
#e2c86b calc(var(--te-ring-pct, 0) * 1%),
#3b2939 0
);
}
/* Presentation-only: keep gold base full at ≥8h; wrap overflow in softer OT amber. */
.te-hours-ring--overtime {
background: conic-gradient(
#d4a24a calc(var(--te-ring-ot-pct, 0) * 1%),
#e2c86b 0
);
}
.te-hours-ring--overtime .te-hours-ring__value,
.text-CDE-ot {
color: #d4a24a;
}
.te-hours-ring::before {
content: "";
position: absolute;
inset: 0.45rem;
border-radius: 9999px;
background: #2d1d2c;
}
.te-hours-ring > * {
position: relative;
z-index: 1;
text-align: center;
}
.te-calendar-day {
@apply relative flex min-h-[3.75rem] w-full flex-col rounded-md bg-CDE-surface-interactive px-1 pb-1 pt-0.5 text-left no-underline transition-colors duration-150;
}
.te-calendar-day--outside {
@apply text-CDE-text-muted opacity-40;
}
.te-calendar-day--today:not(.te-calendar-day--selected) {
@apply bg-CDE-surface-hover;
}
.te-calendar-day--selected {
@apply bg-CDE-accent-surface ring-2 ring-inset ring-CDE-accent;
}
.te-calendar-day--holiday:not(.te-calendar-day--selected) {
@apply bg-CDE-accent-surface/60;
}
.te-calendar-day--unsubmitted::after {
content: "";
position: absolute;
top: 0.28rem;
right: 0.28rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 9999px;
background: #e2c86b;
}
/* Submitted days intentionally have no notification dot. */
/* Dismissible in-app notice — pair with .te-glass for chrome (no second border). */
.te-dismissible-notice {
@apply relative flex flex-col gap-3 p-4 text-CDE-text-primary;
}
.te-dismissible-notice__title {
@apply text-sm font-semibold text-CDE-text-primary;
}
.te-dismissible-notice__body {
@apply text-sm text-CDE-text-secondary;
}
.te-calendar-hours {
@apply mt-auto pt-2 text-xs font-medium leading-tight text-CDE-text-secondary;
}
.te-calendar-day--selected .te-calendar-hours {
@apply font-semibold text-CDE-accent;
}
#time-entry-calendar .selected-date,
#time-entry-calendar .today-date {
outline: none;
box-shadow: none;
}
/* Reports hub — soft login-inspired atmosphere (gradients + faint lines; not full login chrome). */
.reports-shell {
isolation: isolate;
background:
radial-gradient(circle at 18% 82%, rgba(114, 81, 131, 0.28), transparent 26rem),
radial-gradient(circle at 88% 12%, rgba(99, 64, 92, 0.32), transparent 28rem),
linear-gradient(145deg, #2f1a2f 0%, #4A3045 52%, #2c182c 100%);
}
.reports-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.16;
background-image:
linear-gradient(90deg, rgba(250, 250, 250, 0.14) 1px, transparent 1px),
linear-gradient(rgba(250, 250, 250, 0.14) 1px, transparent 1px);
background-size: 14rem 14rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.85));
}
.reports-shell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.18;
background:
linear-gradient(18deg, transparent 0 28%, rgba(250, 250, 250, 0.14) 28.1% 28.3%, transparent 28.4% 100%),
repeating-linear-gradient(90deg, transparent 0 6.5rem, rgba(250, 250, 250, 0.07) 6.55rem 6.62rem, transparent 6.7rem 12.5rem);
}
.reports-sidebar {
background: rgba(43, 23, 43, 0.72);
backdrop-filter: blur(14px);
box-shadow:
inset -1px 0 0 rgba(250, 250, 250, 0.06),
8px 0 28px rgba(0, 0, 0, 0.22);
}
.reports-tile {
@apply rounded-lg border border-CDE-purple-light/25 transition-colors duration-150;
background: rgba(43, 23, 43, 0.42);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.06);
}
.reports-tile:hover {
background: rgba(69, 45, 64, 0.62);
border-color: rgba(226, 200, 107, 0.35);
}
.reports-period-card {
@apply border border-CDE-purple-light/25;
background: rgba(43, 23, 43, 0.28);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.05);
}
/* Settings hub — vertical-stripe texture (admin catalog feel); soft login family */
.settings-shell {
isolation: isolate;
min-height: calc(100vh - 2.75rem);
background:
radial-gradient(circle at 16% 84%, rgba(114, 81, 131, 0.3), transparent 26rem),
radial-gradient(circle at 88% 8%, rgba(99, 64, 92, 0.34), transparent 28rem),
linear-gradient(158deg, #2f1c2e 0%, #4A3045 48%, #322033 100%);
}
.settings-shell::before,
.settings-shell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.settings-shell::before {
opacity: 0.12;
background-image:
linear-gradient(90deg, rgba(250, 250, 250, 0.12) 1px, transparent 1px),
linear-gradient(rgba(250, 250, 250, 0.1) 1px, transparent 1px);
background-size: 15rem 15rem, 15rem 15rem;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.9));
}
.settings-shell::after {
opacity: 0.14;
background:
repeating-linear-gradient(
90deg,
transparent 0 4.75rem,
rgba(250, 250, 250, 0.07) 4.8rem 4.88rem,
transparent 4.95rem 9.5rem
);
}
.settings-shell > * {
position: relative;
z-index: 1;
}
.settings-sidebar {
background: rgba(66, 43, 62, 0.86);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset -1px 0 0 rgba(250, 250, 250, 0.1),
8px 0 28px rgba(0, 0, 0, 0.2);
}
.settings-sidebar .card-selected {
box-shadow:
inset 3px 0 0 #E2C86B,
0 0 0 1px rgba(186, 157, 196, 0.28);
background: rgba(69, 45, 64, 0.55);
}
.settings-content {
position: relative;
isolation: isolate;
background: rgba(45, 29, 44, 0.82);
border: 1px solid rgba(186, 157, 196, 0.36);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.34),
0 0 0 1px rgba(250, 250, 250, 0.07),
inset 0 1px 0 rgba(250, 250, 250, 0.18);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.settings-content::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(250, 250, 250, 0.12), transparent 38%);
z-index: 0;
}
.settings-content > * {
position: relative;
z-index: 1;
}
.cp-rail-add-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: 50;
display: flex;
align-items: center;
width: 20rem;
min-height: 4rem;
border-top: 1px solid rgba(226, 200, 107, 0.35);
background: #322032;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cp-rail-add {
flex: 1 1 0;
min-width: 0;
padding: 0.45rem 0.55rem;
font-size: 0.8125rem;
}
/* Hidden until focused — a keyboard user tabbing from the top of the page lands
here first in the Approvals workspace, one Tab from the CTA, instead of after
the rail's Lists, Workspace links and every filter. Fixed, not absolute: the
shell is a grid with no positioned ancestor to anchor to. */
.approvals-skip-link {
position: fixed;
top: -3rem;
left: 0.75rem;
z-index: 30;
padding: 0.5rem 0.9rem;
border-radius: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: #2b172b;
background: #f0d45f;
transition: top 120ms ease;
}
.approvals-skip-link:focus-visible {
top: 0.75rem;
outline: 2px solid #2b172b;
outline-offset: 2px;
}
/* Tracker — rail, centre, and a workspace-only right panel. The rail is
thinner than the Clients/Projects sidebar. Browse has no right panel, so
the centre takes the width back. */
.approvals-shell {
display: grid;
height: 100%;
min-height: 0;
background: #211521;
}
.approvals-rail,
.approvals-center,
.approvals-decision {
min-height: 0;
min-width: 0;
}
.approvals-rail {
overflow: auto;
padding: 0.85rem 0.7rem 1.5rem;
/* Solid fill — engineering lines live only on `#approvals-center.te-shell`. */
background: #211521;
box-shadow: inset -1px 0 0 rgba(250, 250, 250, 0.06);
}
.approvals-rail__section + .approvals-rail__section {
margin-top: 1.1rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(250, 250, 250, 0.08);
}
.approvals-rail__separator {
margin: 0.65rem 0.35rem;
border: 0;
border-top: 1px solid rgba(250, 250, 250, 0.14);
}
.approvals-rail__label {
margin: 0 0 0.4rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.85);
}
.approvals-rail__sublabel {
margin: 0.45rem 0 0.3rem;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
/* Label + dropdown on one row (Projects / Project status). */
.approvals-rail__filter-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 0.35rem 0.45rem;
margin: 0.4rem 0 0.25rem;
min-width: 0;
}
.approvals-rail__filter-row > .approvals-rail__sublabel {
margin: 0;
min-width: 0;
white-space: nowrap;
}
.approvals-rail__filter-row > .approvals-status-menu {
justify-self: end;
width: 100%;
max-width: 100%;
min-width: 0;
justify-content: flex-end;
}
.approvals-rail__filter-row .approvals-status-menu__trigger {
max-width: 100%;
}
.approvals-rail__filter-row .approvals-status-menu__trigger > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.approvals-rail__add-list {
margin: 0.35rem 0 0.5rem;
}
/* Hovering a list row reveals its edit icon (5.1) — there is no separate
row-level delete; that lives only in the editor's sticky footer (5.4). */
.approvals-rail__list-row {
position: relative;
display: flex;
align-items: center;
margin: 0.15rem 0;
}
.approvals-rail__list-row > .approvals-rail__link {
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0;
}
.approvals-rail__list-edit {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.65rem;
height: 1.65rem;
margin-left: 0.15rem;
border-radius: 0.35rem;
color: rgba(226, 200, 107, 0.85);
background: transparent;
border: 0;
cursor: pointer;
opacity: 0;
transition: opacity 100ms ease, background-color 100ms ease;
}
.approvals-rail__list-row:hover .approvals-rail__list-edit,
.approvals-rail__list-row:focus-within .approvals-rail__list-edit,
.approvals-rail__list-edit:focus-visible {
opacity: 1;
}
.approvals-rail__list-edit:hover {
background: rgba(250, 250, 250, 0.08);
color: #f4e7b0;
}
.approvals-rail__list-edit:focus-visible {
outline: 2px solid #e2c86b;
outline-offset: 1px;
}
.approvals-rail__statuses {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin: 0 0.15rem 0.35rem;
}
.approvals-chip {
padding: 0.15rem 0.45rem;
border: 1px solid rgba(250, 250, 250, 0.16);
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.35;
color: rgba(250, 250, 250, 0.66);
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.approvals-chip:hover {
color: #fafafa;
border-color: rgba(226, 200, 107, 0.4);
}
.approvals-chip.is-on {
color: #2b172b;
background: rgba(226, 200, 107, 0.88);
border-color: rgba(226, 200, 107, 0.9);
}
.approvals-chip:focus-visible {
outline: 2px solid #f0d45f;
outline-offset: 2px;
}
.approvals-rail__note {
margin: 0 0.2rem 0.45rem;
font-size: 0.62rem;
line-height: 1.25;
color: rgba(250, 250, 250, 0.48);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A workspace reads no list and no filter, so neither section may look live. */
.approvals-rail.is-workspace .approvals-rail__filters {
opacity: 0.45;
pointer-events: none;
}
.approvals-rail.is-workspace .approvals-rail__filters .approvals-rail__note {
opacity: 1;
color: rgba(226, 200, 107, 0.8);
}
.approvals-rail__clear {
display: inline-block;
margin: 1.15rem 0.2rem 0;
font-size: 0.7rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.85);
}
.approvals-rail__clear:hover {
color: #f4e7b0;
text-decoration: underline;
}
.approvals-rail__idle-toggle {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin: 1.1rem 0.15rem 0;
padding: 0.45rem 0.35rem;
border-radius: 0.45rem;
color: rgba(250, 250, 250, 0.78);
text-decoration: none;
transition: background-color 140ms ease, color 140ms ease;
}
.approvals-rail__idle-toggle:hover {
background: rgba(250, 250, 250, 0.06);
color: rgba(250, 250, 250, 0.92);
}
.approvals-rail__idle-toggle.is-on {
color: #f4e7b0;
}
.approvals-rail__idle-toggle-switch {
position: relative;
flex: 0 0 auto;
width: 1.7rem;
height: 1rem;
margin-top: 0.1rem;
border-radius: 999px;
background: rgba(250, 250, 250, 0.18);
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.12);
}
.approvals-rail__idle-toggle.is-on .approvals-rail__idle-toggle-switch {
background: rgba(226, 200, 107, 0.55);
box-shadow: inset 0 0 0 1px rgba(226, 200, 107, 0.45);
}
.approvals-rail__idle-toggle-knob {
position: absolute;
top: 0.12rem;
left: 0.12rem;
width: 0.76rem;
height: 0.76rem;
border-radius: 999px;
background: #fafafa;
transition: transform 140ms ease;
}
.approvals-rail__idle-toggle.is-on .approvals-rail__idle-toggle-knob {
transform: translateX(0.7rem);
}
.approvals-rail__idle-toggle-label {
font-size: 0.7rem;
font-weight: 600;
line-height: 1.35;
}
.approvals-rail.is-workspace .approvals-rail__idle-toggle {
opacity: 0.45;
pointer-events: none;
}
/* The rail widens while the editor is open. That works because browse has no
right panel, so the centre has slack to give — and it is clamped so the centre
keeps a usable minimum. */
.approvals-shell {
--approvals-rail-width: 13.25rem;
transition: grid-template-columns 180ms ease;
}
/* Narrow viewports: the right panel is the first thing to give, because the
centre is where the work is. Below that it drops under the centre entirely
rather than squeezing the cards into a column too narrow to read. */
@media (max-width: 1180px) {
.approvals-shell {
--approvals-panel-width: 17.5rem;
}
.approvals-shell[data-approvals-browse]:has(.approvals-project-panel.is-open) {
--approvals-panel-width: 17.5rem;
}
}
@media (max-width: 980px) {
.approvals-shell,
.approvals-shell[data-approvals-browse] {
grid-template-columns: var(--approvals-rail-width) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
overflow: auto;
}
.approvals-decision,
.approvals-project-panel.is-open {
grid-column: 1 / -1;
max-height: 55vh;
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.08);
}
.approvals-shell:has(#approvals-list-panel:not(.hidden)) {
--approvals-rail-width: min(22rem, 60vw);
}
}
.approvals-shell:has(#approvals-list-panel:not(.hidden)) {
--approvals-rail-width: min(26rem, 42vw);
}
.approvals-shell,
.approvals-shell[data-approvals-browse] {
grid-template-columns: var(--approvals-rail-width) minmax(0, 1fr) var(--approvals-panel-width, 22.5rem);
}
/* Browse keeps a third column slot for the project panel, but collapses it
until Stimulus marks the aside `.is-open` (project-name click / bookmark). */
.approvals-shell[data-approvals-browse] {
--approvals-panel-width: 0rem;
}
.approvals-shell[data-approvals-browse]:has(.approvals-project-panel.is-open) {
--approvals-panel-width: 22.5rem;
}
.approvals-list-panel {
margin: 0.35rem 0 0.6rem;
padding: 0.7rem 0.6rem 0.2rem;
border: 1px solid rgba(226, 200, 107, 0.28);
border-radius: 0.55rem;
background: rgba(59, 34, 59, 0.75);
}
/* Filters and Workspace stay mounted but inert while the editor is open: they do
nothing to an unsaved list, and letting them be clicked is a way to lose a
draft. */
.approvals-shell:has(#approvals-list-panel:not(.hidden)) .approvals-rail__separator ~ *:not(#approvals-list-panel) {
opacity: 0.35;
pointer-events: none;
}
.approvals-list-panel__hint {
display: block;
margin: 0.2rem 0 0;
font-size: 0.66rem;
line-height: 1.4;
color: rgba(250, 250, 250, 0.5);
}
.approvals-list-panel__add-all {
margin-top: 0.4rem;
padding: 0.2rem 0.5rem;
border: 1px dashed rgba(226, 200, 107, 0.45);
border-radius: 0.4rem;
font-size: 0.7rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.9);
}
.approvals-list-panel__add-all:hover {
background: rgba(226, 200, 107, 0.12);
}
.approvals-list-panel__project-name {
display: flex;
min-width: 0;
flex-direction: column;
line-height: 1.3;
}
.approvals-list-panel__project-client {
font-size: 0.65rem;
color: rgba(250, 250, 250, 0.5);
}
.approvals-list-panel__project.is-already-added {
border-color: rgba(226, 200, 107, 0.7);
background: rgba(226, 200, 107, 0.16);
}
.approvals-list-panel__empty {
margin: 0.35rem 0 0;
font-size: 0.68rem;
color: rgba(250, 250, 250, 0.45);
}
/* Sticky, so Save is reachable however far the membership list has scrolled. */
.approvals-list-panel__save-bar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.6rem;
padding: 0.55rem 0 0.5rem;
background: rgba(59, 34, 59, 0.96);
box-shadow: 0 -1px 0 rgba(250, 250, 250, 0.1);
}
.approvals-list-panel__cancel {
@apply inline-flex items-center justify-center rounded-md border border-CDE-border-strong bg-CDE-surface-interactive px-4 py-2 text-sm font-semibold text-CDE-text-secondary transition-colors duration-150 hover:bg-CDE-surface-hover hover:text-CDE-text-primary hover:cursor-pointer;
}
/* Destructive, below the bar and behind a rule, so it is never in the path of a
reach for Save. */
.approvals-list-panel__danger {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(250, 250, 250, 0.1);
}
.approvals-list-panel__delete {
padding: 0;
font-size: 0.7rem;
font-weight: 600;
color: rgba(240, 140, 140, 0.85);
background: transparent;
}
.approvals-list-panel__delete:hover {
color: #ffb3b3;
text-decoration: underline;
}
.approvals-list-panel__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.approvals-list-panel__title {
margin: 0;
font-size: 1rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.92);
}
.approvals-list-panel__form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.approvals-list-panel__field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.approvals-list-panel__field-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.75);
}
.approvals-list-panel__hint {
margin: 0;
font-size: 0.75rem;
color: rgba(250, 250, 250, 0.55);
}
.approvals-list-panel__projects {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
max-height: 12rem;
overflow: auto;
}
.approvals-list-panel__project {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-radius: 0.4rem;
background: rgba(250, 250, 250, 0.06);
font-size: 0.84rem;
}
.approvals-list-panel__remove {
font-size: 0.7rem;
font-weight: 600;
color: rgba(240, 140, 140, 0.9);
background: transparent;
border: 0;
cursor: pointer;
}
.approvals-list-panel__actions {
display: flex;
justify-content: flex-end;
}
.approvals-rail__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin: 0.15rem 0;
padding: 0.38rem 0.5rem;
border-radius: 0.45rem;
font-size: 0.84rem;
line-height: 1.2;
color: inherit;
text-align: left;
}
a.approvals-rail__link:hover {
background: rgba(250, 250, 250, 0.06);
}
a.approvals-rail__link:focus-visible,
.approvals-flag:focus-visible {
outline: 2px solid #e2c86b;
outline-offset: 2px;
}
.approvals-rail__link.is-active {
background: rgba(226, 200, 107, 0.16);
color: #f4e7b0;
font-weight: 600;
box-shadow: inset 0.22rem 0 0 #e2c86b;
}
.approvals-rail__link.is-unavailable {
opacity: 0.45;
cursor: default;
}
.approvals-rail__count {
flex: none;
min-width: 1.25rem;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: rgba(250, 250, 250, 0.7);
}
.approvals-rail__note {
margin: 0.2rem 0.5rem 0;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.55);
}
/* Tracker centre reuses `.te-shell` (My Time dark fill + engineering lines).
Lines are clipped to this column; the rail is a solid overlay. Shared
gutter so heading, tools, cards, and tables share one right edge. */
.approvals-center {
--approvals-center-gutter: 1.15rem;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
overflow: hidden;
}
.approvals-center > turbo-frame {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
/* Title + memory + counts sit on the lined centre, not inside glass. */
.approvals-page-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.85rem 1.1rem;
flex: none;
margin: 0.85rem var(--approvals-center-gutter) 0.2rem;
min-width: 0;
}
/* Group/sort tools on the atmosphere, same gutter as the heading. */
.approvals-header {
position: relative;
z-index: 30;
flex: none;
margin: 0.25rem var(--approvals-center-gutter) 0.55rem;
padding: 0;
}
.approvals-header__title-line {
display: flex;
align-items: baseline;
gap: 0.65rem;
min-width: 0;
flex: 1 1 auto;
}
.approvals-header__title-line h1 {
margin: 0;
flex: none;
font-size: 1.12rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
border-bottom: none;
}
.approvals-header__summary {
margin: 0;
min-width: 0;
flex: 1 1 auto;
font-size: 0.76rem;
line-height: 1.25;
color: rgba(250, 250, 250, 0.66);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.approvals-count {
margin: 0;
flex: none;
align-self: baseline;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.62);
white-space: nowrap;
}
.approvals-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
width: 100%;
margin-top: 0;
padding: 0;
border-top: 0;
}
.approvals-toolbar__search {
flex: 1 1 12rem;
}
/* The approve CTA sits in the Approvals right panel. Select all and Clear
all sit under it, quiet so the primary action reads as primary. Idle vs
gold is CSS :has on the streamed count — never a one-shot is-idle class. */
.approvals-approve-bar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
padding: 0.7rem 0.75rem 0.65rem;
border: 1px solid rgba(226, 200, 107, 0.26);
border-radius: 0.55rem;
background: rgba(226, 200, 107, 0.07);
}
.approvals-approve-bar__cta-form {
display: block;
width: 100%;
margin: 0;
}
.approvals-approve-bar__cta {
display: block;
width: 100%;
padding: 0.65rem 1.1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
color: #2b172b;
background: #e2c86b;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 200, 107, 0.5);
transition: transform 80ms ease;
}
.approvals-approve-bar__cta:hover {
background: #f0d45f;
}
/* Colour follows the streamed count, not a one-shot class or disabled attr —
those would freeze after the first paint. Native disabled is avoided so the
skip link can still land on the CTA; submit is blocked via aria-disabled. */
.approvals-approve-bar__cta:has([data-approvals-count="0"]) {
color: rgba(250, 250, 250, 0.72);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.22);
cursor: not-allowed;
opacity: 1;
pointer-events: none;
transform: none;
}
.approvals-approve-bar__cta:has([data-approvals-count="0"]):hover {
color: rgba(250, 250, 250, 0.72);
background: transparent;
}
.approvals-approve-bar__cta:active {
transform: translateY(1px);
}
.approvals-approve-bar__cta:focus-visible {
outline: 2px solid #f4e7b0;
outline-offset: 2px;
}
.approvals-approve-bar__secondary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 0.75rem;
}
.approvals-approve-bar__secondary form {
margin: 0;
}
.approvals-approve-bar__scope {
margin: 0;
font-size: 0.72rem;
color: rgba(250, 250, 250, 0.6);
}
/* Flagged bulk Apply: one lighter card wraps CTA → tools (flagged badge,
Select all, Clear) → clear-comments + unflag → CHANGES fields.
Idle CTA follows Approvals (aria-disabled + streamed count). */
.approvals-bulk-bar {
margin: 0 0 0.85rem;
}
.approvals-bulk-form {
margin: 0;
}
.approvals-bulk-bar__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.72rem 1.1rem;
border: 0;
border-radius: 0.85rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
color: #fafafa;
/* Depth from a soft vertical gradient + diffuse shadow — avoid a hard
square bottom lip under the rounded corners. */
background: linear-gradient(
180deg,
#3aa0ff 0%,
#1a86ff 28%,
#0076f5 58%,
#005fc8 82%,
#004ea8 100%
);
box-shadow:
0 3px 10px rgba(0, 40, 100, 0.38),
0 1px 2px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.38),
inset 0 -1.5px 0 rgba(0, 40, 90, 0.18);
transition: background 120ms ease, box-shadow 80ms ease, transform 80ms ease;
}
.approvals-bulk-bar__cta-icon {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
}
.approvals-bulk-bar__cta:hover {
background: linear-gradient(
180deg,
#4aa8ff 0%,
#2a92ff 28%,
#1a86ff 58%,
#006ee0 82%,
#0058b8 100%
);
}
.approvals-bulk-bar__cta:has([data-approvals-count="0"]),
.approvals-bulk-bar__cta[aria-disabled="true"] {
color: rgba(250, 250, 250, 0.62);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.22);
cursor: not-allowed;
pointer-events: none;
transform: none;
}
.approvals-bulk-bar__cta:has([data-approvals-count="0"]):hover,
.approvals-bulk-bar__cta[aria-disabled="true"]:hover {
background: transparent;
}
.approvals-bulk-bar__cta:active:not([aria-disabled="true"]) {
transform: translateY(1px);
box-shadow:
0 1px 4px rgba(0, 40, 100, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 40, 90, 0.16);
}
.approvals-bulk-bar__cta:focus-visible {
outline: 2px solid #56a8ff;
outline-offset: 2px;
}
.approvals-bulk-bar__tools {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35rem 0.4rem;
}
.approvals-bulk-bar__quiet {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
width: auto;
margin: 0;
padding: 0.38rem 0.55rem;
border: 1px solid rgba(250, 250, 250, 0.14);
border-radius: 0.4rem;
background: rgba(250, 250, 250, 0.1);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.2;
color: rgba(250, 250, 250, 0.86);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.approvals-bulk-bar__quiet:hover {
background: rgba(250, 250, 250, 0.16);
color: #fafafa;
}
.approvals-bulk-bar__flagged {
margin: 0;
padding: 0.2rem 0.55rem;
border: 1px solid rgba(226, 200, 107, 0.45);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 650;
color: rgba(244, 231, 176, 0.92);
background: rgba(226, 200, 107, 0.08);
white-space: nowrap;
}
.approvals-bulk-bar__meta {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.65rem 0.85rem;
overflow-x: auto;
}
.approvals-bulk-bar__switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex: 0 0 auto;
cursor: pointer;
user-select: none;
}
.approvals-bulk-bar__switch-input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
.approvals-bulk-bar__switch-ui {
position: relative;
flex: 0 0 auto;
width: 1.75rem;
height: 1rem;
border-radius: 999px;
background: rgba(250, 250, 250, 0.18);
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.18);
transition: background-color 140ms ease;
}
.approvals-bulk-bar__switch-ui::after {
content: "";
position: absolute;
top: 0.1rem;
left: 0.1rem;
width: 0.78rem;
height: 0.78rem;
border-radius: 999px;
background: #fafafa;
transition: transform 140ms ease;
}
.approvals-bulk-bar__switch-input:checked + .approvals-bulk-bar__switch-ui {
background: #0076f5;
box-shadow: inset 0 0 0 1px rgba(0, 118, 245, 0.8);
}
.approvals-bulk-bar__switch-input:checked + .approvals-bulk-bar__switch-ui::after {
transform: translateX(0.72rem);
}
.approvals-bulk-bar__switch-input:focus-visible + .approvals-bulk-bar__switch-ui {
outline: 2px solid #56a8ff;
outline-offset: 2px;
}
.approvals-bulk-bar__switch-label,
.approvals-bulk-bar__check {
font-size: 0.7rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.82);
white-space: nowrap;
}
.approvals-bulk-bar__check {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
cursor: pointer;
}
.approvals-bulk-bar__status {
margin: 0;
min-height: 0;
font-size: 0.72rem;
color: rgba(250, 250, 250, 0.62);
}
.approvals-bulk-bar__status:empty {
display: none;
}
.approvals-bulk-bar .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.approvals-bulk-changes {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
padding: 0.75rem 0.8rem 0.85rem;
border: 1px solid rgba(250, 250, 250, 0.1);
border-radius: 0.65rem;
background: rgba(74, 48, 69, 0.42);
}
.approvals-bulk-changes__title {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0.15rem 0 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.88);
}
.approvals-bulk-changes__title::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(226, 200, 107, 0.28);
}
.approvals-bulk-changes .approvals-fields {
gap: 0.55rem;
}
.approvals-bulk-changes .approvals-field > label {
font-size: 0.66rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.approvals-bulk-changes .input-field,
.approvals-bulk-changes .approvals-bulk-form__combobox {
min-height: 2.15rem;
}
.approvals-decision .approvals-bulk-bar {
margin-top: 0.15rem;
}
/* Sentence case, not shouting: the window is context, not a headline. */
.approvals-fact__window {
margin: 0 0 0.35rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(226, 200, 107, 0.75);
}
.approvals-fact__matrix {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.45rem;
}
.approvals-fact__matrix-head,
.approvals-fact__matrix-row {
display: grid;
grid-template-columns: minmax(6.75rem, 1.4fr) 1fr 1fr;
gap: 0.45rem 0.6rem;
align-items: baseline;
}
.approvals-fact__matrix-head {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.52);
text-align: right;
}
.approvals-fact__matrix-stub {
text-align: left;
}
.approvals-fact__matrix-row [role="rowheader"] {
font-size: 0.78rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.84);
}
.approvals-fact__hover {
cursor: help;
}
.approvals-fact__matrix-row .approvals-fact__value,
.approvals-fact__selected-pair .approvals-fact__value {
margin: 0;
text-align: right;
}
.approvals-fact__selected-pair {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: 2 / span 2;
gap: 0.45rem 0.6rem;
}
.approvals-fact__rank {
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.approvals-fact__rank li {
display: block;
font-size: 0.78rem;
}
.approvals-fact__rank-jump {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin: 0;
padding: 0.12rem 0.15rem;
border: 0;
border-radius: 0.28rem;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.approvals-fact__rank-jump:hover,
.approvals-fact__rank-jump:focus-visible {
background: rgba(250, 250, 250, 0.08);
outline: none;
}
.approvals-fact__rank-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.approvals-fact__rank-value {
flex: none;
font-variant-numeric: tabular-nums;
color: rgba(250, 250, 250, 0.78);
}
/* Pin stack — the Flagged panel's lower half. Mini Tracker project cards:
budget dot, spaced unlabelled bars, pie, and Budget / Remaining / Projected remaining. */
.approvals-pins {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.2rem;
}
.approvals-pins__bar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.approvals-pins__label {
margin: 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.85);
}
.approvals-pins__impact-total {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
color: #56a8ff;
}
.approvals-pins__empty {
margin: 0;
font-size: 0.72rem;
line-height: 1.45;
color: rgba(250, 250, 250, 0.5);
}
/* No cap on pins, so the stack scrolls rather than pushing the form away. */
.approvals-pins__list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
max-height: 34rem;
overflow-y: auto;
}
.approvals-pin {
padding: 0.45rem 0.55rem;
border: 1px solid rgba(250, 250, 250, 0.1);
border-radius: 0.5rem;
background: rgba(74, 48, 69, 0.35);
transition: border-color 140ms ease, background-color 140ms ease;
}
/* The target of a pending change, then the projects it draws from. */
.approvals-pin.is-target {
border-color: rgba(0, 118, 245, 0.6);
background: rgba(0, 118, 245, 0.12);
}
.approvals-pin.is-affected {
border-color: rgba(86, 168, 255, 0.35);
}
.approvals-pin.is-over {
border-color: rgba(196, 64, 77, 0.5);
}
/* The preview crosses into over budget — the one thing a manager must not miss. */
.approvals-pin.is-preview-over {
border-color: rgba(196, 64, 77, 0.85);
background: rgba(196, 64, 77, 0.14);
}
/* Synthesised client-side for a target-bump that has no auto or manual pin yet
(6.5 rule 2). Dashed border reads as "not settled here" against the solid
border every server-rendered pin carries. */
.approvals-pin--ghost {
border-style: dashed;
}
.approvals-pin__ghost-note {
margin: 0.3rem 0;
font-size: 0.62rem;
line-height: 1.4;
color: rgba(250, 250, 250, 0.4);
}
.approvals-pin__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.4rem;
}
.approvals-pin__top .approvals-pin__logo.profile-image {
width: 1.35rem;
height: 1.35rem;
flex: none;
margin-top: 0.05rem;
}
.approvals-pin__top .approvals-pin__logo .profile-image__img {
object-fit: contain;
background: rgba(30, 18, 30, 0.35);
}
/* Ghost cards: plain img from the bulk-project combobox option. */
img.approvals-pin__logo {
display: block;
width: 1.35rem;
height: 1.35rem;
flex: none;
margin-top: 0.05rem;
border-radius: 9999px;
object-fit: contain;
background: rgba(30, 18, 30, 0.35);
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.28);
}
.approvals-pin__identity {
display: flex;
min-width: 0;
flex: 1 1 auto;
flex-direction: column;
line-height: 1.25;
}
.approvals-pin__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.78rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.92);
}
.approvals-pin__client {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.65rem;
color: rgba(250, 250, 250, 0.5);
}
.approvals-pin__auto {
flex: 0 0 auto;
font-size: 0.62rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.42);
}
.approvals-pin__unpin-form {
margin: 0;
}
.approvals-pin__unpin {
padding: 0 0.25rem;
border-radius: 0.3rem;
font-size: 0.9rem;
line-height: 1;
color: rgba(250, 250, 250, 0.45);
background: transparent;
}
.approvals-pin__unpin:hover {
color: #fafafa;
background: rgba(250, 250, 250, 0.12);
}
.approvals-pin__unpin:focus-visible {
outline: 2px solid #f0d45f;
outline-offset: 1px;
}
/* Mini card cluster: same 3-col instruments as browse, tighter for the panel. */
.approvals-pin__charts.tracker-charts--project {
margin-top: 0.35rem;
column-gap: 0.35rem;
grid-template-columns:
var(--tracker-charts-left, minmax(3.4rem, max-content))
minmax(0, 1fr)
var(--tracker-charts-right, minmax(3.4rem, max-content));
}
.approvals-pin__charts .approvals-pie--card {
width: 2.5rem;
height: 2.5rem;
}
.approvals-pin__charts .approvals-pie--card::before {
inset: -0.25rem;
}
.approvals-pin__charts .approvals-pie__inner--card {
inset: 4px;
}
.approvals-pin__charts .approvals-pie__grow {
inset: 4px;
}
/* Unlabelled bars that still spread across the middle column. */
.approvals-pin__charts > .tracker-bars {
align-self: stretch;
height: auto;
min-height: 2.6rem;
gap: 0.18rem;
padding: 0.2rem 0 0.15rem;
}
.approvals-pin__charts > .tracker-bars .tracker-bars__col {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.approvals-pin__charts > .tracker-bars .tracker-bars__track {
width: 100%;
max-width: 0.38rem;
margin-inline: auto;
}
.approvals-pin .tracker-charts__caption-amount.is-preview {
color: #8cc4ff;
}
.approvals-pin__numbers {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin: 0.35rem 0 0;
}
.approvals-pin__numbers dt {
font-size: 0.6rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.45);
}
.approvals-pin__numbers dd {
margin: 0;
font-size: 0.82rem;
font-weight: 650;
color: rgba(250, 250, 250, 0.9);
}
.approvals-pin__numbers dd.is-preview {
color: #8cc4ff;
}
.approvals-pin__impact {
margin: 0.35rem 0 0;
padding-top: 0.3rem;
border-top: 1px dashed rgba(250, 250, 250, 0.14);
font-size: 0.68rem;
font-weight: 600;
color: #8cc4ff;
}
.approvals-pin.is-preview-over .approvals-pin__impact {
color: #ff9d9d;
}
.approvals-pins__add-trigger {
display: inline-block;
font-size: 0.68rem;
font-weight: 600;
color: rgba(226, 200, 107, 0.8);
cursor: pointer;
}
.approvals-pins__add-trigger:hover {
color: #f4e7b0;
}
.approvals-pins__add-form {
display: flex;
align-items: flex-start;
gap: 0.35rem;
margin-top: 0.4rem;
}
.approvals-pins__combobox {
flex: 1 1 auto;
min-width: 0;
}
.approvals-pins__add-submit {
flex: 0 0 auto;
padding: 0.3rem 0.6rem;
border-radius: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #2b172b;
background: rgba(226, 200, 107, 0.85);
}
.approvals-pins__add-submit:hover {
background: #f0d45f;
}
.approvals-field__hint {
margin: 0.2rem 0 0;
font-size: 0.68rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.5);
}
.approvals-approve-bar__quiet,
.approvals-bulk-form__quiet,
.approvals-selection-bar__quiet {
padding: 0.35rem 0.5rem;
border-radius: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.68);
background: transparent;
}
.approvals-approve-bar__quiet:hover,
.approvals-bulk-form__quiet:hover,
.approvals-selection-bar__quiet:hover {
color: #fafafa;
background: rgba(250, 250, 250, 0.08);
}
.approvals-toolbar__search .input-field {
width: 100%;
min-width: 9rem;
}
/* Grouping + sort cluster — chrome-less so only the segment controls show. */
.approvals-view-tools {
display: inline-flex;
flex: none;
flex-wrap: wrap;
align-items: stretch;
gap: 0.45rem;
width: max-content;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.approvals-sort,
.approvals-group-by {
display: inline-flex;
flex: none;
align-items: stretch;
width: max-content;
max-width: 100%;
}
.approvals-nest-sorts {
display: inline-flex;
flex: none;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 0.35rem;
width: max-content;
max-width: 100%;
}
.approvals-sort {
flex-direction: column;
border: 1px solid rgba(250, 250, 250, 0.26);
border-radius: 0.65rem;
overflow: visible;
background: rgba(250, 250, 250, 0.16);
}
.approvals-sort__label {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.55rem 0.1rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.2;
color: rgba(250, 250, 250, 0.62);
border-bottom: 1px solid rgba(250, 250, 250, 0.14);
white-space: nowrap;
}
.approvals-sort__row {
display: inline-flex;
align-items: stretch;
border-radius: 0 0 0.65rem 0.65rem;
/* Must stay visible — the sort picker menu hangs below this row. */
overflow: visible;
}
.approvals-sort__chooser {
position: relative;
z-index: 1;
display: inline-flex;
align-items: stretch;
min-width: 0;
border-radius: 0 0 0 0.6rem;
}
.approvals-sort__chooser:has(.approvals-sort__menu-trigger.is-open),
.approvals-sort__chooser:has([aria-expanded="true"]) {
z-index: 50;
}
.approvals-sort__field,
.approvals-sort__direction,
.approvals-group-by__option {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.32rem 0.6rem;
font-size: 0.8rem;
line-height: 1.2;
color: inherit;
}
.approvals-sort__menu-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.4rem;
border: 0;
border-left: 1px solid rgba(250, 250, 250, 0.16);
background: transparent;
color: inherit;
cursor: pointer;
}
.approvals-sort__menu-trigger:hover,
.approvals-sort__menu-trigger.is-open {
background: rgba(250, 250, 250, 0.08);
}
.approvals-sort__chevron {
width: 0.7rem;
height: 0.7rem;
opacity: 0.75;
}
.approvals-sort__menu {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
z-index: 60;
min-width: max(100%, 9.5rem);
padding: 0.25rem;
border: 1px solid rgba(250, 250, 250, 0.18);
border-radius: 0.55rem;
background: rgba(45, 29, 44, 0.98);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.approvals-sort__menu-option {
display: block;
padding: 0.35rem 0.55rem;
border-radius: 0.35rem;
font-size: 0.8rem;
line-height: 1.25;
color: rgba(250, 250, 250, 0.88);
white-space: nowrap;
}
.approvals-sort__menu-option:hover {
background: rgba(250, 250, 250, 0.08);
}
.approvals-sort__menu-option.is-on {
background: rgba(226, 200, 107, 0.18);
color: #f4e7b0;
font-weight: 600;
}
.approvals-sort__direction {
border-left: 1px solid rgba(250, 250, 250, 0.22);
border-radius: 0 0 0.6rem 0;
font-variant-numeric: tabular-nums;
}
.approvals-sort__field:hover,
.approvals-sort__direction:hover,
.approvals-group-by__option:hover {
background: rgba(250, 250, 250, 0.06);
}
.approvals-kind-icon {
width: 0.95rem;
height: 0.95rem;
flex: none;
opacity: 0.78;
}
.approvals-group-by__option.is-active .approvals-kind-icon,
.approvals-group__title .approvals-kind-icon,
.tracker-card__top .approvals-kind-icon {
opacity: 0.92;
}
/* Grouping control: content-width segments under the heading. */
.approvals-group-by {
flex-direction: column;
border: 1px solid rgba(250, 250, 250, 0.26);
border-radius: 0.65rem;
overflow: hidden;
background: rgba(250, 250, 250, 0.16);
}
.approvals-group-by__heading {
display: block;
padding: 0.22rem 0.55rem;
border-bottom: 1px solid rgba(250, 250, 250, 0.22);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
color: rgba(250, 250, 250, 0.62);
text-align: center;
white-space: nowrap;
}
.approvals-group-by__options {
display: inline-flex;
align-items: stretch;
width: max-content;
max-width: 100%;
}
.approvals-group-by__options .approvals-group-by__option {
flex: none;
justify-content: center;
border-radius: 0;
border-right: 1px solid rgba(250, 250, 250, 0.22);
white-space: nowrap;
}
.approvals-group-by__options .approvals-group-by__option:last-child {
border-right: 0;
}
.approvals-group-by__option.is-active {
background: rgba(226, 200, 107, 0.16);
color: #f4e7b0;
font-weight: 600;
}
.approvals-group-by__option.is-disabled {
color: rgba(250, 250, 250, 0.34);
cursor: not-allowed;
pointer-events: none;
}
.approvals-group-by__option.is-disabled:hover {
background: transparent;
}
.approvals-group-by__note {
margin: 0;
padding: 0.2rem 0.55rem 0.28rem;
border-top: 1px solid rgba(250, 250, 250, 0.14);
font-size: 0.68rem;
line-height: 1.25;
color: rgba(250, 250, 250, 0.55);
}
/* Expenses dropdown — top of the centre toolbar (4.5, 3.4). */
.approvals-expenses-dropdown {
position: relative;
display: inline-flex;
}
.approvals-expenses-dropdown__menu {
position: absolute;
top: calc(100% + 0.3rem);
left: 0;
z-index: 40;
min-width: 10rem;
padding: 0.3rem;
border-radius: 0.5rem;
border: 1px solid rgba(250, 250, 250, 0.16);
background: #2b172b;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.approvals-expenses-dropdown__option {
display: block;
width: 100%;
padding: 0.35rem 0.6rem;
border-radius: 0.35rem;
font-size: 0.8rem;
text-align: left;
color: rgba(250, 250, 250, 0.8);
}
.approvals-expenses-dropdown__option:hover {
background: rgba(250, 250, 250, 0.08);
}
.approvals-expenses-dropdown__option.is-on {
background: rgba(226, 200, 107, 0.18);
color: #f4e7b0;
font-weight: 600;
}
/* Top padding must stay 0: sticky group summaries use top: 0 against this
scrollport, and any padding-top leaves a slit where nested card titles peek.
Inline gutter matches heading/tools so right edges line up. */
.approvals-center__body {
position: relative;
z-index: 1;
flex: 1;
overflow: auto;
padding: 0 var(--approvals-center-gutter) 1.5rem;
background: transparent;
}
.approvals-group:not([open]) > :not(summary) {
display: none;
}
/* Direct frame only — a descendant selector also forced nested closed
frames visible whenever an ancestor card was open. */
.approvals-group[open] > turbo-frame {
display: block;
min-height: 2.5rem;
padding: 0.65rem 0 0.25rem 1.2rem;
border-top: 0;
background: transparent;
}
/* Neutralize UA ::details-content containment so closing an inner card
cannot clip later sibling project shells. Hide the body with the
:not([open]) rule above instead. */
.approvals-group::details-content {
content-visibility: visible;
overflow: visible;
}
.approvals-table {
width: 100%;
/* separate + spacing 0 keeps sticky thead reliable (collapse breaks it). */
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: 0.86rem;
}
.approvals-col--select {
width: 3rem;
}
.approvals-col--flag {
width: 2.8rem;
}
.approvals-col--date {
width: 5.25rem;
}
.approvals-col--staff {
width: 9.5rem;
}
.approvals-col--project {
width: 32%;
}
.approvals-col--hours {
width: 5.5rem;
}
.approvals-col--activity {
width: 8.5rem;
}
.approvals-col--comment {
width: 16%;
}
.approvals-col--status {
width: 6.5rem;
}
.approvals-col--approved-by {
width: 9.5rem;
}
.approvals-table th {
position: sticky;
top: 0;
z-index: 1;
padding: 0.45rem 0.4rem;
text-align: left;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.9);
background-color: #3a2438;
}
.approvals-table tr.approvals-scroll-sentinel td {
padding: 0;
border: 0;
height: 1px;
line-height: 0;
}
.approvals-scroll-sentinel__probe,
.approvals-scroll-sentinel:not(tr) {
display: block;
height: 1px;
overflow: hidden;
}
.approvals-scroll-status {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: rgba(250, 250, 250, 0.55);
}
.approvals-table td {
position: relative;
padding: 0.45rem 0.4rem;
border-top: 1px solid rgba(250, 250, 250, 0.08);
vertical-align: middle;
overflow: hidden;
}
.approvals-table-card {
/*
* One continuous rounded shell (CSS only — never overflow:hidden here;
* that would trap sticky thead). Prefer box-shadow ring over outline —
* outline is not reliably radius-aware and recreated the nested
* square-stroke look. Thead shares the same top radii + header fill so
* resting and stuck chrome read as one curve.
*/
--approvals-table-card-radius: 0.75rem;
--approvals-table-card-border: rgba(186, 157, 196, 0.26);
--approvals-table-header-fill: #3a2438;
margin: var(--approvals-table-rest-gap, 0.55rem) 0 0.55rem;
padding: 0 0 0.4rem;
border: 0;
border-radius: var(--approvals-table-card-radius);
/* Header fill under the top curve; body plum below (row paints cover mid). */
background:
linear-gradient(
var(--approvals-table-header-fill),
var(--approvals-table-header-fill)
)
top / 100% 2.4rem no-repeat,
rgba(53, 35, 51, 0.92);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px var(--approvals-table-card-border);
}
.approvals-table-card .approvals-table {
padding: 0;
}
/* Same radius + fill as the card top — no second border stroke. */
.approvals-table-card thead th {
background-color: var(--approvals-table-header-fill);
box-shadow: none;
}
.approvals-table-card thead th:first-child {
border-top-left-radius: var(--approvals-table-card-radius);
}
.approvals-table-card thead th:last-child {
border-top-right-radius: var(--approvals-table-card-radius);
}
/* Subtle two-tone plum. Hover/focus still wins. Skip sentinel rows. */
.approvals-table tbody tr.approvals-entry-row:nth-child(odd) td {
background: rgba(72, 48, 70, 0.28);
}
.approvals-table tbody tr.approvals-entry-row:nth-child(even) td {
background: rgba(53, 35, 51, 0.12);
}
.approvals-entry-row:hover td,
.approvals-entry-row:focus-within td {
background: rgba(250, 250, 250, 0.06);
}
.approvals-entry-row--time-entry[role="link"] {
cursor: pointer;
}
/* Selected TE row: same subtle plum lift as Browse parent cards. Left bar
only on the first cell (front of the row) — not every column. */
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected > td,
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected:hover > td,
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected:focus-within > td {
background: linear-gradient(180deg, rgb(72, 52, 70) 0%, rgb(60, 42, 58) 100%);
box-shadow: none;
}
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected > td:first-child,
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected:hover > td:first-child,
.approvals-table tbody tr.approvals-entry-row--time-entry.is-selected:focus-within > td:first-child {
box-shadow: inset 0.32rem 0 0 rgba(186, 157, 196, 0.85);
}
.approvals-table tr:hover td {
overflow: visible;
}
.approvals-cell--select,
.approvals-cell--flag,
.approvals-cell--hours,
.approvals-cell--activity,
.approvals-cell--status {
overflow: visible;
}
.approvals-expense-activity {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
.approvals-expense-badge {
display: inline-flex;
align-items: center;
padding: 0.12rem 0.45rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #e2c86b;
background: rgba(226, 200, 107, 0.12);
border: 1px solid rgba(226, 200, 107, 0.35);
white-space: nowrap;
}
.approvals-cell--status .te-status-pill {
justify-content: center;
width: min(100%, 6.2rem);
white-space: nowrap;
}
.approvals-cell__text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
}
/*
* Hover expand: full text overlays the truncated cell in-place (same inset /
* padding as the cell) — not a floating tooltip offset.
*/
/* z-index 2 stays under sticky summary (5/4) and thead (3) so row name
hover expand never paints over sticky parent/nest chrome while scrolling. */
.approvals-cell:hover .approvals-cell__text {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: max-content;
max-width: min(28rem, 70vw);
padding: 0.45rem 0.4rem;
overflow: visible;
white-space: nowrap;
text-overflow: clip;
color: inherit;
background-color: #3a2438;
border-radius: 0.35rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.approvals-cell--date:hover .approvals-cell__text,
.approvals-cell--hours:hover .approvals-cell__text,
.approvals-cell--status:hover .approvals-cell__text {
/* Short columns rarely need expand; keep nowrap without overlay chrome. */
position: static;
width: auto;
max-width: none;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
.approvals-flag-form {
display: inline;
}
.approvals-flag {
padding: 0.15rem 0.4rem;
border-radius: 0.35rem;
font-size: 0.95rem;
line-height: 1;
color: rgba(250, 250, 250, 0.42);
background: transparent;
transition: color 120ms ease, background-color 120ms ease;
}
.approvals-flag__icon {
display: block;
width: 0.95rem;
height: 0.95rem;
}
.approvals-flag__icon-cloth {
fill: none;
}
.approvals-flag:hover {
color: #f0d45f;
background: rgba(226, 200, 107, 0.14);
}
.approvals-flag:focus-visible {
outline: 2px solid #f0d45f;
outline-offset: 1px;
}
/* Selected flags use CDE-accent-hover — the brightest gold in the palette. */
.approvals-flag.is-flagged {
color: #f0d45f;
}
.approvals-flag.is-flagged .approvals-flag__icon-cloth {
fill: currentColor;
}
.approvals-flag.is-flagged:hover {
color: #f0d45f;
background: rgba(240, 212, 95, 0.22);
}
/* Gold means approve, blue means bulk edit. Browse has no checkboxes at all.
Tailwind forms paints [type=checkbox]:checked with currentColor (blue-600)
and restores appearance:auto; beat both so the fill matches the CTA. Gold
fill is CDE-yellow-logo (#E2C86B) — the same token as .btn-golden. */
.approvals-select {
width: 1rem;
height: 1rem;
border-radius: 0.2rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 0.75rem 0.75rem;
flex-shrink: 0;
}
.approvals-select:checked,
.approvals-select:indeterminate {
appearance: none;
-webkit-appearance: none;
}
.approvals-select.approvals-select--gold {
color: #e2c86b;
border: 1.5px solid #e2c86b;
}
.approvals-select.approvals-select--gold:checked,
.approvals-select.approvals-select--gold:checked:hover,
.approvals-select.approvals-select--gold:checked:focus,
.approvals-select.approvals-select--gold:indeterminate,
.approvals-select.approvals-select--gold:indeterminate:hover {
background-color: #e2c86b;
border-color: #e2c86b;
color: #e2c86b;
}
.approvals-select.approvals-select--gold:checked,
.approvals-select.approvals-select--gold:checked:hover,
.approvals-select.approvals-select--gold:checked:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234A3045' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}
.approvals-select.approvals-select--gold:indeterminate,
.approvals-select.approvals-select--gold:indeterminate:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234A3045' stroke-width='2.2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}
.approvals-select.approvals-select--blue {
color: #0076f5;
border: 1.5px solid #0076f5;
}
.approvals-select.approvals-select--blue:checked,
.approvals-select.approvals-select--blue:checked:hover,
.approvals-select.approvals-select--blue:checked:focus,
.approvals-select.approvals-select--blue:indeterminate,
.approvals-select.approvals-select--blue:indeterminate:hover {
background-color: #0076f5;
border-color: #0076f5;
color: #0076f5;
}
.approvals-select.approvals-select--blue:checked,
.approvals-select.approvals-select--blue:checked:hover,
.approvals-select.approvals-select--blue:checked:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FAFAFA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}
.approvals-select.approvals-select--blue:indeterminate,
.approvals-select.approvals-select--blue:indeterminate:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FAFAFA' stroke-width='2.2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}
.approvals-select:focus-visible {
outline: 2px solid #f0d45f;
outline-offset: 2px;
}
.approvals-select--blue:focus-visible {
outline-color: #56a8ff;
}
.approvals-empty {
margin: 1rem 0;
color: rgba(250, 250, 250, 0.65);
}
/* A cleared queue is good news, so it reads as a statement, not a blank. */
.approvals-empty--done {
margin: 2rem auto;
max-width: 30rem;
padding: 1.4rem 1.5rem;
border: 1px solid rgba(226, 200, 107, 0.2);
border-radius: 0.75rem;
background: rgba(226, 200, 107, 0.05);
text-align: center;
font-size: 0.95rem;
color: rgba(250, 250, 250, 0.82);
}
/*
* Nested sticky stack (center viewport only):
* parent summary → nest summary → leaf thead
* Summary min-height matches --approvals-group-summary-height so top offsets
* clear the layers above. Thead sticks under that stack plus
* --approvals-table-rest-gap so stuck chrome keeps the same atmosphere as
* rest (no second sticky-gap var). Table-card is one rounded shell (box-shadow
* ring + matching thead top radii/fill).
* Subtitle line is always reserved. Z-index descends parent → nest → thead.
*/
.approvals-group {
--approvals-sticky-top: 0px;
--approvals-group-summary-height: 5.75rem;
/* Published for nested sticky offset — children read this and must not override it. */
--approvals-for-descendant-sticky: 5.75rem;
/* Left accent bar defaults (overridden per is-kind-* below). */
--approvals-group-accent: rgba(226, 200, 107, 0.68);
--approvals-group-accent-soft: rgba(186, 157, 196, 0.26);
--approvals-group-accent-focus: rgba(226, 200, 107, 0.82);
--approvals-table-rest-gap: 0.55rem;
/* Closed = slight curve; open summary uses --approvals-group-radius-open.
The radius jump is the expand/collapse cue (left accent follows it). */
--approvals-group-radius-closed: 0.4rem;
--approvals-group-radius-open: 0.95rem;
margin: 0 0 0.75rem 0;
border: 1px solid var(--approvals-group-accent-soft);
border-radius: var(--approvals-group-radius-closed);
background: rgba(53, 35, 51, 0.92);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(250, 250, 250, 0.05),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
/* Browser scroll-anchoring fights collapse height changes + our JS pin. */
overflow-anchor: none;
}
/* Kind-keyed left accent — same type always gets the same colour, any nesting. */
.approvals-group.is-kind-client {
--approvals-group-accent: rgba(226, 200, 107, 0.68);
--approvals-group-accent-soft: rgba(226, 200, 107, 0.28);
--approvals-group-accent-focus: rgba(226, 200, 107, 0.82);
}
.approvals-group.is-kind-project {
--approvals-group-accent: rgba(95, 167, 232, 0.68);
--approvals-group-accent-soft: rgba(95, 167, 232, 0.28);
--approvals-group-accent-focus: rgba(95, 167, 232, 0.82);
}
.approvals-group.is-kind-user {
--approvals-group-accent: rgba(127, 203, 139, 0.68);
--approvals-group-accent-soft: rgba(127, 203, 139, 0.28);
--approvals-group-accent-focus: rgba(127, 203, 139, 0.82);
}
.approvals-group.is-kind-client_pm {
--approvals-group-accent: rgba(144, 124, 159, 0.72);
--approvals-group-accent-soft: rgba(144, 124, 159, 0.32);
--approvals-group-accent-focus: rgba(186, 157, 196, 0.85);
}
.approvals-group:hover,
.approvals-group:focus-within {
border-color: var(--approvals-group-accent-soft);
}
/* Tracker cards with chart chrome are taller than the old title/meta shell.
min-height and the nest sticky export must match the real summary height
(~6.55rem project/client, ~7rem client-PM with subtitle) or nested shells
tuck under the parent charts while scrolling / after collapse. */
.approvals-group.is-tracker-project,
.approvals-group.is-tracker-client {
--approvals-group-summary-height: 6.55rem;
}
.approvals-group.is-tracker-client_pm {
--approvals-group-summary-height: 7rem;
}
/* Client / client-PM outer cards publish their tall summary so nested project
shells stick just below the full chart chrome. Do not set this on
is-tracker-project — nested project leaves must inherit the parent export. */
.approvals-group.is-tracker-client {
--approvals-for-descendant-sticky: 6.55rem;
}
.approvals-group.is-tracker-client_pm {
--approvals-for-descendant-sticky: 7rem;
}
.approvals-group .approvals-group {
/* Inherit the open ancestor's published sticky offset — the base
.approvals-group rule would otherwise reset this to 5.75rem and tuck
nested shells under tall client / client-PM tracker chrome. */
--approvals-for-descendant-sticky: inherit;
--approvals-sticky-top: var(--approvals-for-descendant-sticky);
margin: 0.55rem 0 0.7rem 0;
--approvals-group-summary-height: 5.25rem;
/* Same floating-card chrome as the parent — indent comes from the open frame. */
background: rgba(53, 35, 51, 0.92);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(250, 250, 250, 0.05),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
/* Closed: clip the square summary/accent to the slight curve. Open cards
must stay overflow visible so sticky thead / nested cards can dock. */
.approvals-group:not([open]) {
overflow: hidden;
}
/* Open parent is a summary card only — drain the details shell so nested
children sit on the lined centre, not in a plum well. Direct frames stay
transparent; closed nested cards keep the chrome above. */
.approvals-group[open],
.approvals-group .approvals-group[open] {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.approvals-group .approvals-group.is-tracker-project,
.approvals-group .approvals-group.is-tracker-client,
.approvals-group .approvals-group.is-tracker-client_pm {
--approvals-group-summary-height: 6.55rem;
}
.approvals-group > summary {
position: sticky;
top: var(--approvals-sticky-top);
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
box-sizing: border-box;
min-height: var(--approvals-group-summary-height);
padding: 0.7rem 0.95rem;
cursor: pointer;
font-weight: 600;
/* Fully opaque — semi-transparent sticky chrome let row text ghost through. */
background:
linear-gradient(180deg, rgb(59, 41, 57) 0%, rgb(53, 35, 51) 100%);
/* Follow the closed shell so the left accent takes the slight curve. */
border-radius: inherit;
box-shadow:
inset 0.25rem 0 0 var(--approvals-group-accent),
0 1px 0 rgba(250, 250, 250, 0.08);
border-bottom: 1px solid rgba(250, 250, 250, 0.06);
}
.approvals-group .approvals-group > summary {
background:
linear-gradient(180deg, rgb(55, 38, 54) 0%, rgb(47, 31, 48) 100%);
box-shadow:
inset 0.25rem 0 0 var(--approvals-group-accent),
0 1px 0 rgba(250, 250, 250, 0.07);
}
.approvals-group[open] > summary,
.approvals-group .approvals-group[open] > summary {
border: 1px solid var(--approvals-group-accent-soft);
border-radius: var(--approvals-group-radius-open);
box-shadow:
inset 0.25rem 0 0 var(--approvals-group-accent),
0 4px 14px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(250, 250, 250, 0.05),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.approvals-group > summary:focus-visible {
outline: 2px solid var(--approvals-group-accent-focus);
outline-offset: -3px;
}
.approvals-group.is-tracker-project > summary,
.approvals-group.is-tracker-client > summary,
.approvals-group.is-tracker-client_pm > summary {
align-items: stretch;
padding: 0.22rem 0.65rem 0.28rem;
}
/* Browse panel selection: shared subtle plum lift (lighter derivative of the
card bg — not a kind-tinted wash). Kind colour stays on the thicker left
bar + soft outline (blue project / gold client). Not a perimeter ring. */
.approvals-group.is-tracker-project.is-selected > summary,
.approvals-group.is-tracker-client.is-selected > summary {
background: linear-gradient(180deg, rgb(72, 52, 70) 0%, rgb(60, 42, 58) 100%);
box-shadow:
inset 0.32rem 0 0 var(--approvals-group-accent-focus),
0 3px 10px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.approvals-group.is-tracker-project.is-selected[open] > summary {
border-color: var(--approvals-group-accent-soft);
box-shadow:
inset 0.32rem 0 0 var(--approvals-group-accent-focus),
0 4px 14px rgba(0, 0, 0, 0.24),
0 0 0 1px rgba(95, 167, 232, 0.32),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
}
.approvals-group.is-tracker-client.is-selected > summary {
box-shadow:
inset 0.32rem 0 0 #e2c86b,
0 3px 10px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.1);
}
.approvals-group.is-tracker-client.is-selected[open] > summary {
border-color: rgba(226, 200, 107, 0.45);
box-shadow:
inset 0.32rem 0 0 #e2c86b,
0 4px 14px rgba(0, 0, 0, 0.24),
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.12);
}
.approvals-group .approvals-group > summary {
z-index: 4;
}
/* Open tip: raise this card, and drop following sibling cards so their
sticky summaries (z-index 5/4) cannot cover a position:fixed tip.
Nested stays at 4 (below parent summary 5). Previous/parent summaries
are not `~` siblings, so they keep 5/4. */
.approvals-group:has(.hover-detail:not([hidden])) {
position: relative;
z-index: 4;
}
#approvals-group-rows > .approvals-group:has(.hover-detail:not([hidden])) {
z-index: 5;
}
.approvals-group:has(.hover-detail:not([hidden])) ~ .approvals-group {
position: relative;
z-index: 0;
}
.approvals-group:has(.hover-detail:not([hidden])) ~ .approvals-group > summary {
z-index: 0;
}
.approvals-group__title {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
flex: 1 1 10rem;
}
.approvals-group__heading {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.12rem;
/* Always reserve name + subtitle so sticky height matches the CSS var. */
min-height: 2.5rem;
min-width: 0;
}
.approvals-group__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
font-size: 1.08rem;
letter-spacing: 0.01em;
}
.approvals-group__context,
.approvals-group__subtitle {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
color: rgba(226, 200, 107, 0.72);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.approvals-group__check {
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
margin-right: 0.15rem;
}
.approvals-group-select {
width: 1.05rem;
height: 1.05rem;
border-radius: 0.2rem;
cursor: pointer;
}
.approvals-group-select:disabled {
cursor: default;
opacity: 0.22;
filter: grayscale(1);
}
.approvals-group__selected-count {
min-width: 1.1rem;
padding: 0.05rem 0.3rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 600;
line-height: 1.2;
color: rgba(250, 250, 250, 0.72);
background: rgba(250, 250, 250, 0.1);
border: 1px solid rgba(250, 250, 250, 0.12);
text-align: center;
}
.approvals-pie {
position: relative;
flex-shrink: 0;
}
/* Clip layers to the disc so the extreme sphere cannot paint larger than
the donut's outer diameter (outer overage ring inclusive). */
.approvals-pie--donut {
overflow: hidden;
border-radius: 999px;
}
/* Panel default size; card is enlarged so the two-layer donut reads in the stage. */
.approvals-pie--donut:not(.approvals-pie--card):not(.approvals-pie--header) {
width: 2.75rem;
height: 2.75rem;
}
.approvals-pie--card {
width: 3.75rem;
height: 3.75rem;
/* Visible so the ::before hit pad can receive events; paint size is unchanged. */
overflow: visible;
}
/* Invisible hover pad around the card donut — paint stays the same size.
0.45rem stays inside the right instrument column leftover (~0.75rem) so
it does not overlap the middle bar track (column-gap 0.55rem). JS
OUTER_HIT_PAD must match this pad, not claim extra radius. */
.approvals-pie--card::before {
content: "";
position: absolute;
inset: -0.45rem;
border-radius: 999px;
}
/* Card pie: allow slice glow + tip to paint outside the disc while hovered. */
.approvals-pie--card:has(.approvals-pie__grow:not([hidden])),
.approvals-pie--card:focus-within {
overflow: visible;
}
.approvals-pie__grow {
position: absolute;
inset: 6px; /* match .approvals-pie__inner--card */
border-radius: 999px;
pointer-events: none;
z-index: 4;
overflow: visible;
--slice-color: #fafafa;
}
.approvals-pie__grow.is-outer {
inset: 0;
}
.approvals-pie__grow-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.approvals-pie__grow-svg path {
fill: none;
stroke: var(--slice-color, #fafafa);
stroke-width: 0.75px;
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
stroke-linecap: round;
}
.approvals-pie__grow.is-full {
inset: auto;
left: 50%;
top: 50%;
width: 3.125rem;
height: 3.125rem;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 0.75px var(--slice-color);
}
.approvals-pie__grow.is-full .approvals-pie__grow-svg {
display: none;
}
.approvals-pie__tip {
z-index: 2;
min-width: 0;
}
/* Keyboard-only slice focus targets (mouse uses angle hit-testing). */
.approvals-pie__slice-keys {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
list-style: none;
}
.approvals-pie__slice-key {
display: block;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
border: 0;
background: transparent;
}
.approvals-pie__slice-key:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.85);
outline-offset: 2px;
}
/* Outer overage ring — thin, outside the inner donut with a small gap. */
.approvals-pie__outer {
position: absolute;
inset: 0;
border-radius: 999px;
pointer-events: none;
z-index: 1;
-webkit-mask-image: radial-gradient(
farthest-side,
transparent calc(100% - 3.5px),
#000 calc(100% - 3px)
);
mask-image: radial-gradient(
farthest-side,
transparent calc(100% - 3.5px),
#000 calc(100% - 3px)
);
}
.approvals-pie__outer--card,
.approvals-pie__outer--header {
width: 100%;
height: 100%;
}
/* Inner within-budget donut — thicker and dominant; hole via radial mask. */
.approvals-pie__inner {
position: absolute;
/* Leave room for thin outer ring + gap when over; still centered when not. */
inset: 5px;
border-radius: 999px;
border: 1px solid rgba(226, 200, 107, 0.45);
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.22),
inset 0 -2px 5px rgba(0, 0, 0, 0.28);
flex-shrink: 0;
z-index: 2;
-webkit-mask-image: radial-gradient(
farthest-side,
transparent 36%,
#000 37.5%
);
mask-image: radial-gradient(
farthest-side,
transparent 36%,
#000 37.5%
);
}
/* Soft highlight — same family as tracker-dot__inner radial sheen. */
.approvals-pie__inner::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 35% 28%,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.06) 42%,
transparent 68%
);
pointer-events: none;
z-index: 1;
}
.approvals-pie__inner--card {
inset: 6px;
}
/* Project header donut: same layers; inset fills the chrome slot with gap for outer. */
.approvals-pie__inner--header {
inset: 10px;
}
/* Extreme overage (>100% over budget): solid red sphere. Panel/header fill the
pie box; card uses a smaller centered disc (see --card). */
.approvals-pie__extreme {
position: absolute;
inset: 0;
box-sizing: border-box;
border-radius: 999px;
background: radial-gradient(
circle at 35% 28%,
#e0707a 0%,
#c4404d 42%,
#8a2030 100%
);
border: 1px solid rgba(196, 64, 77, 0.65);
/* Inset shading only — an outer drop shadow would inflate past the disc. */
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.28),
inset 0 -2px 5px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.approvals-pie__extreme::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 35% 28%,
rgba(255, 255, 255, 0.32) 0%,
rgba(255, 255, 255, 0.08) 40%,
transparent 68%
);
pointer-events: none;
}
/* Tracker card: 50×50 disc centered in the 3.75rem pie slot so sibling
stages stay aligned (same parent box as the two-layer donut). */
.approvals-pie__extreme--card {
inset: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3.125rem;
height: 3.125rem;
max-width: 100%;
max-height: 100%;
}
.approvals-pie__extreme--header {
inset: 0;
}
.approvals-group__meta {
flex: none;
max-width: 28%;
font-weight: 500;
font-size: 0.78rem;
color: rgba(250, 250, 250, 0.62);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tracker group-card charts */
.tracker-card {
display: flex;
flex-direction: column;
gap: 0.12rem;
flex: 1 1 auto;
align-self: stretch;
min-width: 0;
min-height: 0;
width: 100%;
}
.tracker-card__top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.4rem;
flex: 0 0 auto;
min-width: 0;
padding-bottom: 0.05rem;
}
/* The gold selection sits on the identity line, with the warning triangle kept
away from it — two yellows next to each other would read as one control. */
.tracker-card__top .approvals-group__check {
margin-right: 0.1rem;
}
.tracker-card__top .tracker-card__warning {
margin-left: 0.35rem;
}
/* Caution tone, not the approval gold: this card carries gold checkboxes. */
.tracker-card__warning {
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex: 0 0 auto;
padding: 0.1rem 0.4rem 0.1rem 0.3rem;
border: 1px solid rgba(215, 179, 51, 0.45);
border-radius: 0.35rem;
background: rgba(215, 179, 51, 0.12);
font-size: 0.68rem;
font-weight: 600;
line-height: 1.2;
color: #e8cf7a;
cursor: default;
}
.tracker-card__warning-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 14rem;
}
.tracker-card__count {
flex: 0 0 auto;
margin-left: auto;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
color: rgba(250, 250, 250, 0.62);
}
.tracker-card__count.is-empty {
font-weight: 500;
font-style: italic;
color: rgba(250, 250, 250, 0.4);
}
.tracker-card__identity-stack {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.08rem;
flex: 1 1 auto;
min-width: 0;
}
.tracker-card__identity-stack .tracker-card__identity {
flex: 0 1 auto;
}
.tracker-card__identity-stack .approvals-group__subtitle {
max-width: 100%;
}
.tracker-card__identity {
position: relative;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
margin-left: 0;
text-align: left;
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.25;
color: rgba(250, 250, 250, 0.92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
outline: none;
}
.tracker-card__top .approvals-kind-icon {
width: 1.05rem;
height: 1.05rem;
/* Optical nudge only for the SVG stroke icons — logos use true center. */
margin-top: 0.1rem;
}
/* Client card logo: fixed square, horizontally beside + vertically centered
with the name (`.tracker-card__top` / `.approvals-group__title` flex). */
.tracker-client-logo,
.tracker-user-avatar {
display: inline-flex;
flex: none;
align-items: center;
align-self: center;
min-width: 0;
border-radius: 9999px;
outline: none;
}
.tracker-client-logo:focus-visible,
.tracker-user-avatar:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.75);
outline-offset: 2px;
}
.tracker-card__top .tracker-card__logo.profile-image,
.approvals-group__title .tracker-card__logo.profile-image {
width: 1.55rem;
height: 1.55rem;
flex: none;
margin: 0;
align-self: center;
}
.tracker-card__top .tracker-card__logo .profile-image__img,
.approvals-group__title .tracker-card__logo .profile-image__img {
object-fit: contain;
background: rgba(30, 18, 30, 0.35);
}
/* Staff avatar placeholders on user cards — cover the circle like TE thumbs. */
.tracker-card__top .tracker-card__logo.profile-image--user-placeholder,
.approvals-group__title .tracker-card__logo.profile-image--user-placeholder {
overflow: hidden;
}
.tracker-card__top .tracker-card__logo .user-avatar-placeholder__initials,
.approvals-group__title .tracker-card__logo .user-avatar-placeholder__initials {
font-size: 0.45rem;
}
/* :not([hidden]) so author `display` does not override the [hidden] UA rule —
otherwise tip.hidden = true leaves the logo preview painted on screen. */
.hover-detail--logo:not([hidden]) {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
max-width: min(14rem, calc(100vw - 1.5rem));
padding: 0.75rem 0.85rem 0.8rem;
border-radius: 0.85rem;
white-space: normal;
}
.hover-detail__logo {
display: block;
width: 7.5rem;
height: 7.5rem;
object-fit: contain;
border-radius: 9999px;
background:
radial-gradient(circle at 32% 28%, rgba(250, 250, 250, 0.16), transparent 58%),
#3b2939;
box-shadow:
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.hover-detail__logo-name {
font-size: 0.82rem;
font-weight: 650;
color: #4a3045;
text-align: center;
}
.approvals-group__title .approvals-kind-icon {
width: 1.1rem;
height: 1.1rem;
}
.tracker-charts {
display: flex;
align-items: center;
gap: 0.45rem;
flex: 0 1 auto;
min-width: 0;
}
/* Card charts: three sibling tracks (dot | bars | donut/YTD) share widths
across cards via --tracker-charts-left/right (see tracker-charts-align).
Middle 1fr flexes bar-column spacing; instruments stay stable. */
.tracker-charts.tracker-charts--card,
.tracker-charts.tracker-charts--project,
.tracker-charts.tracker-charts--client {
display: grid;
grid-template-columns:
var(--tracker-charts-left, minmax(5.25rem, max-content))
minmax(0, 1fr)
var(--tracker-charts-right, minmax(5.25rem, max-content));
column-gap: 0.55rem;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
width: 100%;
margin-top: auto;
}
/* Left/right card instruments: fill title→bottom; stage grows; stats pin bottom. */
.tracker-instrument {
display: flex;
flex-direction: column;
align-items: stretch;
align-self: stretch;
min-width: 0;
min-height: 0;
width: 100%;
flex: 0 0 auto;
outline: none;
}
.tracker-instrument__stage {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
min-width: 2.4rem;
}
.tracker-instrument__stats {
display: grid;
grid-template-columns: auto auto;
column-gap: 0.35rem;
row-gap: 0.04rem;
justify-content: start;
margin: auto 0 0;
padding: 0.04rem 0 0;
flex: 0 0 auto;
}
.tracker-instrument__stats--stacked {
display: block;
width: 100%;
}
.tracker-instrument__stat {
display: contents;
}
/* Stacked Projected / Remaining: amount vertically centered beside the two lines. */
.tracker-instrument__stat--stacked {
display: grid;
grid-template-columns: auto auto;
column-gap: 0.35rem;
align-items: center;
justify-content: start;
width: max-content;
max-width: 100%;
}
.tracker-instrument__stat dt,
.tracker-instrument__stat dd {
margin: 0;
text-align: left;
}
.tracker-charts__caption-label--stack {
display: flex;
flex-direction: column;
gap: 0.02rem;
line-height: 1.15;
}
.tracker-instrument__stat--stacked .tracker-charts__caption-amount {
align-self: center;
}
.tracker-dot {
position: relative;
width: var(--tracker-dot-graph, var(--tracker-dot-outer, 1.5rem));
height: var(--tracker-dot-graph, var(--tracker-dot-outer, 1.5rem));
flex-shrink: 0;
outline: none;
}
.tracker-dot__graph {
position: relative;
display: block;
width: 100%;
height: 100%;
flex-shrink: 0;
overflow: visible;
}
.tracker-dot__outer,
.tracker-dot__inner {
position: absolute;
border-radius: 999px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tracker-dot__outer {
/* Full budget disc — faint fill so the larger circle still reads as
“started this big”. Gold outline is ::after above the Remaining fill. */
width: var(--tracker-dot-outer, 1.5rem);
height: var(--tracker-dot-outer, 1.5rem);
border: none;
background: rgba(226, 200, 107, 0.14);
box-shadow: inset 0 0 0 1px rgba(74, 48, 69, 0.28);
z-index: 1;
}
.tracker-dot__inner {
/* Remaining — shrinks inside the budget disc as approved spend grows. */
width: var(--tracker-dot-inner, 0.75rem);
height: var(--tracker-dot-inner, 0.75rem);
background: radial-gradient(circle at 35% 30%, #e2c86b 0%, #d7b333 55%, #4a3045 100%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
z-index: 2;
}
/* Gold budget outline above Remaining so a near-full inner cannot erase it. */
.tracker-dot__graph::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--tracker-dot-outer, 1.5rem);
height: var(--tracker-dot-outer, 1.5rem);
border-radius: 999px;
border: 1.5px solid rgba(226, 200, 107, 0.95);
background: transparent;
z-index: 3;
pointer-events: none;
}
/* Semi-transparent overlay so overage past the budget ring stays readable. */
.tracker-dot.is-over .tracker-dot__inner {
background: radial-gradient(
circle at 35% 30%,
rgba(240, 120, 110, 0.72) 0%,
rgba(180, 55, 70, 0.55) 55%,
rgba(120, 40, 55, 0.45) 100%
);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.tracker-charts__caption-label {
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.72);
}
.tracker-charts__caption-amount {
font-size: 0.62rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.88);
white-space: nowrap;
}
.tracker-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 1.2rem;
padding: 0.1rem 0.15rem 0;
flex-shrink: 0;
}
.tracker-bars--labeled {
flex: 1 1 auto;
align-items: stretch;
align-self: stretch;
gap: 0.1rem;
height: auto;
min-width: 0;
min-height: 0;
padding: 0;
}
.tracker-bars__col {
position: relative;
display: flex;
align-items: flex-end;
width: 0.32rem;
height: 100%;
outline: none;
}
.tracker-bars--labeled .tracker-bars__col {
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.06rem;
width: auto;
min-width: 0;
}
.tracker-bars__track {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
min-height: 0;
}
.tracker-bars--labeled .tracker-bars__track {
flex: 1 1 auto;
width: 0.85rem;
max-width: 0.85rem;
min-height: 0.95rem;
}
.tracker-bars__fill {
display: block;
width: 100%;
height: var(--tracker-bar-h, 0%);
min-height: 0;
border-radius: 1px 1px 0 0;
background: linear-gradient(180deg, rgba(226, 200, 107, 0.95) 0%, rgba(114, 81, 131, 0.85) 100%);
}
.tracker-bars__col.is-hover-shown .tracker-bars__fill,
.tracker-bars__col:focus-visible .tracker-bars__fill {
box-shadow: 0 0 0 0.75px #fafafa;
}
.tracker-bars__meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.02rem;
width: 100%;
min-width: 0;
flex-shrink: 0;
}
.tracker-bars__amount,
.tracker-bars__label {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-weight: 500;
line-height: 1.05;
}
.tracker-bars__label {
font-size: 0.58rem;
color: rgba(226, 200, 107, 0.86);
}
.tracker-bars__amount {
font-size: 0.56rem;
color: rgba(250, 250, 250, 0.82);
}
/* Client/PM end-slot: solid revenue disc — diameter from --tracker-ytd-px
only (YTD peer √ → YTD_DISC_MAX_PX ≈ 30). Never --tracker-dot-outer /
left budget layout. No max-width/height hard-cap (compact-cards once
lowered Ruby max to 18px; CSS must not reintroduce that). */
.tracker-charts__revenue-disc {
display: block;
box-sizing: border-box;
width: var(--tracker-ytd-px, 1.875rem);
height: var(--tracker-ytd-px, 1.875rem);
max-width: none;
max-height: none;
flex-shrink: 0;
border-radius: 999px;
background: radial-gradient(circle at 35% 30%, #e2c86b 0%, #d7b333 55%, #4a3045 100%);
border: 1px solid rgba(250, 250, 250, 0.32);
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.35),
inset 0 1px 2px rgba(255, 255, 255, 0.14);
}
.tracker-charts__placeholders {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.65rem;
max-width: 16rem;
font-size: 0.7rem;
font-weight: 500;
color: rgba(250, 250, 250, 0.72);
outline: none;
}
.tracker-charts__stat-label {
color: rgba(226, 200, 107, 0.7);
margin-right: 0.2rem;
}
.hover-detail {
position: fixed;
/* Portaled to body — sit above sticky group summaries / thead (z 3–5). */
z-index: 40;
isolation: isolate;
/* Own compositor layer — blur stays on this small chip, not the page. */
transform: translateZ(0);
contain: paint;
min-width: 0;
max-width: 16.5rem;
padding: 0.45rem 0.7rem 0.5rem;
border-radius: 0.55rem;
/*
* Bright cream frost over dark Tracker chrome. Heavy transparency greys
* out (blur mixes the plum through); keep fill mostly opaque and use a
* light blur for polish only — cheap on a small tip.
*/
background: rgba(250, 250, 250, 0.9);
border: 0.75px solid rgba(250, 250, 250, 0.78);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #4a3045;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.01em;
pointer-events: none;
white-space: nowrap;
}
.hover-detail__line + .hover-detail__line {
margin-top: 0.12rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.hover-detail__heading {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6a4864;
}
.hover-detail__heading + .hover-detail__line,
.hover-detail__heading + .hover-detail__heading {
margin-top: 0.28rem;
}
.hover-detail--list {
max-width: 22rem;
white-space: normal;
max-height: min(70vh, 26rem);
overflow: auto;
/* Chart tips stay pointer-events: none; a portaled list must accept scroll. */
pointer-events: auto;
}
.hover-detail--list .hover-detail__line {
font-weight: 500;
}
.hover-detail--person {
max-width: 22rem;
white-space: normal;
padding: 0.85rem 0.95rem 0.9rem;
border-radius: 0.85rem;
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(74, 48, 69, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.hover-detail__person-head {
display: flex;
align-items: center;
gap: 0.85rem;
}
.hover-detail__avatar {
display: grid;
place-items: center;
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
overflow: hidden;
color: #e2c86b;
object-fit: cover;
background:
radial-gradient(circle at 32% 28%, rgba(250, 250, 250, 0.16), transparent 58%),
#3b2939;
box-shadow:
0 0 0 1px rgba(226, 200, 107, 0.38),
inset 0 1px 0 rgba(250, 250, 250, 0.14);
}
.hover-detail__avatar .user-avatar-placeholder__initials {
font-size: 1rem;
letter-spacing: 0.02em;
}
img.hover-detail__avatar {
display: block;
background: #3b2939;
}
.hover-detail__person-identity {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.hover-detail__person-name {
font-size: 1.15rem;
font-weight: 650;
color: #4a3045;
line-height: 1.25;
}
.hover-detail__person-designation {
font-size: 0.95rem;
font-weight: 500;
color: #6a4864;
line-height: 1.3;
}
.hover-detail__person-email {
display: flex;
align-items: center;
gap: 0.28rem;
min-width: 0;
font-size: 0.72rem;
font-weight: 500;
color: #6a4864;
line-height: 1.25;
}
.hover-detail__person-email span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hover-detail__email-icon {
flex-shrink: 0;
width: 0.85rem;
height: 0.85rem;
color: #8a647f;
}
.hover-detail__person-notes {
margin-top: 0.65rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(74, 48, 69, 0.12);
display: flex;
flex-direction: column;
gap: 0.32rem;
}
.hover-detail__note {
font-size: 0.9rem;
font-weight: 500;
color: #6a4864;
line-height: 1.35;
white-space: normal;
}
.hover-detail--person .hover-detail__heading {
margin-top: 0.45rem;
}
.hover-detail--person .hover-detail__line {
font-weight: 500;
white-space: normal;
}
/* Dock under the summary stack with rest-gap, then 3px closer so the
atmosphere sliver stays visible without the header sitting too low. */
.approvals-group .approvals-table-card thead th {
position: sticky;
top: calc(var(--approvals-sticky-top) + var(--approvals-group-summary-height) + var(--approvals-table-rest-gap, 0.55rem) - 3px);
z-index: 3;
background-color: var(--approvals-table-header-fill, #3a2438);
}
.approvals-decision {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgba(43, 23, 43, 0.78);
box-shadow: inset 1px 0 0 rgba(250, 250, 250, 0.06);
}
/* Browse project Info/Access panel — same chrome family as Decision, but a
separate slot so Flagged/Approve never share it. */
.approvals-project-panel {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
overflow: hidden;
background: rgba(43, 23, 43, 0.78);
box-shadow: inset 1px 0 0 rgba(250, 250, 250, 0.06);
}
.approvals-project-panel:not(.is-open) {
border: 0;
box-shadow: none;
background: transparent;
overflow: hidden;
}
#tracker-project-panel,
#tracker-time-entry-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
min-width: 0;
height: 100%;
}
/* Hide the idle sibling so entity vs TE never paint stacked in the aside. */
#tracker-project-panel:not(:has(*)),
#tracker-time-entry-panel:not(:has(*)) {
display: none;
}
.approvals-project-panel__inner {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 0.65rem;
min-height: 0;
height: 100%;
padding: 0.7rem 0.75rem 1rem;
overflow: hidden;
}
.approvals-project-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
flex-shrink: 0;
}
.approvals-project-panel__heading {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
flex: 1 1 auto;
}
.approvals-project-panel__logo.profile-image {
width: 2rem;
height: 2rem;
flex: none;
}
.approvals-project-panel__logo .profile-image__img {
object-fit: contain;
background: rgba(30, 18, 30, 0.35);
}
.approvals-project-panel__titles {
min-width: 0;
}
.approvals-project-panel__title {
margin: 0;
font-size: 0.98rem;
font-weight: 650;
line-height: 1.25;
color: rgba(250, 250, 250, 0.94);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.approvals-project-panel__client {
margin: 0.15rem 0 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.78);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.approvals-project-panel__close {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border-radius: 0.4rem;
border: 1px solid rgba(186, 157, 196, 0.28);
background: rgba(30, 18, 30, 0.45);
color: rgba(250, 250, 250, 0.82);
font-size: 1.25rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.approvals-project-panel__close:hover {
color: #f4e7b0;
border-color: rgba(226, 200, 107, 0.45);
}
.approvals-project-panel__close:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.75);
outline-offset: 2px;
}
.approvals-project-panel__cards {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 0.65rem;
min-height: 0;
overflow: hidden;
}
/* TE panel: three cards scroll as one stack inside the 22.5rem aside. */
.approvals-project-panel__cards--te {
overflow-x: hidden;
overflow-y: auto;
gap: 0.55rem;
}
.approvals-project-panel .te-modal--panel {
gap: 0.55rem;
padding-bottom: 0.15rem;
}
.approvals-project-panel .te-modal--panel .te-modal__main {
display: flex;
flex-direction: column;
gap: 0.55rem;
align-items: stretch;
}
.approvals-project-panel .te-modal--panel .te-modal__main > .te-modal-card {
height: auto;
}
.approvals-project-panel .te-modal--panel .te-modal-card {
flex: 0 0 auto;
padding: 0.8rem 0.85rem 0.9rem;
}
.approvals-project-panel .te-modal--panel .te-modal-card__title--entry {
font-size: 1.02rem;
}
.approvals-project-panel .te-modal--panel .te-modal-card__list--split {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.approvals-project-panel .te-modal--panel .te-modal__footer {
flex-shrink: 0;
padding-top: 0.25rem;
}
.approvals-project-panel .te-modal--panel .te-modal__btn {
min-height: 2rem;
padding: 0.35rem 0.7rem;
font-size: 0.78rem;
}
.approvals-project-panel__frame {
display: flex;
flex: 1 1 0;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.approvals-project-panel__frame > .cp-section-card,
.approvals-project-panel__frame > .approvals-project-panel__skeleton {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
max-height: none;
overflow: hidden;
width: 100%;
}
.approvals-project-panel__frame > .cp-section-card > .cp-section-card__body,
.approvals-project-panel__frame > .cp-section-card > .cp-access-groups,
.approvals-project-panel__skeleton > .cp-section-card__body {
overflow-y: auto;
overscroll-behavior: contain;
min-height: 0;
}
.approvals-project-panel__loading {
margin: 0 0 0.55rem;
font-size: 0.78rem;
font-weight: 600;
color: rgba(250, 250, 250, 0.72);
}
.approvals-project-panel__skeleton-lines {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.approvals-project-panel__skeleton-lines > span {
display: block;
height: 0.7rem;
border-radius: 0.3rem;
background: linear-gradient(
90deg,
rgba(250, 250, 250, 0.06),
rgba(226, 200, 107, 0.14),
rgba(250, 250, 250, 0.06)
);
background-size: 200% 100%;
animation: approvals-project-panel-shimmer 1.1s linear infinite;
}
.approvals-project-panel__skeleton-lines > span:nth-child(2) {
width: 82%;
}
.approvals-project-panel__skeleton-lines > span:nth-child(3) {
width: 64%;
}
@keyframes approvals-project-panel-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Narrow panel / phone: Access head stacks title → Add staff → open-to-all.
Wide Clients/Projects Project show keeps the side-by-side head. */
.approvals-project-panel #cp-card-access .cp-section-card__head {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 0.45rem;
}
.approvals-project-panel #cp-card-access .cp-section-card__head .cp-section-card__title {
order: 1;
flex: 0 0 auto;
}
.approvals-project-panel #cp-card-access .cp-access-add-form {
order: 2;
flex: 1 1 auto;
max-width: none;
width: 100%;
}
.approvals-project-panel #cp-card-access .cp-switch {
order: 3;
align-self: flex-start;
}
.approvals-project-panel .cp-access-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.approvals-project-panel .cp-info-list__row {
grid-template-columns: 6.75rem minmax(0, 1fr);
gap: 0.45rem;
font-size: 0.8rem;
}
.approvals-decision__title {
margin: 0;
padding: 0.7rem 0.85rem 0.15rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.approvals-decision__body {
flex: 1;
overflow: auto;
padding: 0.35rem 0.85rem 1.25rem;
}
.approvals-decision__body > .approvals-decision__title {
padding: 0.85rem 0 0.2rem;
}
.approvals-decision .approvals-approve-bar {
margin: 0 0 0.35rem;
}
.approvals-decision .approvals-stats {
margin-top: 0.15rem;
}
.approvals-decision__lead {
margin: 0 0 0.85rem;
font-size: 0.84rem;
color: rgba(250, 250, 250, 0.75);
}
.approvals-fields {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.approvals-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
margin-top: 0.85rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(250, 250, 250, 0.1);
}
.approvals-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.75rem;
}
.approvals-field--check {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.15rem 0.45rem;
padding-bottom: 0.2rem;
}
.approvals-field--check .approvals-field__hint {
grid-column: 2;
margin: 0;
}
.approvals-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
margin-top: 0.85rem;
}
.approvals-facts__scope {
grid-column: 1 / -1;
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.85);
}
.approvals-fact {
padding: 0.5rem 0.55rem;
border-radius: 0.5rem;
background: rgba(250, 250, 250, 0.05);
}
.approvals-fact--wide {
grid-column: 1 / -1;
}
.approvals-fact h3 {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.62);
}
.approvals-fact__value {
margin: 0.15rem 0 0;
font-size: 1.05rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.approvals-fact__note {
margin: 0.2rem 0 0;
font-size: 0.72rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.62);
}
.approvals-wip {
margin-top: 1rem;
padding: 0.7rem 0.75rem;
border: 1px dashed rgba(226, 200, 107, 0.45);
border-radius: 0.55rem;
background: rgba(226, 200, 107, 0.06);
}
.approvals-wip h3 {
margin: 0 0 0.2rem;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.9);
}
.approvals-wip p,
.approvals-wip--inline {
margin: 0;
font-size: 0.8rem;
color: rgba(250, 250, 250, 0.7);
}
.approvals-wip--inline {
margin-top: 0.5rem;
}
.approvals-selection-bar {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.approvals-selection-bar__count {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.approvals-selection-bar__status,
.approvals-selection-bar__note,
.approvals-stat-card__note {
margin: 0;
font-size: 0.75rem;
line-height: 1.35;
color: rgba(250, 250, 250, 0.68);
}
.approvals-selection-bar__actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.approvals-selection-bar__actions form {
margin: 0;
}
.approvals-stats {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: 0.85rem;
}
.approvals-stat-card {
padding: 0.55rem 0.6rem;
border-radius: 0.5rem;
background: rgba(250, 250, 250, 0.05);
}
.approvals-stat-card h3 {
margin: 0;
font-size: 0.82rem;
}
.approvals-stat-card__status {
margin: 0.1rem 0 0;
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.approvals-stat-card__main {
display: flex;
align-items: center;
gap: 0.55rem;
}
.approvals-stat-card__money {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem 0.6rem;
margin: 0.45rem 0 0;
}
.approvals-stat-card__money dt {
margin: 0;
font-size: 0.65rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.55);
}
.approvals-stat-card__money dd {
margin: 0;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
}
/* Shared dual-calendar date range picker (Approvals rail first consumer). */
.date-range-picker {
position: relative;
margin: 0.25rem 0 0.35rem;
}
.date-range-picker__trigger {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
gap: 0.35rem;
width: 100%;
margin: 0;
padding: 0.32rem 0.45rem;
border: 1px solid rgba(250, 250, 250, 0.12);
border-radius: 0.45rem;
background: rgba(250, 250, 250, 0.04);
color: inherit;
text-align: left;
cursor: pointer;
}
/* Beat shared dropdown open chrome (bg-CDE-surface-hover) on dark rails. */
.date-range-picker__trigger:hover,
.date-range-picker [data-dropdown-target="button"].is-open,
.date-range-picker [data-dropdown-target="button"][aria-expanded="true"] {
background: rgba(250, 250, 250, 0.08);
}
.date-range-picker.is-active .date-range-picker__trigger {
border-color: rgba(226, 200, 107, 0.45);
background: rgba(226, 200, 107, 0.12);
}
.date-range-picker.is-active [data-dropdown-target="button"].is-open,
.date-range-picker.is-active [data-dropdown-target="button"][aria-expanded="true"] {
background: rgba(226, 200, 107, 0.18);
}
.date-range-picker__trigger:focus-visible {
outline: 2px solid #e2c86b;
outline-offset: 2px;
}
.date-range-picker__label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.85);
}
.date-range-picker__summary {
flex: 1 1 auto;
min-width: 0;
font-size: 0.7rem;
line-height: 1.2;
color: rgba(250, 250, 250, 0.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.date-range-picker__caption {
flex: none;
font-size: 0.62rem;
line-height: 1.2;
color: rgba(250, 250, 250, 0.55);
white-space: nowrap;
}
.date-range-picker__caption.is-empty {
display: none;
}
.date-range-picker__panel {
position: fixed;
z-index: 60;
width: min(40rem, calc(100vw - 1.5rem));
padding: 0.85rem 1rem 0.75rem;
border: 1px solid rgba(250, 250, 250, 0.14);
border-radius: 0.6rem;
background: #2b172b;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
color: #fafafa;
}
/* Single-date panel: mockup chrome (SELECTED DATE + Done).
Keep these overrides AFTER shared .date-range-picker__bound* rules
so flex-direction / day sizing win the cascade. */
.date-range-picker__panel--single {
z-index: 90;
box-sizing: border-box;
width: 22.5rem;
max-width: calc(100vw - 1.5rem);
padding: 0.9rem 1rem 0.85rem;
border-radius: 0.9rem;
border-color: rgba(226, 200, 107, 0.2);
background: #2a172a;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* While a Project Information / Staff Designations date field is open, let
the fixed panel paint past the card's overflow clip (body scroll still
works when closed). Raise the host so Recent Activity cannot cover it. */
#cp-card-information:has(.date-range-picker [aria-expanded="true"]),
#cp-card-information:has(.date-range-picker [aria-expanded="true"]) > .cp-section-card__body,
#cp-card-designations:has(.date-range-picker [aria-expanded="true"]),
#cp-card-designations:has(.date-range-picker [aria-expanded="true"])
turbo-frame#user_designations,
#cp-card-designations:has(.date-range-picker [aria-expanded="true"]) .cp-designations-body {
overflow: visible;
}
#cp-card-designations:has(.date-range-picker [aria-expanded="true"]) {
position: relative;
z-index: 40;
}
.date-range-picker--field .date-range-picker__panel {
z-index: 90;
}
/* Form-field chrome: looks like .input-field, opens the shared calendar. */
.date-range-picker--field {
position: relative;
display: inline-flex;
min-width: 12rem;
max-width: 100%;
z-index: 1;
}
.date-range-picker--field:has([data-dropdown-target="button"][aria-expanded="true"]) {
z-index: 6;
}
.date-range-picker--field .date-range-picker__trigger {
width: 100%;
min-height: 2.35rem;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(186, 157, 196, 0.42);
border-radius: 0.5rem;
background: rgba(45, 29, 44, 0.92);
gap: 0.45rem;
align-items: center;
}
.date-range-picker--field .date-range-picker__trigger:hover,
.date-range-picker--field [data-dropdown-target="button"].is-open,
.date-range-picker--field [data-dropdown-target="button"][aria-expanded="true"] {
background: rgba(61, 40, 58, 0.96);
border-color: rgba(226, 200, 107, 0.55);
}
.date-range-picker--field.is-active .date-range-picker__trigger,
.date-range-picker--field.is-active [data-dropdown-target="button"].is-open,
.date-range-picker--field.is-active [data-dropdown-target="button"][aria-expanded="true"] {
border-color: rgba(226, 200, 107, 0.72);
background: rgba(45, 29, 44, 0.96);
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.12);
}
.date-range-picker--field .date-range-picker__summary {
flex: 1 1 auto;
min-width: 0;
font-size: 0.875rem;
font-weight: 500;
color: #fafafa;
}
.date-range-picker--field:not(.is-active) .date-range-picker__summary {
color: rgba(250, 250, 250, 0.48);
}
.date-range-picker--field .date-range-picker__chevron {
margin-left: auto;
}
.date-range-picker__chevron {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
color: #e2c86b;
}
.date-range-picker__bounds {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.75rem 1.25rem;
align-items: end;
margin: 0 0 0.85rem;
padding: 0.55rem 0.65rem;
border: 1px solid rgba(250, 250, 250, 0.1);
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.18);
}
.date-range-picker__bound {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.date-range-picker__bound-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.9);
}
.date-range-picker__bound-value {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.25;
font-variant-numeric: tabular-nums;
color: #fafafa;
}
.date-range-picker__bound-sep {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 0.15rem;
color: rgba(226, 200, 107, 0.75);
}
.date-range-picker__bound-arrow {
font-size: 1rem;
font-weight: 600;
}
.date-range-picker__calendars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
column-gap: 2.5rem;
}
.date-range-picker__calendar {
min-width: 0;
}
.date-range-picker__calendar + .date-range-picker__calendar {
padding-left: 2.5rem;
border-left: 1px solid rgba(250, 250, 250, 0.12);
}
.date-range-picker__cal-heading {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.85);
}
.date-range-picker__cal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
margin-bottom: 0.35rem;
}
.date-range-picker__cal-title {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
}
.date-range-picker__year {
max-width: 4.6rem;
padding: 0.1rem 0.2rem;
border: 1px solid rgba(250, 250, 250, 0.18);
border-radius: 0.3rem;
background: rgba(0, 0, 0, 0.25);
color: inherit;
font-size: 0.75rem;
}
.date-range-picker__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border: 0;
border-radius: 0.35rem;
background: transparent;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.date-range-picker__nav:hover {
background: rgba(250, 250, 250, 0.08);
}
.date-range-picker__weekdays,
.date-range-picker__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.1rem;
}
.date-range-picker__weekdays {
margin-bottom: 0.15rem;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.45);
text-align: center;
}
.date-range-picker__day {
display: inline-flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0.3rem;
background: transparent;
color: inherit;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.date-range-picker__day.is-empty {
visibility: hidden;
pointer-events: none;
}
.date-range-picker__day:hover {
background: rgba(250, 250, 250, 0.1);
}
.date-range-picker__day.is-today {
box-shadow: inset 0 0 0 1px rgba(226, 200, 107, 0.55);
}
.date-range-picker__day.is-in-range {
background: rgba(226, 200, 107, 0.16);
}
.date-range-picker__day.is-start,
.date-range-picker__day.is-end {
background: #e2c86b;
color: #2b172b;
font-weight: 700;
}
.date-range-picker__presets {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.85rem;
}
.date-range-picker__preset {
margin: 0;
padding: 0.28rem 0.55rem;
border: 1px solid rgba(250, 250, 250, 0.14);
border-radius: 0.45rem;
background: rgba(250, 250, 250, 0.05);
color: inherit;
font-size: 0.72rem;
cursor: pointer;
}
.date-range-picker__preset:hover {
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.35);
}
.date-range-picker__preset.is-on {
border-color: rgba(226, 200, 107, 0.45);
background: rgba(226, 200, 107, 0.16);
color: #f5e6a8;
}
.date-range-picker__ongoing {
display: flex;
justify-content: center;
margin-top: 0.65rem;
}
.date-range-picker__ongoing-btn {
min-width: 6.5rem;
}
.approvals-budget-threshold {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
margin: 0.15rem 0 0.35rem;
max-width: 100%;
}
.approvals-budget-threshold__row {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.35rem;
max-width: 100%;
}
.approvals-budget-threshold__segment {
display: inline-flex;
flex: none;
border: 1px solid rgba(250, 250, 250, 0.22);
border-radius: 0.4rem;
overflow: hidden;
}
.approvals-budget-threshold__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
padding: 0.28rem 0.45rem;
font-size: 0.78rem;
line-height: 1.2;
color: rgba(250, 250, 250, 0.78);
border-right: 1px solid rgba(250, 250, 250, 0.16);
}
.approvals-budget-threshold__option:last-child {
border-right: 0;
}
.approvals-budget-threshold__option:hover {
background: rgba(250, 250, 250, 0.06);
}
.approvals-budget-threshold__option.is-on {
background: rgba(226, 200, 107, 0.16);
color: #f4e7b0;
font-weight: 600;
}
.approvals-budget-threshold__value {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
border: 1px solid rgba(250, 250, 250, 0.22);
border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.approvals-budget-threshold__prefix,
.approvals-budget-threshold__suffix {
flex: none;
padding: 0 0.35rem;
font-size: 0.75rem;
color: rgba(250, 250, 250, 0.55);
}
.approvals-budget-threshold__input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
padding: 0.28rem 0.4rem;
border: 0;
background: transparent;
color: rgba(250, 250, 250, 0.92);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.approvals-budget-threshold__input::placeholder {
color: rgba(250, 250, 250, 0.35);
}
.approvals-budget-threshold__input:focus {
outline: none;
}
.approvals-budget-threshold__value:focus-within {
border-color: rgba(226, 200, 107, 0.55);
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.25);
}
.approvals-budget-threshold__apply {
flex: none;
padding: 0.28rem 0.6rem;
border: 1px solid rgba(226, 200, 107, 0.4);
border-radius: 0.4rem;
background: rgba(226, 200, 107, 0.14);
color: #f4e7b0;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
}
.approvals-budget-threshold__apply:hover {
background: rgba(226, 200, 107, 0.22);
}
.approvals-budget-threshold__apply:focus-visible {
outline: 2px solid #e2c86b;
outline-offset: 2px;
}
.approvals-status-menu {
position: relative;
display: inline-flex;
max-width: 100%;
}
.approvals-status-menu.is-disabled {
opacity: 0.5;
}
.approvals-status-menu.is-disabled .approvals-status-menu__trigger {
cursor: not-allowed;
}
.approvals-status-menu__trigger {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
/* Open trigger stays activated ([dropdown-menus.md]). Shared dropdown rule uses
attr+class specificity that beats .approvals-chip.is-on — restate chip chrome
here so gold-on filters keep their selected look while the menu is open. */
.approvals-status-menu [data-dropdown-target="button"].is-open,
.approvals-status-menu [data-dropdown-target="button"][aria-expanded="true"] {
color: #fafafa;
border-color: rgba(226, 200, 107, 0.4);
background: rgba(250, 250, 250, 0.08);
}
.approvals-status-menu [data-dropdown-target="button"].is-on.is-open,
.approvals-status-menu [data-dropdown-target="button"].is-on[aria-expanded="true"] {
color: #2b172b;
background: rgba(226, 200, 107, 0.88);
border-color: rgba(226, 200, 107, 0.9);
}
.approvals-status-menu__chevron {
width: 0.7rem;
height: 0.7rem;
flex: none;
opacity: 0.75;
}
.approvals-status-menu__panel {
position: absolute;
z-index: 40;
top: calc(100% + 0.25rem);
right: 0;
left: auto;
min-width: max(100%, 8.5rem);
padding: 0.25rem;
border: 1px solid rgba(250, 250, 250, 0.14);
border-radius: 0.45rem;
background: #2b172b;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
.approvals-status-menu__option {
display: block;
padding: 0.35rem 0.55rem;
border-radius: 0.3rem;
color: rgba(250, 250, 250, 0.88);
font-size: 0.78rem;
text-decoration: none;
white-space: nowrap;
}
.approvals-status-menu__option:hover {
background: rgba(250, 250, 250, 0.08);
}
.approvals-status-menu__option.is-on {
background: rgba(226, 200, 107, 0.16);
color: #f5e6a8;
}
.date-range-picker__actions {
display: flex;
justify-content: flex-end;
gap: 0.45rem;
margin-top: 0.65rem;
}
.date-range-picker__clear,
.date-range-picker__apply {
margin: 0;
padding: 0.35rem 0.7rem;
border-radius: 0.4rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
}
.date-range-picker__clear {
border: 1px solid rgba(250, 250, 250, 0.18);
background: transparent;
color: inherit;
}
.date-range-picker__apply {
border: 0;
background: #e2c86b;
color: #2b172b;
}
.date-range-picker__apply:disabled {
opacity: 0.45;
cursor: default;
}
/* ---- Single-date mockup overrides (must follow shared bound/day/nav) ---- */
.date-range-picker__bounds--single {
display: block;
margin-bottom: 0.75rem;
padding: 0.75rem 0.85rem;
border: 1px solid rgba(226, 200, 107, 0.32);
border-radius: 0.6rem;
background: rgba(0, 0, 0, 0.22);
}
.date-range-picker__bound.date-range-picker__bound--selected {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.date-range-picker__bound-copy {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1 1 auto;
}
.date-range-picker__bounds--single .date-range-picker__bound-value {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
}
.date-range-picker__selected-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
flex: 0 0 2.15rem;
border: 1px solid rgba(226, 200, 107, 0.5);
border-radius: 0.45rem;
background: rgba(226, 200, 107, 0.1);
color: #e2c86b;
}
.date-range-picker__selected-icon svg {
width: 1.05rem;
height: 1.05rem;
display: block;
}
.date-range-picker__calendars--single {
display: block;
}
.date-range-picker__panel--single .date-range-picker__cal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.date-range-picker__panel--single .date-range-picker__cal-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
flex: 1 1 auto;
min-width: 0;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
}
.date-range-picker__panel--single .date-range-picker__year {
appearance: none;
-webkit-appearance: none;
max-width: 4.75rem;
margin: 0;
padding: 0 1rem 0 0.1rem;
border: 0;
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e2c86b' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.05rem center;
background-size: 0.65rem;
color: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.date-range-picker__panel--single .date-range-picker__nav {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 2.25rem;
width: 2.25rem;
height: 2.25rem;
align-self: center;
padding: 0;
border: 1px solid rgba(250, 250, 250, 0.18);
border-radius: 999px;
background: rgba(0, 0, 0, 0.28);
font-size: 1.15rem;
line-height: 1;
}
.date-range-picker__panel--single .date-range-picker__nav:hover {
background: rgba(226, 200, 107, 0.14);
border-color: rgba(226, 200, 107, 0.35);
}
.date-range-picker__panel--single .date-range-picker__weekdays,
.date-range-picker__panel--single .date-range-picker__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.3rem;
align-items: stretch;
justify-items: stretch;
}
.date-range-picker__panel--single .date-range-picker__weekdays {
margin-bottom: 0.35rem;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.42);
}
.date-range-picker__panel--single .date-range-picker__weekdays > * {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 1.2rem;
overflow: hidden;
text-align: center;
}
.date-range-picker__panel--single .date-range-picker__day {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 0;
height: auto;
max-height: none;
padding: 0;
border: 1px solid rgba(250, 250, 250, 0.1);
border-radius: 0.45rem;
background: rgba(0, 0, 0, 0.3);
font-size: 0.86rem;
font-weight: 500;
line-height: 1;
}
.date-range-picker__panel--single .date-range-picker__day:hover {
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.28);
}
.date-range-picker__panel--single .date-range-picker__day.is-empty {
visibility: visible;
background: transparent;
border: 1px solid rgba(250, 250, 250, 0.1);
pointer-events: none;
}
.date-range-picker__panel--single .date-range-picker__day.is-today:not(.is-selected):not(.is-start) {
box-shadow: inset 0 0 0 1px rgba(226, 200, 107, 0.65);
}
.date-range-picker__panel--single .date-range-picker__day.is-selected,
.date-range-picker__panel--single .date-range-picker__day.is-start {
background: linear-gradient(180deg, #f0d57a 0%, #e2c86b 100%);
border-color: rgba(226, 200, 107, 0.9);
color: #2b172b;
font-weight: 700;
box-shadow: 0 0 10px rgba(226, 200, 107, 0.35);
}
.date-range-picker__actions--single {
display: flex;
margin-top: 0.9rem;
gap: 0.55rem;
justify-content: stretch;
}
.date-range-picker__actions--single .date-range-picker__clear,
.date-range-picker__actions--single .date-range-picker__apply {
flex: 1 1 0;
min-height: 2.4rem;
padding: 0.5rem 0.85rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
}
.date-range-picker__actions--single .date-range-picker__clear {
border: 1px solid rgba(250, 250, 250, 0.3);
background: rgba(0, 0, 0, 0.22);
color: #fafafa;
}
.date-range-picker__actions--single .date-range-picker__clear:hover {
background: rgba(250, 250, 250, 0.08);
}
.date-range-picker__actions--single .date-range-picker__apply {
border: 0;
background: linear-gradient(180deg, #f0d57a 0%, #e2c86b 55%, #c9a84a 100%);
color: #2b172b;
box-shadow: 0 4px 14px rgba(226, 200, 107, 0.3);
}
.date-range-picker__actions--single .date-range-picker__apply:hover {
filter: brightness(1.04);
}
@media (max-width: 40rem) {
.date-range-picker__calendars {
grid-template-columns: 1fr;
gap: 1rem;
}
.date-range-picker__calendar + .date-range-picker__calendar {
padding-left: 0;
border-left: 0;
padding-top: 0.75rem;
border-top: 1px solid rgba(250, 250, 250, 0.12);
}
.date-range-picker__bounds {
gap: 0.5rem 0.75rem;
}
}
/* Single-day form date picker (Project Information etc.). Separate from
the Tracker dual-calendar .date-range-picker — full-width one calendar. */
.date-picker {
position: relative;
display: inline-flex;
min-width: 12rem;
max-width: 100%;
z-index: 1;
color: #fafafa;
}
.date-picker:has([data-dropdown-target="button"][aria-expanded="true"]) {
z-index: 6;
}
.date-picker__trigger {
display: inline-flex;
align-items: center;
gap: 0.45rem;
width: 100%;
min-height: 2.35rem;
margin: 0;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(186, 157, 196, 0.42);
border-radius: 0.5rem;
background: rgba(45, 29, 44, 0.92);
color: inherit;
text-align: left;
cursor: pointer;
}
.date-picker__trigger:hover,
.date-picker [data-dropdown-target="button"].is-open,
.date-picker [data-dropdown-target="button"][aria-expanded="true"] {
background: rgba(61, 40, 58, 0.96);
border-color: rgba(226, 200, 107, 0.55);
}
.date-picker.is-active .date-picker__trigger,
.date-picker.is-active [data-dropdown-target="button"].is-open,
.date-picker.is-active [data-dropdown-target="button"][aria-expanded="true"] {
border-color: rgba(226, 200, 107, 0.72);
background: rgba(45, 29, 44, 0.96);
box-shadow: 0 0 0 1px rgba(226, 200, 107, 0.12);
}
.date-picker__trigger:focus-visible {
outline: 2px solid rgba(226, 200, 107, 0.65);
outline-offset: 2px;
}
.date-picker__label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.78);
}
.date-picker__summary {
flex: 1 1 auto;
min-width: 0;
font-size: 0.875rem;
font-weight: 500;
color: #fafafa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.date-picker:not(.is-active) .date-picker__summary {
color: rgba(250, 250, 250, 0.48);
}
.date-picker__trigger-icon {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
color: #e2c86b;
}
.date-picker__panel {
position: fixed;
/* Above modal shells (z-10 / z-50) so the calendar stays visible while
document scroll is locked. */
z-index: 90;
box-sizing: border-box;
width: 22.5rem;
max-width: calc(100vw - 1.5rem);
max-height: calc(100vh - 1rem);
overflow-y: auto;
padding: 0.95rem 1.05rem 0.9rem;
border: 1px solid rgba(226, 200, 107, 0.22);
border-radius: 0.95rem;
background: #2a172a;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
color: #fafafa;
}
/* Let the fixed panel paint past Project Information card overflow. */
#cp-card-information:has(.date-picker [aria-expanded="true"]),
#cp-card-information:has(.date-picker [aria-expanded="true"]) > .cp-section-card__body {
overflow: visible;
}
.date-picker__selected {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 0.85rem;
padding: 0.8rem 0.9rem;
border: 1px solid rgba(226, 200, 107, 0.34);
border-radius: 0.65rem;
background: rgba(0, 0, 0, 0.24);
}
.date-picker__selected-copy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.date-picker__selected-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(226, 200, 107, 0.82);
}
.date-picker__selected-value {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
color: #fafafa;
}
.date-picker__selected-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
flex: 0 0 2.2rem;
border: 1px solid rgba(226, 200, 107, 0.55);
border-radius: 0.45rem;
background: rgba(226, 200, 107, 0.12);
color: #e2c86b;
}
.date-picker__selected-icon svg {
width: 1.05rem;
height: 1.05rem;
display: block;
}
.date-picker__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.date-picker__title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
flex: 1 1 auto;
min-width: 0;
font-size: 1.05rem;
font-weight: 650;
white-space: nowrap;
}
.date-picker__year {
appearance: none;
-webkit-appearance: none;
max-width: 4.9rem;
margin: 0;
padding: 0 1.05rem 0 0.1rem;
border: 0;
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e2c86b' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.05rem center;
background-size: 0.7rem;
color: inherit;
font-size: 1.05rem;
font-weight: 650;
line-height: 1.2;
cursor: pointer;
}
.date-picker__nav {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 2.35rem;
width: 2.35rem;
height: 2.35rem;
margin: 0;
padding: 0;
border: 1px solid rgba(250, 250, 250, 0.18);
border-radius: 999px;
background: rgba(0, 0, 0, 0.3);
color: inherit;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
.date-picker__nav:hover {
background: rgba(226, 200, 107, 0.14);
border-color: rgba(226, 200, 107, 0.35);
}
.date-picker__weekdays,
.date-picker__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.35rem;
width: 100%;
align-items: stretch;
justify-items: stretch;
}
.date-picker__weekdays {
margin-bottom: 0.4rem;
font-size: 0.62rem;
font-weight: 650;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(250, 250, 250, 0.44);
}
.date-picker__weekdays > * {
display: flex;
align-items: center;
justify-content: center;
min-height: 1.25rem;
text-align: center;
}
.date-picker__day {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid rgba(250, 250, 250, 0.12);
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.32);
color: #fafafa;
font-size: 0.9rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1;
cursor: pointer;
}
.date-picker__day:hover {
background: rgba(226, 200, 107, 0.16);
border-color: rgba(226, 200, 107, 0.3);
}
.date-picker__day.is-empty {
visibility: visible;
background: transparent;
border: 1px solid rgba(250, 250, 250, 0.1);
pointer-events: none;
}
.date-picker__day.is-today:not(.is-selected) {
box-shadow: inset 0 0 0 1px rgba(226, 200, 107, 0.7);
}
.date-picker__day.is-selected {
background: linear-gradient(180deg, #f0d57a 0%, #e2c86b 100%);
border-color: rgba(226, 200, 107, 0.95);
color: #2b172b;
font-weight: 700;
box-shadow: 0 0 12px rgba(226, 200, 107, 0.38);
}
.date-picker__actions {
display: flex;
gap: 0.6rem;
margin-top: 0.95rem;
}
.date-picker__clear,
.date-picker__done {
flex: 1 1 0;
min-height: 2.45rem;
margin: 0;
padding: 0.5rem 0.85rem;
border-radius: 0.55rem;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
}
.date-picker__clear {
border: 1px solid rgba(250, 250, 250, 0.32);
background: rgba(0, 0, 0, 0.22);
color: #fafafa;
}
.date-picker__clear:hover {
background: rgba(250, 250, 250, 0.08);
}
.date-picker__done {
border: 0;
background: linear-gradient(180deg, #f0d57a 0%, #e2c86b 55%, #c9a84a 100%);
color: #2b172b;
box-shadow: 0 4px 14px rgba(226, 200, 107, 0.3);
}
.date-picker__done:hover {
filter: brightness(1.04);
}
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/