@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');:root{--shadow-header-row: 0 4px 12px rgba(0, 0, 0, 0.25);--shadow-header-row-light: 0 2px 8px rgba(0, 0, 0, 0.15);--shadow-column-light: 2px 0 6px rgba(0, 0, 0, 0.1);--shadow-column-strong: 6px 0 16px rgba(0, 0, 0, 0.3);--shadow-border-column: inset -1px 0 0 rgba(24, 144, 255, 0.3);--shadow-border-column-light: inset -1px 0 0 rgba(24, 144, 255, 0.15);--shadow-dropdown: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12);--shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.3);--shadow-focus: 0 0 0 2px rgba(24, 144, 255, 0.2);--shadow-element-hover: 0 4px 8px rgba(0, 0, 0, 0.3);--shadow-element-default: 0 2px 4px rgba(0, 0, 0, 0.2);--filter-shadow-header: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));--transform-gpu: translateZ(0);--backface-hidden: hidden;--will-change-scroll: scroll-position;--will-change-transform: transform;--theme-header-bg: #fafafa;--theme-cell-bg: #ffffff;--theme-hover-bg: #f5f5f5;--theme-border-color: #d9d9d9;--theme-border-width: 1px;--theme-border-horizontal: 1px solid #d9d9d9;--theme-border-vertical: 1px solid #d9d9d9;--theme-header-text-color: rgba(0, 0, 0, 0.85);--theme-cell-text-color: rgba(0, 0, 0, 0.85)} .excelike-table-wrapper{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;position: relative;width: 100%;height: 100%;background: white;font-size: var(--table-font-size, 14px);display: flex;flex-direction: column} .excelike-table-wrapper *{font-size: inherit} .excelike-table{position: relative;display: flex;flex-direction: column;height: 100%;overflow: visible} .table-loading{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.8);display: flex;align-items: center;justify-content: center;z-index: 1000;font-size: 14px;color: rgba(0, 0, 0, 0.65)} .table-container{position: relative;overflow: auto;overflow-x: auto;overflow-y: auto;flex: 1;min-height: 0;width: 100%;max-height: 100%} .table-container.fixed-height{height: 100%} .table{width: auto;min-width: fit-content;border-collapse: collapse;background-color: #fff;font-size: 14px;table-layout: fixed} .table.bordered{border: var(--theme-border-width, 1px) solid var(--theme-border-color, #d9d9d9)} .table.small{font-size: 12px} .table.large{font-size: 16px} .table-header{background-color: var(--theme-header-bg, #fafafa);border-bottom: var(--theme-border-horizontal, 1px solid #d9d9d9);padding: 0;position: sticky;position: -webkit-sticky;top: 0;z-index: 100;overflow: visible;box-shadow: var(--shadow-header-row) !important;border-spacing: 0;filter: var(--filter-shadow-header);transform: var(--transform-gpu);backface-visibility: var(--backface-hidden);will-change: var(--will-change-transform);cursor: default} .table .table-header:not(.pinned-column){z-index: 100;isolation: isolate;background-color: var(--theme-header-bg, #fafafa)} .table thead{position: sticky;position: -webkit-sticky;top: 0;z-index: 100;background-color: var(--theme-header-bg, #fafafa)} .table thead th{position: sticky;position: -webkit-sticky;top: 0;background-color: inherit} .table thead th:not(.pinned-column){z-index: 100} .table.bordered .table-header{border-right: var(--theme-border-vertical, 1px solid #d9d9d9)} .table.bordered .table-header:last-child{border-right: none} .header-content{display: flex;align-items: center;justify-content: space-between;padding: 8px 12px;min-height: 32px;position: relative} .header-title{font-weight: 600;color: var(--theme-header-text-color, rgba(0, 0, 0, 0.85));flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .header-controls{display: flex;align-items: stretch;flex-shrink: 0;height: 100%} .sort-controls{display: flex;flex-direction: column;align-items: center;gap: 1px;width: 14px;height: 100%;min-height: 28px} .sort-indicator{width: 14px;height: 100%;min-height: 28px;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s} .sort-indicator:hover{background: rgba(24, 144, 255, 0.1);border-radius: 2px} .sort-triangle{width: 0;height: 0;border-style: solid;display: block;margin: 1px 0} .sort-triangle.up{border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 5px solid rgba(0, 0, 0, 0.45);border-top: none} .sort-triangle.down{border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 5px solid rgba(0, 0, 0, 0.45);border-bottom: none} .sort-triangle.up.active{border-bottom-color: #1890ff} .sort-triangle.down.active{border-top-color: #1890ff} .filter-dropdown-container{position: relative} .filter-btn{background: none;border: none;cursor: pointer;color: rgba(0, 0, 0, 0.45);padding: 2px;width: 14px;height: 100%;min-height: 28px;display: flex;align-items: center;justify-content: center;transition: all 0.2s;border-radius: 2px} .filter-btn:hover{color: #1890ff;background: rgba(24, 144, 255, 0.1)} .filter-btn.active{color: #1890ff;background: rgba(24, 144, 255, 0.15)} .filter-btn .filter-funnel{width: 12px;height: 12px;position: relative;display: inline-block} .filter-btn .filter-funnel::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: currentColor transparent transparent transparent} .filter-btn .filter-funnel::after{content: '';position: absolute;top: 4px;left: 50%;transform: translateX(-50%);width: 2px;height: 8px;background: currentColor} .filter-dropdown-wrapper{position: fixed;z-index: 9999;min-width: 200px;overflow: visible} .filter-dropdown{background: white;border: 1px solid #d9d9d9;border-radius: 6px;box-shadow: var(--shadow-dropdown);min-width: 250px;max-width: 400px;font-size: 14px;position: relative;display: flex;flex-direction: column;overflow: hidden} @media (max-width: 480px){.filter-dropdown-mobile{min-width: 0;max-width: calc(100vw - 40px);width: calc(100vw - 40px);overflow: hidden !important;display: flex !important;flex-direction: column !important} .filter-dropdown-mobile .filter-dropdown-header{position: sticky;top: 0;z-index: 10;background: #fafafa;flex-shrink: 0} .filter-dropdown-mobile .filter-dropdown-content{overflow-y: auto !important;overflow-x: hidden !important;flex: 1 1 0 !important;min-height: 0 !important} .filter-dropdown-mobile .filter-mode-content{overflow-y: visible !important;overflow-x: visible !important;max-height: none !important;height: auto !important} .filter-dropdown-mobile .filter-dropdown-mobile-footer-wrapper{position: relative;background: white;padding: 8px 12px;border-top: 1px solid #ddd;margin-top: auto;flex-shrink: 0} .filter-dropdown-mobile .filter-dropdown-footer button{padding: 6px 12px;font-size: 13px} .filter-dropdown-mobile .filter-dropdown-footer{margin: 0;border-top: none;position: static} .filter-dropdown-mobile .filter-dropdown-footer button, .filter-dropdown-mobile .filter-dropdown-footer .filter-footer-actions{pointer-events: auto !important} .filter-dropdown-mobile .filter-mode-tabs{pointer-events: none !important} .filter-dropdown-mobile .filter-mode-tabs .filter-mode-tab{pointer-events: auto !important} .filter-dropdown-mobile .filter-dropdown-mobile-footer-wrapper{pointer-events: none !important} .filter-dropdown:not(.filter-dropdown-mobile){min-width: 0;max-width: calc(100vw - 40px);width: calc(100vw - 40px)} .filter-dropdown:not(.filter-dropdown-mobile) .filter-dropdown-content{overflow-y: scroll !important;-webkit-overflow-scrolling: touch} .filter-dropdown:not(.filter-dropdown-mobile) .filter-dropdown-footer{flex-shrink: 0;position: relative} } @media (max-width: 400px){.filter-dropdown{min-width: 0;max-width: min(280px, calc(100vw - 40px));width: min(280px, calc(100vw - 40px))} } .filter-dropdown-header{padding: 8px 12px;border-bottom: 1px solid #f0f0f0;background: #fafafa;border-radius: 6px 6px 0 0;flex-shrink: 0} .filter-dropdown-title{font-weight: 500;color: rgba(0, 0, 0, 0.85)} .filter-dropdown-search{padding: 8px 12px;border-bottom: 1px solid #f0f0f0;flex-shrink: 0} .filter-search-input{width: 100%;padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;outline: none;box-sizing: border-box} .filter-search-input:focus{border-color: #1890ff;box-shadow: var(--shadow-focus)} .filter-dropdown-content{flex: 1;overflow-y: auto;min-height: 0} .filter-option{padding: 4px 12px;border-bottom: 1px solid #f0f0f0} .filter-option:last-child{border-bottom: none} .filter-option.select-all{background: #f9f9f9;font-weight: 500;border-bottom: 1px solid #d9d9d9} .filter-option-label{display: flex;align-items: center;cursor: pointer;padding: 4px 0;user-select: none;justify-content: flex-start} .filter-checkbox{margin-right: 8px;cursor: pointer} .filter-option-text{flex: 1;color: rgba(0, 0, 0, 0.85);text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .filter-option:hover{background: #f5f5f5} .filter-dropdown-footer{padding: 8px 12px;border-top: 1px solid #f0f0f0;display: flex;flex-direction: column;gap: 8px;flex-shrink: 0} .filter-footer-actions{display: flex;justify-content: flex-end;gap: 8px} .filter-btn-confirm{background: #1890ff;color: white;border: none;padding: 4px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;font-weight: 500} .filter-btn-confirm:hover:not(:disabled){background: #40a9ff} .filter-btn-confirm:disabled{background: #f5f5f5;color: rgba(0, 0, 0, 0.25);cursor: not-allowed} .filter-btn-cancel{background: white;color: rgba(0, 0, 0, 0.65);border: 1px solid #d9d9d9;padding: 4px 12px;border-radius: 4px;cursor: pointer;font-size: 12px} .filter-btn-cancel:hover{color: #1890ff;border-color: #1890ff} .filter-btn-clear-column{background: white;color: #1890ff;border: 1px solid #1890ff;padding: 4px 8px;border-radius: 4px;cursor: pointer;font-size: 12px;transition: all 0.2s;align-self: flex-start} .filter-btn-clear-column:hover{background: #e6f7ff;border-color: #40a9ff;color: #40a9ff} .filter-mode-tabs{display: flex;border-bottom: 1px solid #f0f0f0;background: white;flex-shrink: 0} .filter-mode-tab{flex: 1;padding: 8px 16px;background: white;border: none;border-bottom: 2px solid transparent;color: rgba(0, 0, 0, 0.65);font-size: 14px;cursor: pointer;transition: all 0.2s;outline: none} .filter-mode-tab:hover{color: #1890ff;background: #f5f5f5} .filter-mode-tab.active{color: #1890ff;border-bottom-color: #1890ff;font-weight: 500} .filter-mode-content{flex: 1;display: flex;flex-direction: column;min-height: 0;overflow: hidden} .filter-mode-panel{display: none;flex-direction: column;flex: 1;min-height: 0;overflow: hidden} .filter-mode-panel.active{display: flex} .range-description{padding: 8px 12px;background: #e6f7ff;border: 1px solid #91d5ff;border-radius: 4px;color: rgba(0, 0, 0, 0.85);font-size: 13px;text-align: center;margin-top: 8px} .dual-range-slider-container{position: relative;margin: 12px 0 8px 0;padding: 0;height: 40px;display: flex;align-items: center} .dual-range-slider-track{position: absolute;left: 9px;right: 9px;width: calc(100% - 18px);height: 6px;background: #d3d3d3;border-radius: 3px;top: 50%;transform: translateY(-50%);pointer-events: none} .dual-range-slider-range{position: absolute;height: 6px;background: #1890ff;border-radius: 3px;top: 50%;transform: translateY(-50%);pointer-events: none;transition: left 0.1s, width 0.1s} .dual-range-slider{position: absolute;width: 100%;-webkit-appearance: none;appearance: none;background: transparent;pointer-events: none} .dual-range-slider::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%;background: #1890ff;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);transition: background 0.2s, transform 0.2s;pointer-events: auto;position: relative;z-index: 3} .dual-range-slider::-webkit-slider-thumb:hover{background: #40a9ff;transform: scale(1.1)} .dual-range-slider::-webkit-slider-thumb:active{background: #096dd9;transform: scale(0.95)} .dual-range-slider::-moz-range-thumb{width: 18px;height: 18px;border-radius: 50%;background: #1890ff;cursor: pointer;border: none;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);transition: background 0.2s, transform 0.2s;pointer-events: auto;position: relative;z-index: 3} .dual-range-slider::-moz-range-thumb:hover{background: #40a9ff;transform: scale(1.1)} .dual-range-slider::-moz-range-thumb:active{background: #096dd9;transform: scale(0.95)} .dual-range-slider-min::-webkit-slider-thumb{background: #52c41a;z-index: 4} .dual-range-slider-min::-webkit-slider-thumb:hover{background: #73d13d} .dual-range-slider-min::-webkit-slider-thumb:active{background: #389e0d} .dual-range-slider-min::-moz-range-thumb{background: #52c41a;z-index: 4} .dual-range-slider-min::-moz-range-thumb:hover{background: #73d13d} .dual-range-slider-min::-moz-range-thumb:active{background: #389e0d} .number-range-slider-container{position: relative;padding: 8px 0} .number-range-slider{position: relative;height: 6px;background: #f0f0f0;border-radius: 3px;margin: 16px 0;cursor: pointer} .number-range-track{position: absolute;top: 0;height: 100%;background: #1890ff;border-radius: 3px} .number-range-thumb{position: absolute;top: 50%;transform: translate(-50%, -50%);width: 16px;height: 16px;background: #1890ff;border: 2px solid white;border-radius: 50%;cursor: grab;box-shadow: var(--shadow-element-default);z-index: 2} .number-range-thumb:hover{transform: translate(-50%, -50%) scale(1.1);box-shadow: var(--shadow-element-hover)} .number-range-thumb:active{cursor: grabbing} .number-range-thumb-min{background: #52c41a} .number-range-thumb-min:hover{background: #73d13d} .range-blank-option{margin: 8px 0 4px 0;padding: 4px 8px;background: #f5f5f5;border-radius: 4px} .filter-options-list{overflow-y: auto;flex: 1} .filter-dropdown-range{padding: 8px 12px;border-bottom: 1px solid #f0f0f0;background: #fafafa} .range-filter{padding: 12px;background: white;border-radius: 4px;font-size: 14px} .range-inputs{display: flex;gap: 12px;margin-bottom: 16px} .range-input-group{flex: 1;display: flex;flex-direction: column;gap: 4px} .range-label{font-size: 12px;color: rgba(0, 0, 0, 0.65);font-weight: 500} .range-input{width: 100%;padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;outline: none;box-sizing: border-box} .range-input:focus{border-color: #1890ff;box-shadow: var(--shadow-focus)} .range-slider-container{position: relative;padding: 8px 0} .range-slider{position: relative;height: 6px;background: #f0f0f0;border-radius: 3px;margin: 16px 0;cursor: pointer} .range-track{position: absolute;top: 0;height: 100%;background: #1890ff;border-radius: 3px} .range-thumb{position: absolute;top: 50%;transform: translate(-50%, -50%);width: 16px;height: 16px;background: #1890ff;border: 2px solid white;border-radius: 50%;cursor: grab;box-shadow: var(--shadow-element-default);z-index: 2} .range-thumb:hover{transform: translate(-50%, -50%) scale(1.1);box-shadow: var(--shadow-element-hover)} .date-range-filter{padding: 12px;background: white;border-radius: 4px;font-size: 14px} .date-range-inputs{display: flex;gap: 12px;margin-bottom: 16px} .date-range-input-group{flex: 1;display: flex;flex-direction: column;gap: 4px} .date-range-label{font-size: 12px;color: rgba(0, 0, 0, 0.65);font-weight: 500} .date-range-input{width: 100%;padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;outline: none;box-sizing: border-box} .date-range-input:focus{border-color: #1890ff;box-shadow: var(--shadow-focus)} .date-range-slider-container{position: relative;padding: 8px 0} .date-range-slider{position: relative;height: 6px;background: #f0f0f0;border-radius: 3px;margin: 16px 0;cursor: pointer} .date-range-track{position: absolute;top: 0;height: 100%;background: #1890ff;border-radius: 3px} .date-range-thumb{position: absolute;top: 50%;transform: translate(-50%, -50%);width: 16px;height: 16px;background: #1890ff;border: 2px solid white;border-radius: 50%;cursor: grab;box-shadow: var(--shadow-element-default);z-index: 2} .date-range-thumb:hover{transform: translate(-50%, -50%) scale(1.1);box-shadow: var(--shadow-element-hover)} .date-filter-content{flex: 1;overflow-y: auto;min-height: 0} .date-filter-group{border-bottom: 1px solid #f0f0f0} .date-filter-group:last-child{border-bottom: none} .date-filter-group .date-filter-group-header{display: flex;align-items: center;padding: 4px 12px;background: #fafafa;font-weight: 500;cursor: pointer;padding-left: 30px !important} .date-filter-children{background: white} .date-filter-item{border-bottom: 1px solid #f0f0f0} .date-filter-item:last-child{border-bottom: none} .expand-btn{background: none;border: none;cursor: pointer;font-size: 12px;color: #1890ff;padding: 0;width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;margin-right: 4px;border-radius: 2px} .expand-btn:hover{background: #e6f7ff} .expand-btn-month{margin-left: 20px} .date-filter-label{display: flex;align-items: center;cursor: pointer;padding: 4px 0;user-select: none;flex: 1;justify-content: flex-start} .date-filter-checkbox{margin-right: 8px;cursor: pointer} .date-filter-text{flex: 1;color: rgba(0, 0, 0, 0.85);text-align: left} .date-filter-item:hover{background: #f5f5f5} .date-filter-group-header:hover{background: #f0f0f0} .date-filter-month{border-bottom: 1px solid #f0f0f0} .date-filter-month:last-child{border-bottom: none} .date-filter-item.date-filter-month .date-filter-month-header{display: flex;align-items: center;padding: 4px 12px;background: #f9f9f9;font-weight: 500;cursor: pointer;padding-left: 32px !important} .date-filter-month-header:hover{background: #f0f0f0} .date-filter-days{background: white} .date-filter-item.date-filter-day{border-bottom: 1px solid #f0f0f0;padding-left: 92px !important} .date-filter-day:last-child{border-bottom: none} .date-expand-controls{padding: 8px 12px;border-bottom: 1px solid #f0f0f0;background: #fafafa} .expand-control-header{display: flex;align-items: center;gap: 8px} .expand-control-label{font-size: 12px;color: rgba(0, 0, 0, 0.65);font-weight: 500} .expand-control-buttons{display: flex;gap: 4px} .expand-control-btn{padding: 4px 8px;border: 1px solid #d9d9d9;background: white;border-radius: 4px;cursor: pointer;font-size: 12px;color: rgba(0, 0, 0, 0.65);transition: all 0.2s;min-width: 32px} .expand-control-btn:hover{border-color: #1890ff;color: #1890ff} .expand-control-btn.active{background: #1890ff;color: white;border-color: #1890ff} .filter-option-count{color: rgba(0, 0, 0, 0.45);font-size: 11px;font-weight: normal} .resize-handle, .table-column-resizer{position: absolute;top: 0;right: 0;bottom: 0;width: 4px;cursor: col-resize;background: transparent;border-right: 2px solid transparent;transition: border-color 0.2s;z-index: var(--z-resize-handle)} .resize-handle, .table-column-resizer{cursor: ew-resize} .resize-handle:hover, .table-column-resizer:hover{border-right-color: #1890ff} .table-cell{padding: 8px 12px;background-color: var(--theme-cell-bg, #ffffff);color: var(--theme-cell-text-color, rgba(0, 0, 0, 0.85));word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: relative} .header-title{font-weight: 600;color: var(--theme-header-text-color, rgba(0, 0, 0, 0.85));flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .cell-tooltip{position: absolute;background: rgba(0, 0, 0, 0.85);color: white;padding: 8px 12px;border-radius: 4px;font-size: 12px;white-space: nowrap;z-index: 10000;pointer-events: none;max-width: 300px;word-wrap: break-word;white-space: normal} .resize-tooltip{position: fixed;background: rgba(0, 0, 0, 0.9);color: white;padding: 6px 10px;border-radius: 6px;font-size: 12px;font-weight: 500;z-index: 10000;pointer-events: none;white-space: nowrap;box-shadow: var(--shadow-tooltip);border: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(4px);transition: opacity 0.2s ease} .resize-tooltip::before{content: '';position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid rgba(0, 0, 0, 0.9)} .table.bordered .table-cell{border-right: var(--theme-border-vertical, 1px solid #d9d9d9);border-bottom: var(--theme-border-horizontal, 1px solid #d9d9d9)} .table.bordered .table-cell:last-child{border-right: none} .table.bordered tr:last-child .table-cell{border-bottom: none} .table tbody tr:hover{background-color: var(--theme-hover-bg, #f5f5f5)} .enhanced-table-pagination{display: flex;justify-content: space-between;align-items: center;padding: 16px 0;margin-top: 16px;border-top: 1px solid #d9d9d9;flex-shrink: 0} .pagination-info{color: rgba(0, 0, 0, 0.65);font-size: 14px} .pagination-controls{display: flex;align-items: center;gap: 12px} .pagination-controls button{padding: 6px 12px;border: 1px solid #d9d9d9;background: #fff;cursor: pointer;border-radius: 4px;font-size: 14px;color: rgba(0, 0, 0, 0.65);transition: all 0.2s} .pagination-controls button:hover:not(:disabled){border-color: #1890ff;color: #1890ff} .pagination-controls button:disabled{opacity: 0.5;cursor: not-allowed} .page-info{color: rgba(0, 0, 0, 0.65);font-size: 14px} .page-size-selector{display: flex;align-items: center;gap: 4px} .page-size-select{padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 4px;background: #fff;font-size: 14px;color: rgba(0, 0, 0, 0.65);cursor: pointer;transition: border-color 0.2s} .page-size-select:hover{border-color: #1890ff} .page-size-select:focus{outline: none;border-color: #1890ff;box-shadow: var(--shadow-focus)} .table-menu-container{position: relative;display: flex;justify-content: flex-end;margin-bottom: 8px;flex-shrink: 0} .table-menu-wrapper{position: relative} .table-menu-btn{background: #fff;border: 1px solid #d9d9d9;border-radius: 4px;padding: 6px 8px;cursor: pointer;font-size: 16px;transition: all 0.2s} .table-menu-btn:hover{border-color: #1890ff;color: #1890ff} .table-menu-dropdown{position: absolute;top: 100%;right: 0;background: white;border: 1px solid #d9d9d9;border-radius: 4px;box-shadow: var(--shadow-dropdown);z-index: 1000;min-width: 220px;margin-top: 4px} .table-menu-item{padding: 8px 12px;cursor: pointer;font-size: 14px;transition: background-color 0.2s;display: flex;align-items: center;white-space: nowrap} .table-menu-item i{width: 20px;font-size: 14px;color: rgba(0, 0, 0, 0.65);text-align: center;flex-shrink: 0;margin-right: 8px} .table-menu-item:hover{background-color: #f5f5f5} .table-menu-item-submenu{position: relative} .submenu-arrow{position: absolute;right: 12px;top: 50%;transform: translateY(-50%);font-size: 10px;color: rgba(0, 0, 0, 0.45)} .table-submenu-dropdown{position: absolute;right: 100%;top: 0;background: white;border: 1px solid #d9d9d9;border-radius: 4px;box-shadow: var(--shadow-dropdown);min-width: 100px;display: none;z-index: 1001;margin-right: 0} .table-menu-item-submenu:hover .table-submenu-dropdown{display: block} .table-menu-item-current{background-color: #e6f7ff;color: #1890ff;font-weight: 500} .column-settings-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.25);z-index: 10000;display: flex;align-items: center;justify-content: center} .column-settings-modal{background: white;border-radius: 8px;box-shadow: var(--shadow-modal);width: 400px;max-height: 80vh;display: flex;flex-direction: column} .column-settings-header{display: flex;justify-content: space-between;align-items: center;padding: 16px 20px;border-bottom: 1px solid #f0f0f0} .column-settings-header h3{margin: 0;font-size: 16px;font-weight: 600;color: rgba(0, 0, 0, 0.85)} .close-btn{background: none;border: none;font-size: 20px;cursor: pointer;color: rgba(0, 0, 0, 0.45);padding: 0;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;border-radius: 2px} .close-btn:hover{color: rgba(0, 0, 0, 0.75);background: rgba(0, 0, 0, 0.06)} .column-settings-content{flex: 1;overflow-y: auto;padding: 16px 20px} .column-list{display: flex;flex-direction: column;gap: 8px} .column-item{display: flex;align-items: center;justify-content: space-between;padding: 8px 0;border-bottom: 1px solid #f0f0f0} .select-all-item{background: #f9f9f9;padding: 8px 12px;margin: -8px -12px 8px -12px;border-bottom: 1px solid #d9d9d9;font-weight: 500} .column-label{display: flex;align-items: center;cursor: pointer;user-select: none;flex: 1} .column-checkbox{margin-right: 8px;cursor: pointer} .column-text{flex: 1;color: rgba(0, 0, 0, 0.85);font-size: 14px} .pin-label{display: flex;align-items: center;margin-left: 10px;cursor: pointer} .pin-checkbox{margin-right: 4px;cursor: pointer} .pin-icon{font-size: 14px;opacity: 0.6} .pin-checkbox:checked + .pin-icon{opacity: 1} .column-settings-footer{padding: 12px 20px;border-top: 1px solid #f0f0f0;display: flex;justify-content: flex-end;gap: 8px} .confirm-btn{background: #1890ff;color: white;border: none;padding: 6px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;font-weight: 500;transition: background-color 0.2s} .confirm-btn:hover:not(:disabled){background: #40a9ff} .cancel-btn{background: white;color: rgba(0, 0, 0, 0.65);border: 1px solid #d9d9d9;padding: 6px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.2s} .cancel-btn:hover{color: #1890ff;border-color: #1890ff} :root{--z-table-cell: 1;--z-table-body: 1;--z-table-header: 10;--z-pinned-cell: 101;--z-pinned-header: 120;--z-pinned-last-header: 125;--z-pinned-border: 105;--z-resize-handle: 1000} .table{position: relative;isolation: isolate} .table tbody{position: relative;z-index: var(--z-table-body)} .table thead{z-index: var(--z-table-header)} .table td, .table th{position: relative;box-sizing: border-box;z-index: var(--z-table-cell)} .table-container{position: relative;isolation: isolate;overflow: auto} .table .pinned-column{position: sticky;left: var(--pinned-left, 0px);background-color: #fff;z-index: var(--z-pinned-cell);min-width: fit-content;box-shadow: var(--shadow-border-column-light), var(--shadow-column-light);will-change: transform;transform: translateZ(0);backface-visibility: hidden} .table tbody .pinned-column{top: auto} .table .table-header.pinned-column, .table thead th.pinned-column{background-color: #fafafa;z-index: var(--z-pinned-header);top: 0;left: var(--pinned-left, 0px);isolation: isolate;box-shadow: var(--shadow-header-row-light);transform: var(--transform-gpu);backface-visibility: var(--backface-hidden);will-change: var(--will-change-transform)} .table .last-pinned-column{z-index: var(--z-pinned-last-header);box-shadow: var(--shadow-border-column), var(--shadow-column-strong), var(--shadow-header-row-light) !important;transform: var(--transform-gpu);backface-visibility: var(--backface-hidden);will-change: var(--will-change-transform)} .table .last-pinned-column::after{display: none} .filter-dropdown-content::-webkit-scrollbar{width: 6px} .filter-dropdown-content::-webkit-scrollbar-track{background: #f1f1f1} .filter-dropdown-content::-webkit-scrollbar-thumb{background: #c1c1c1;border-radius: 3px} .filter-dropdown-content::-webkit-scrollbar-thumb:hover{background: #a8a8a8} @media (max-width: 768px){.excelike-table-wrapper{font-size: 12px} .header-content{padding: 6px 8px} .table-cell{padding: 6px 8px} .enhanced-table-pagination{flex-direction: column;gap: 12px;align-items: stretch} .pagination-controls{justify-content: center;flex-wrap: wrap} } @media print{.enhanced-table-pagination{display: none} .filter-dropdown-wrapper{display: none} .table-menu-container{display: none} .column-settings-overlay{display: none} .table tbody tr:hover{background-color: transparent} } .modal-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 10000;animation: modal-fade-in 0.2s ease-out} .modal{background: white;border-radius: 8px;box-shadow: var(--shadow-modal);max-width: 90vw;max-height: 90vh;overflow: hidden;animation: modal-slide-in 0.3s ease-out} .modal-large{width: 800px} .modal-medium{width: 600px} .modal-small{width: 400px} .modal-header{padding: 20px 24px;border-bottom: 1px solid #e8e8e8;display: flex;align-items: center;justify-content: space-between;background: #f8f8f8} .modal-header h3{margin: 0;font-size: 18px;font-weight: 600;color: #222} .modal-close-btn{background: none;border: none;font-size: 24px;line-height: 1;cursor: pointer;padding: 4px;color: #555;border-radius: 4px;transition: all 0.2s ease} .modal-close-btn:hover{background: rgba(0, 0, 0, 0.08);color: #222} .modal-body{padding: 24px;max-height: 60vh;overflow-y: auto;background: white} .modal-footer{padding: 16px 24px;border-top: 1px solid #e8e8e8;display: flex;gap: 12px;justify-content: flex-end;background: #f8f8f8} .btn{padding: 8px 16px;border: 1px solid transparent;border-radius: 6px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.2s ease;display: inline-flex;align-items: center;gap: 8px;text-decoration: none;outline: none} .btn:focus{box-shadow: var(--shadow-focus)} .btn-primary{background: #1890ff;color: white;border-color: #1890ff} .btn-primary:hover{background: #40a9ff;border-color: #40a9ff} .btn-primary:active{background: #096dd9;border-color: #096dd9} .btn-secondary{background: white;color: #555;border-color: #d0d0d0} .btn-secondary:hover{background: #e8e8e8;color: #333;border-color: #999} @keyframes modal-fade-in{from{opacity: 0} to{opacity: 1} } @keyframes modal-slide-in{from{transform: scale(0.9) translateY(-10px);opacity: 0} to{transform: scale(1) translateY(0);opacity: 1} } @media (max-width: 768px){.modal{width: 95vw !important;margin: 10px} .modal-body{padding: 16px} } @media (prefers-reduced-motion: reduce){.modal-overlay, .modal{animation: none;transition: none} } :root{--cf-color-primary: #1890ff;--cf-color-success: #52c41a;--cf-color-error: #ff4d4f;--cf-color-warning: #faad14;--cf-bg-primary: #fafafa;--cf-bg-secondary: #f9f9f9;--cf-bg-white: #ffffff;--cf-bg-light: #f8f8f8;--cf-bg-preview: #f5f5f5;--cf-border-light: #e0e0e0;--cf-border-medium: #d0d0d0;--cf-border-dark: #c0c0c0;--cf-border-input: #ddd;--cf-text-primary: #222;--cf-text-secondary: #333;--cf-text-disabled: #999;--cf-text-default: #000000;--cf-border-radius: 6px;--cf-border-radius-small: 4px;--cf-border-radius-input: 3px;--cf-spacing-xs: 4px;--cf-spacing-sm: 8px;--cf-spacing-md: 12px;--cf-spacing-lg: 16px;--cf-spacing-xl: 20px;--cf-font-size-sm: 12px;--cf-font-size-md: 14px;--cf-font-size-lg: 16px;--cf-checkbox-size: 16px;--cf-color-input-width: 60px;--cf-color-input-height: 40px;--cf-z-modal: 10000;--cf-z-toast: 10001;--cf-transition-fast: 0.2s ease;--cf-transition-normal: 0.3s ease} .cf-btn-icon{background: none;border: none;padding: var(--cf-spacing-xs) var(--cf-spacing-sm);cursor: pointer;font-size: var(--cf-font-size-md);border-radius: var(--cf-border-radius-small);transition: background var(--cf-transition-fast);line-height: 1} .cf-btn-icon:hover{background: rgba(0, 0, 0, 0.1)} .cf-btn-icon:disabled{opacity: 0.3;cursor: not-allowed} .cf-rules-toolbar{display: flex;align-items: center;justify-content: space-between;margin-bottom: var(--cf-spacing-xl);padding: var(--cf-spacing-lg);background: var(--cf-bg-primary);border-radius: var(--cf-border-radius);border: 1px solid var(--cf-border-light)} .cf-rules-stats{font-size: var(--cf-font-size-md);color: var(--cf-text-primary)} .cf-stats-text{font-weight: 500} .cf-rules-list{display: flex;flex-direction: column;gap: var(--cf-spacing-md)} .cf-rule-item{border: 1px solid var(--cf-border-light);border-radius: var(--cf-border-radius);background: var(--cf-bg-secondary);transition: all var(--cf-transition-fast)} .cf-rule-item:hover{border-color: var(--cf-color-primary);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)} .cf-rule-header{padding: var(--cf-spacing-lg);display: flex;align-items: center;gap: var(--cf-spacing-lg)} .cf-rule-info{flex: 1;min-width: 0} .cf-rule-name{font-weight: 600;font-size: var(--cf-font-size-md);color: var(--cf-text-primary);margin-bottom: var(--cf-spacing-xs)} .cf-rule-description{font-size: 12px;color: #333;font-family: 'Courier New', monospace} .cf-rule-preview{flex-shrink: 0} .cf-preview-cell{padding: 4px 8px;border: 1px solid #ddd;border-radius: 4px;font-size: 12px;min-width: 60px;text-align: center} .cf-rule-actions{flex-shrink: 0;display: flex;gap: 4px} .cf-empty-state{text-align: center;padding: 40px 20px;color: #333} .cf-empty-state p{margin: 8px 0} .cf-rule-form{display: flex;flex-direction: column;gap: 20px} .cf-form-row{display: flex;flex-direction: column;gap: 8px} .cf-rule-form .cf-form-label{font-weight: 600;font-size: 14px;color: #222} .cf-rule-form .cf-form-input, .cf-rule-form .cf-form-select{padding: var(--cf-spacing-sm) var(--cf-spacing-md);border: 1px solid var(--cf-border-medium);border-radius: var(--cf-border-radius);font-size: var(--cf-font-size-md);transition: border-color var(--cf-transition-fast);outline: none;background: var(--cf-bg-secondary);color: var(--cf-text-secondary)} .cf-rule-form .cf-form-input:focus, .cf-rule-form .cf-form-select:focus{border-color: var(--cf-color-primary);box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);background: var(--cf-bg-white)} .cf-rule-form .cf-form-section{padding: 20px;background: #f8f8f8;border-radius: 6px;border: 1px solid #e0e0e0} .cf-rule-form .cf-form-section h4{margin: 0 0 16px 0;font-size: 16px;font-weight: 600;color: #222} .cf-color-input-group{display: flex;gap: 12px;align-items: center} .cf-rule-form .cf-color-input{width: var(--cf-color-input-width);height: var(--cf-color-input-height);border: 1px solid var(--cf-border-dark);border-radius: var(--cf-border-radius);cursor: pointer;outline: none;background: var(--cf-bg-secondary);padding: 0} .cf-color-input:focus{border-color: var(--cf-color-primary)} .cf-color-text{flex: 1;font-family: 'Courier New', monospace} .cf-checkbox-group{display: flex;gap: 16px;flex-wrap: wrap} .cf-checkbox-label{display: flex;align-items: center;gap: 8px;cursor: pointer;font-size: 14px;user-select: none} .cf-checkbox-label input[type="checkbox"]{display: none} .cf-rule-form .cf-checkbox-custom{width: var(--cf-checkbox-size);height: var(--cf-checkbox-size);border: 2px solid var(--cf-border-dark);border-radius: var(--cf-border-radius-input);display: flex;align-items: center;justify-content: center;transition: all var(--cf-transition-fast);position: relative;background: var(--cf-bg-secondary)} .cf-checkbox-label input[type="checkbox"]:checked + .cf-checkbox-custom{background: var(--cf-color-primary);border-color: var(--cf-color-primary)} .cf-checkbox-label input[type="checkbox"]:checked + .cf-checkbox-custom::after{content: '✓';color: white;font-size: 12px;font-weight: bold} .cf-rule-form .cf-preview-container{padding: 16px;background: #f5f5f5;border-radius: 6px;border: 1px solid #e0e0e0} .cf-formatted{position: relative} .cf-toast{position: fixed;top: var(--cf-spacing-xl);right: var(--cf-spacing-xl);padding: var(--cf-spacing-md) var(--cf-spacing-xl);border-radius: var(--cf-border-radius);font-size: var(--cf-font-size-md);font-weight: 500;z-index: var(--cf-z-toast);transform: translateX(100%);transition: transform var(--cf-transition-normal);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .cf-toast-success{background: var(--cf-color-success);color: var(--cf-bg-white)} .cf-toast-error{background: var(--cf-color-error);color: var(--cf-bg-white)} .cf-toast-show{transform: translateX(0)} .cf-formatted{} .cf-row-formatted{transition: all 0.2s ease} tr:has(.cf-row-formatted):hover .cf-row-formatted{opacity: 0.9} @media (max-width: 768px){.cf-modal{width: 95vw !important;margin: 10px} .cf-modal-body{padding: 16px} .cf-rule-header{flex-direction: column;align-items: flex-start;gap: 12px} .cf-rule-actions{align-self: flex-end} .cf-checkbox-group{flex-direction: column;gap: 12px} .cf-color-input-group{flex-direction: column;align-items: stretch} } @media (prefers-reduced-motion: reduce){.cf-toast{animation: none;transition: none} }