/**
 * PRODEFIS Chart Styles
 */

/* Modal Overlay */
.chartModalOverlay {
    position: fixed;
    top: var(--chart-modal-offset, 0px);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--chart-modal-offset, 0px));
    background: rgba(60, 60, 60, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chartModalOverlay.visible {
    opacity: 1;
}

/* Modal Content */
.chartModalContent {
    background: #fff;
    border-radius: 4px;
    width: 92vw;
    height: 88vh;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.chartModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: #3c3c3c;
    color: #fff;
    position: relative;
    z-index: 1;
}

.chartModalTitle {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.chartModalClose {
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.8;
}

.chartModalClose:hover {
    opacity: 1;
}

.chartModalBody {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Footer Actions */
.chartModalFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid rgb(220, 220, 220);
}

/* Chart Warning Banner */
.chartWarning {
    padding: 10px 14px;
    background: rgb(255, 250, 240);
    border: 1px solid rgb(255, 200, 100);
    border-radius: 4px;
    color: rgb(140, 100, 20);
    font-size: 12px;
    margin-bottom: 10px;
}

.chartBtnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #333;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s ease;
}

.chartBtnPrimary:hover {
    background: #000;
}

.chartBtnPrimary svg {
    flex-shrink: 0;
    stroke: #fff;
}

.chartBtnSecondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: rgb(80, 80, 80);
    border: 1px solid rgb(200, 200, 200);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.15s ease;
}

.chartBtnSecondary:hover {
    background: rgb(248, 248, 248);
    border-color: rgb(180, 180, 180);
    color: rgb(60, 60, 60);
}

.chartBtnSecondary svg {
    flex-shrink: 0;
    stroke: rgb(100, 100, 100);
}

/* Config Panel */
.chartConfigPanel {
    width: 240px;
    min-width: 240px;
    border-right: 1px solid #e5e5e5;
    background: #fafafa;
    display: flex;
    flex-direction: column;
}

.chartConfigHeader {
    display: flex;
    padding: 0 12px 0 0;
    background: #f0f0f0;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 30;
}

.chartConfigTabs {
    display: flex;
    gap: 0;
    flex: 1;
}

.chartConfigTab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chartConfigTab:hover {
    color: #555;
}

.chartConfigTab.active {
    color: #3c3c3c;
    border-bottom-color: #3c3c3c;
}

.chartConfigHeaderLeft:hover {
    background: #e8e8e8;
}

.chartConfigToggleIcon {
    margin-right: 6px;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    display: none;
}

.chartConfigHeaderLeft {
    pointer-events: none;
    cursor: default;
}

.chartConfigHeaderLeft:hover {
    background: transparent;
}

@media screen and (max-width: 1024px) {
    .chartConfigToggleIcon {
        display: block;
    }
    .chartConfigHeaderLeft {
        pointer-events: auto;
        cursor: pointer;
    }
    .chartConfigHeaderLeft:hover {
        background: #e8e8e8;
    }
}

.chartBtnReset {
    background: #eee;
    border: 1px solid #ccc;
    color: #666;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
}

.chartBtnReset:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #bbb;
}

.chartConfigContent {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.chartConfigSection {
    margin-bottom: 16px;
}

.chartConfigLabel {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.chartConfigSelect select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    color: #3c3c3c;
}

.chartConfigSelect select:focus {
    outline: none;
}

.chartConfigSelect select:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #eee;
}

/* Chart Type Tiles */
.chartTypeTiles {
    display: flex;
    gap: 6px;
}

.chartTypeTile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chartTypeTile:hover {
    border-color: #bbb;
    background: #f8f8f8;
}

.chartTypeTile.active {
    border-color: rgb(100, 100, 100);
    background: rgb(100, 100, 100);
    color: #fff;
}

.chartTypeTile svg {
    width: 20px;
    height: 20px;
}

.chartTypeTile.active svg {
    stroke: #fff;
    fill: #fff;
}

/* Searchable Select */
.chartSearchableSelect {
    position: relative;
}

.chartSearchInput {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    box-sizing: border-box;
    color: #3c3c3c;
}

.chartSearchInput:focus {
    outline: none;
}

.chartDropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 3px 3px;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.chartDropdown.visible {
    display: block;
}


.chartDropdownItem {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
    color: #3c3c3c;
}

.chartDropdownItem:last-child {
    border-bottom: none;
}

.chartDropdownItem:hover {
    background: #f5f5f5;
}

.chartDropdownItem.selected,
.chartDropdownItem.selected:hover {
    background: rgb(100, 100, 100);
    color: #fff;
}

.chartDropdownItem.selected .columnType,
.chartDropdownItem.selected:hover .columnType {
    color: rgba(255, 255, 255, 0.7);
}

.chartDropdownHeader {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    background: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
}

.chartDropdownItem .columnType {
    font-size: 10px;
    color: #999;
    margin-left: 6px;
}

.chartFilterBadge {
    background: #a4823e;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
}

.chartFilterContent {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.chartSortRow select,
.chartTopNRow select {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}

.chartTopNRow {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chartTopNRow input {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

.chartFiltersList {
    margin-bottom: 8px;
    position: relative;
}

/* Filter item - each filter row */
.chartFilterItem {
    margin-bottom: 8px;
    position: relative;
}

.chartFilterItem:last-child {
    margin-bottom: 0;
}

/* Filter header row */
.chartFilterHeader {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

.chartFilterHeader.hasValue {
    background: #f5f0e5;
    border-color: #a4823e;
}

/* Searchable select within filter */
.chartFilterSelect {
    position: relative;
    flex: 1;
    min-width: 0;
}

.chartFilterSelectInput {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
}

.chartFilterSelectInput:focus {
    outline: none;
    border-color: #999;
}

.chartFilterSelectDropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 3px 3px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.chartFilterSelectDropdown.visible {
    display: block;
}

.chartFilterSelectItem {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.chartFilterSelectItem:hover {
    background: #f5f5f5;
}

.chartFilterSelectItem.selected {
    background: #f5f0e5;
    font-weight: 500;
}

.chartFilterSelectItem .count {
    float: right;
    color: #999;
    font-size: 10px;
}

/* Operator select */
.chartFilterOp {
    width: auto;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    background: #fff;
    cursor: pointer;
}

/* Value input */
.chartFilterValue {
    flex: 1;
    min-width: 80px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}

.chartFilterValue:focus {
    outline: none;
    border-color: #999;
}

/* Remove button */
.chartFilterRemove {
    padding: 4px 8px;
    border: none;
    background: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

.chartFilterRemove:hover {
    color: #c00;
}

/* Selected values display */
.chartFilterSelected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 6px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 3px;
}

.chartFilterTag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    background: #a4823e;
    color: #fff;
    font-size: 11px;
    border-radius: 2px;
    max-width: 150px;
}

.chartFilterTag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chartFilterTag button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    line-height: 1;
}

.chartFilterTag button:hover {
    color: #fff;
}

.chartFilterClearAll {
    font-size: 10px;
    color: #999;
    cursor: pointer;
    padding: 3px 6px;
    align-self: center;
}

.chartFilterClearAll:hover {
    color: #c00;
}

/* Add filter button */
.chartFilterAdd {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px dashed #ddd;
    border-radius: 3px;
    background: none;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.chartFilterAdd:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #666;
}

/* Apply button */
.chartFilterApply {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
}


.chartFilterEmpty {
    font-size: 11px;
    color: #999;
    padding: 12px;
    text-align: center;
    background: #fafafa;
    border-radius: 3px;
}

/* Legacy styles kept for compatibility */
.chartFilterRow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding: 10px;
    padding-right: 32px;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}

.chartFilterRow select,
.chartFilterRow input {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.chartFilterRow select:focus,
.chartFilterRow input:focus {
    outline: none;
    border-color: #999;
}

.chartFilterInputRow {
    display: flex;
    gap: 6px;
}

.chartFilterInputRow input {
    flex: 1;
    min-width: 0;
}

.chartFilterRemove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
}

.chartFilterRemove:hover {
    color: #c00;
}

.chartBtnSmall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    font-size: 11px;
    color: #666;
    cursor: pointer;
}

.chartBtnSmall:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.chartBtnApply {
    margin-top: 8px;
    background: rgb(100, 100, 100);
    color: #fff;
    border-color: rgb(100, 100, 100);
}

.chartBtnApply:hover {
    background: rgb(80, 80, 80);
}

/* Config Actions */
.chartConfigActions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.chartBtn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Chart Display */
.chartDisplayPanel {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.chartContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.chartPlaceholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
}

#__echartDiv {
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 2;
}

.chartConfigHint {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* ============================================
   DATA VIEW
   ============================================ */

/* Data View Container */
.chartDataView {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
}

/* Data View Toolbar */
.chartDataViewToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid rgb(235, 235, 235);
    flex-shrink: 0;
    gap: 12px;
}

.chartDataViewToolbarLeft {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chartDataViewToolbarRight {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Back Button */
.chartDataViewBack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 4px;
    color: rgb(60, 60, 60);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.chartDataViewBack:hover {
    background: rgb(248, 248, 248);
    border-color: rgb(200, 200, 200);
}

.chartDataViewBack svg {
    width: 14px;
    height: 14px;
    stroke: rgb(100, 100, 100);
}

/* Search Box */
.chartDataViewSearch {
    position: relative;
    flex: 1;
    max-width: 320px;
    min-width: 150px;
}

.chartDataViewSearch input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 4px;
    font-size: 13px;
    color: rgb(60, 60, 60);
    background: rgb(250, 250, 250);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.chartDataViewSearch input:focus {
    outline: none;
    background: #fff;
    border-color: rgb(100, 100, 100);
}

.chartDataViewSearch input::placeholder {
    color: rgb(160, 160, 160);
}

.chartDataViewSearchIcon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    stroke: rgb(160, 160, 160);
    pointer-events: none;
}

.chartSearchSpinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgb(220, 220, 220);
    border-top-color: rgb(100, 100, 100);
    border-radius: 50%;
    animation: chartSpinnerRotate 0.6s linear infinite;
}

@keyframes chartSpinnerRotate {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Sort Dropdown */
.chartDataViewSort select {
    padding: 8px 28px 8px 10px;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 4px;
    font-size: 13px;
    color: rgb(60, 60, 60);
    background: rgb(250, 250, 250);
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.chartDataViewSort select:hover {
    border-color: rgb(200, 200, 200);
    background-color: #fff;
}

.chartDataViewSort select:focus {
    outline: none;
    border-color: rgb(100, 100, 100);
}

/* Stats Badge */
.chartDataViewStats {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgb(248, 248, 248);
    border-radius: 4px;
    font-size: 12px;
    color: rgb(100, 100, 100);
    white-space: nowrap;
}

.chartDataViewStats strong {
    color: rgb(60, 60, 60);
    font-weight: 600;
}

/* Toolbar Buttons */
.chartDataViewBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 4px;
    color: rgb(80, 80, 80);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.chartDataViewBtn:hover {
    background: rgb(248, 248, 248);
    border-color: rgb(200, 200, 200);
}

.chartDataViewBtn svg {
    width: 14px;
    height: 14px;
}

.chartDataViewBtn.active {
    background: rgb(100, 100, 100);
    border-color: rgb(100, 100, 100);
    color: #fff;
}

.chartDataViewBtn.active svg {
    stroke: #fff;
}

/* Column Selector Dropdown */
.chartColumnSelector {
    position: relative;
}

.chartColumnDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    max-height: 320px;
    background: #fff;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

.chartColumnDropdown.visible {
    display: block;
}

.chartColumnDropdownHeader {
    padding: 10px 12px;
    background: rgb(250, 250, 250);
    border-bottom: 1px solid rgb(235, 235, 235);
    font-size: 11px;
    font-weight: 600;
    color: rgb(100, 100, 100);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chartColumnDropdownList {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
}

.chartColumnDropdownItem {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.chartColumnDropdownItem:hover {
    background: rgb(248, 248, 248);
}

/* Hide native checkbox completely */
.chartColumnDropdownItem input[type="checkbox"] {
    display: none !important;
}

/* Custom checkbox via label - override app's default ::before */
.chartColumnDropdownItem label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-size: 13px;
    color: rgb(60, 60, 60);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chartColumnDropdownItem label::before {
    content: '' !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    background: #fff !important;
    border: 1px solid rgb(180, 180, 180) !important;
    border-radius: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.15s ease;
}

.chartColumnDropdownItem:hover label::before {
    border-color: rgb(140, 140, 140) !important;
}

.chartColumnDropdownItem input[type="checkbox"]:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Hidden columns styling */
.chartColumnDropdownItem.chartColumnHidden {
    opacity: 0.6;
    background: rgb(250, 250, 250);
}

.chartColumnDropdownItem.chartColumnHidden label {
    color: rgb(120, 120, 120);
}

/* Locked columns (used for grouping) */
.chartColumnDropdownItem.chartColumnLocked {
    background: rgb(248, 245, 240);
}

.chartColumnDropdownItem.chartColumnLocked label {
    color: rgb(100, 80, 50);
    font-weight: 500;
}

.chartColumnDropdownItem.chartColumnLocked input[type="checkbox"]:disabled + label::before {
    opacity: 0.7;
}

.chartColumnLock {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: rgb(100, 100, 100);
    opacity: 0.8;
}

/* Export Dropdown */
.chartExportSelector {
    position: relative;
}

.chartExportDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

.chartExportDropdown.visible {
    display: block;
}

.chartExportOption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: rgb(60, 60, 60);
    cursor: pointer;
    transition: background 0.1s ease;
}

.chartExportOption:hover {
    background: rgb(248, 248, 248);
}

.chartExportOption svg {
    stroke: rgb(100, 100, 100);
}

/* Reorder buttons */
.chartColumnReorder {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.chartColumnReorder button {
    width: 20px;
    height: 18px;
    padding: 0;
    border: 1px solid rgb(200, 200, 200);
    background: #fff;
    border-radius: 3px;
    font-size: 8px;
    color: rgb(100, 100, 100);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

.chartColumnReorder button:hover:not(:disabled) {
    background: rgb(245, 245, 245);
    border-color: rgb(180, 180, 180);
    color: rgb(60, 60, 60);
}

.chartColumnReorder button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Table Container */
.chartDataViewTableWrap {
    flex: 1;
    overflow: auto;
    background: rgb(245, 245, 245);
    padding: 0 12px; /* Restore horizontal padding */
}

/* Data Table */
.chartDataTable {
    width: 100%;
    border-collapse: separate; /* Fix sticky header issues */
    border-spacing: 0;
    background: #fff;
    table-layout: auto;
    border-radius: 4px;
    /* overflow: hidden; Removed to fix sticky header */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.chartDataTable th {
    position: sticky;
    top: 0;
    background: rgb(248, 248, 248);
    color: #000;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid rgb(200, 200, 200);
    z-index: 100; /* Ensure header is above content */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sortable headers */
.chartSortableHeader {
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.chartSortableHeader:hover {
    background: rgb(242, 242, 242);
}

.chartHeaderFilterBadge {
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    background: #a4823e;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 3px;
    vertical-align: middle;
}

.chartSortIndicator {
    color: rgb(100, 100, 100);
    font-weight: 700;
    margin-left: 4px;
}

.chartSortIndicator.loading {
    font-size: 0;
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
}

.chartSortIndicator.loading::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(220, 220, 220);
    border-top-color: rgb(100, 100, 100);
    border-radius: 50%;
    animation: chartToggleSpinner 0.6s linear infinite;
}

/* Drill-down highlight */
.chartHighlightRow td {
    animation: chartRowHighlight 2s ease-out;
}

@keyframes chartRowHighlight {
    0% { background: rgba(100, 100, 100, 0.3) !important; }
    100% { background: rgb(250, 250, 250) !important; }
}

/* Keyboard focus styles */
.chartGroupRow:focus {
    outline: 2px solid rgb(100, 100, 100);
    outline-offset: -2px;
}

.chartGroupRow:focus td {
    background: rgb(255, 252, 245) !important;
}

.chartSortableHeader:focus {
    outline: 2px solid rgb(100, 100, 100);
    outline-offset: -2px;
}

/* Calculation Column */
.chartCalcHeader,
.chartCalcCell {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: right;
    padding: 10px 12px !important; /* Restore standard padding */
}

.chartCalcHeader {
    color: #000 !important;
    font-weight: 700;
    background: rgb(248, 248, 248) !important;
    cursor: pointer;
}

.chartCalcCell > div {
    padding: 0 !important;
    font-size: 11px;
    font-weight: 600;
    color: rgb(100, 100, 100);
    font-variant-numeric: tabular-nums;
}

.chartGroupRow .chartCalcCell > div {
    font-weight: 700;
    color: #000;
    font-size: 12px;
}

.chartGroupRow[data-level="series"] .chartCalcCell > div {
    color: #000;
}

.chartRecordRow .chartCalcCell > div {
    color: rgb(180, 180, 180);
    font-weight: 500;
}

.chartDataTable td {
    padding: 0;
    vertical-align: top;
    background: #fff;
    border-bottom: 1px solid rgb(240, 240, 240);
    transition: background 0.1s ease;
}

.chartDataTable td > div {
    padding: 8px 12px;
    font-size: 12px;
    color: rgb(50, 50, 50);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zebra striping for record rows */
.chartRecordRow:nth-child(odd) td {
    background: rgb(252, 252, 252);
}

.chartRecordRow:nth-child(even) td {
    background: #fff;
}

/* Strong hover effect */
.chartDataTable tbody tr:hover td {
    background: rgb(248, 248, 248) !important;
}

.chartDataTable tbody tr.chartRecordRow:hover td:first-child {
    box-shadow: inset 3px 0 0 rgb(150, 150, 150);
}

/* Group Header Rows */
.chartGroupRow {
    cursor: pointer;
    transition: all 0.15s ease;
}

.chartGroupRow td {
    background: rgb(245, 245, 245) !important;
    border-bottom: 1px solid rgb(220, 220, 220) !important;
    border-top: 1px solid rgb(235, 235, 235);
}

/* Category (top-level) group styling */
.chartGroupRow[data-level="category"] td:first-child {
    box-shadow: inset 4px 0 0 rgb(150, 150, 150);
}

/* Series (nested) group styling */
.chartGroupRow[data-level="series"] td:first-child {
    box-shadow: inset 4px 0 0 rgb(180, 180, 180);
}

.chartGroupRow:hover td {
    background: rgb(240, 240, 240) !important;
}

.chartGroupRow td > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #000;
}

/* Tree Icons */
.chartTreeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chartTreeToggle svg {
    width: 10px;
    height: 10px;
    stroke: rgb(100, 100, 100);
    stroke-width: 2.5;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chartGroupRow:hover .chartTreeToggle {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.chartGroupRow.expanded .chartTreeToggle svg {
    transform: rotate(90deg);
}

.chartGroupRow.expanded .chartTreeToggle {
    background: rgba(0, 0, 0, 0.08);
}

.chartTreeToggle.loading svg {
    display: none;
}

.chartTreeToggle.loading::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid rgb(220, 220, 220);
    border-top-color: rgb(100, 100, 100);
    border-radius: 50%;
    animation: chartToggleSpinner 0.6s linear infinite;
}

@keyframes chartToggleSpinner {
    to { transform: rotate(360deg); }
}

/* Group Label */
.chartGroupLabel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group Count Badge */
.chartGroupCount {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: rgb(240, 240, 240);
    border: 1px solid rgb(220, 220, 220);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: rgb(80, 80, 80);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* Total Row (static header) */
.chartTotalRow {
    cursor: default;
}

.chartTotalRow td {
    background: rgb(250, 250, 250) !important;
    border-bottom: 1px solid rgb(235, 235, 235) !important;
}

.chartTotalRow:hover td {
    background: rgb(250, 250, 250) !important;
}

.chartTotalRow td > div {
    font-weight: 500;
    font-size: 12px;
    color: rgb(80, 80, 80);
}

.chartTotalRow .chartGroupCount {
    background: rgb(220, 220, 220);
    color: rgb(80, 80, 80);
}

/* Indentation Levels (applied to label column - either first or second depending on calc column) */
.chartDataTable tr[data-indent="1"] td:nth-child(2) > div,
.chartDataTable tr[data-indent="1"] td:first-child:not(.chartCalcCell) > div {
    padding-left: 28px;
}

.chartDataTable tr[data-indent="2"] td:nth-child(2) > div,
.chartDataTable tr[data-indent="2"] td:first-child:not(.chartCalcCell) > div {
    padding-left: 44px;
}

.chartDataTable tr[data-indent="3"] td:nth-child(2) > div,
.chartDataTable tr[data-indent="3"] td:first-child:not(.chartCalcCell) > div {
    padding-left: 60px;
}

/* Tree Line Indicator */
.chartDataTable tr[data-indent="1"] td:nth-child(2),
.chartDataTable tr[data-indent="2"] td:nth-child(2),
.chartDataTable tr[data-indent="3"] td:nth-child(2),
.chartDataTable tr[data-indent="1"] td:first-child:not(.chartCalcCell),
.chartDataTable tr[data-indent="2"] td:first-child:not(.chartCalcCell),
.chartDataTable tr[data-indent="3"] td:first-child:not(.chartCalcCell) {
    position: relative;
}

.chartDataTable tr[data-indent="1"] td:nth-child(2)::before,
.chartDataTable tr[data-indent="1"] td:first-child:not(.chartCalcCell)::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(215, 215, 215);
    border-radius: 1px;
}

.chartDataTable tr[data-indent="2"] td:nth-child(2)::before,
.chartDataTable tr[data-indent="2"] td:first-child:not(.chartCalcCell)::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(215, 215, 215);
    border-radius: 1px;
}

.chartDataTable tr[data-indent="3"] td:nth-child(2)::before,
.chartDataTable tr[data-indent="3"] td:first-child:not(.chartCalcCell)::before {
    content: '';
    position: absolute;
    left: 52px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(215, 215, 215);
    border-radius: 1px;
}

/* Record Rows */
.chartRecordRow td {
    transition: background 0.1s ease, box-shadow 0.1s ease;
}

.chartRecordRow td:nth-child(2) > div,
.chartRecordRow td:first-child:not(.chartCalcCell) > div {
    padding-left: 12px !important;
}

.chartRecordRow td:nth-child(2)::before,
.chartRecordRow td:first-child:not(.chartCalcCell)::before {
    display: none !important;
}

/* Empty cell placeholder */
.chartRecordRow td > div > span[style*="color:#ccc"],
.chartRecordRow td > div > span[style*="color: #ccc"] {
    font-style: italic;
    opacity: 0.5;
}

/* Row expand animation */
.chartGroupRow + tr {
    animation: chartRowSlideIn 0.2s ease-out;
}

@keyframes chartRowSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Load More Row */
.chartLoadMoreRow {
    cursor: pointer;
    transition: all 0.15s ease;
}

.chartLoadMoreRow td {
    background: rgb(250, 250, 250) !important;
    border-top: 1px dashed rgb(200, 200, 200) !important;
    border-bottom: 1px dashed rgb(200, 200, 200) !important;
}

.chartLoadMoreRow td > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    color: rgb(100, 100, 100);
    font-weight: 600;
    font-size: 11px;
}

.chartLoadMoreRow td > div svg {
    stroke: rgb(100, 100, 100);
    transition: transform 0.2s ease;
}

.chartLoadMoreRow:hover td {
    background: rgb(245, 245, 245) !important;
}

.chartLoadMoreRow:hover td > div {
    color: rgb(60, 60, 60);
}

.chartLoadMoreRow:hover td > div svg {
    transform: translateY(2px);
}

/* Empty State */
.chartDataViewEmpty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgb(150, 150, 150);
    text-align: center;
}

.chartDataViewEmpty svg {
    width: 48px;
    height: 48px;
    stroke: rgb(200, 200, 200);
    margin-bottom: 16px;
}

.chartDataViewEmpty p {
    font-size: 14px;
    margin: 0;
}

/* Search Highlight */
.chartSearchMatch {
    background: rgba(100, 100, 100, 0.25);
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 600;
}

/* Search Result Rows */
.chartSearchResultRow td {
    background: rgb(255, 253, 248) !important;
}

.chartSearchResultRow:hover td {
    background: rgb(255, 251, 242) !important;
}

.chartSearchMoreRow td > div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgb(100, 100, 100);
    font-weight: 500;
}

.chartSearchMoreRow:hover td {
    background: rgb(255, 248, 235) !important;
}

.chartSearchMoreRow:hover td > div {
    color: rgb(80, 80, 80);
}

/* No Results */
.chartNoResults {
    padding: 40px 20px;
    text-align: center;
    color: rgb(150, 150, 150);
    font-size: 14px;
}

/* Scrollbar Styling */
.chartDataViewTableWrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.chartDataViewTableWrap::-webkit-scrollbar-track {
    background: rgb(245, 245, 245);
}

.chartDataViewTableWrap::-webkit-scrollbar-thumb {
    background: rgb(200, 200, 200);
    border-radius: 4px;
}

.chartDataViewTableWrap::-webkit-scrollbar-thumb:hover {
    background: rgb(180, 180, 180);
}

/* Mobile Adjustments for Data View */
@media screen and (max-width: 1024px) {
    .chartDataViewToolbar {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }

    .chartDataViewToolbarLeft {
        width: 100%;
        order: 2;
        flex-wrap: wrap;
    }

    .chartDataViewToolbarRight {
        width: 100%;
        order: 1;
        justify-content: space-between;
    }

    .chartDataViewBack {
        order: 1;
    }

    .chartDataViewStats {
        order: 2;
    }

    .chartDataViewSearch {
        max-width: none;
        flex: 1 1 100%;
    }

    .chartDataViewSort {
        flex: 1 1 auto;
    }

    .chartDataViewSort select {
        width: 100%;
    }

    .chartDataTable th,
    .chartDataTable td > div {
        padding: 6px 8px;
    }

    .chartColumnDropdown {
        right: auto;
        left: 0;
    }
}

/* Checkboxes */
.chartConfigCheckboxes {
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}

.chartCheckboxRow {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.chartCheckboxRow input[type="checkbox"] {
    width: 0;
    height: 0;
    visibility: hidden;
    position: absolute;
}

.chartCheckboxRow input[type="checkbox"] + label {
    font-size: 13px;
    color: #3c3c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.chartCheckboxRow input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 1px solid rgb(180,180,180);
    border-radius: 2px;
    margin-right: 8px;
    flex-shrink: 0;
}

.chartCheckboxRow input[type="checkbox"]:hover + label::before {
    border-color: rgb(60,60,60);
}

.chartCheckboxRow input[type="checkbox"]:checked + label::before {
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Chart Button */
.m_mainTableChartBtn {
    position: fixed;
    z-index: 2;
    bottom: 0;
    right: 0;
    margin: 16px;
    margin-bottom: 21px;
    background-color: white;
    border: 2px solid white;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.35);
}

.m_mainTableChartBtn table {
    width: auto;
    border-collapse: separate;
    border-spacing: 2px;
}

.m_mainTableChartBtn td {
    width: auto;
    min-width: 34px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    background-color: rgb(240, 240, 240);
    padding: 7px 10px;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 3px;
    box-sizing: border-box;
    white-space: nowrap;
    color: #3c3c3c;
    cursor: pointer;
}

.m_mainTableChartBtn td:hover {
    border: 1px solid rgb(230, 230, 230) !important;
    background: rgb(230, 230, 230) !important;
}

.m_mainTableChartBtn td svg,
.m_mainTableChartBtn td span {
    vertical-align: middle;
    display: inline-block;
}

.m_mainTableChartBtn td svg {
    width: 14px;
    height: 14px;
    color: #3c3c3c;
}


/* Mobile tab buttons in footer - hidden on desktop */
.chartFooterMobileButtons {
    display: none;
}

/* Mobile & Tablet Responsiveness */
@media screen and (max-width: 1024px) {
    .chartModalOverlay {
        align-items: stretch;
        justify-content: stretch;
    }

    .chartModalContent {
        width: 100vw;
        height: calc(100vh - var(--chart-modal-offset, 0px));
        height: calc(100dvh - var(--chart-modal-offset, 0px)); /* Use dynamic viewport height for mobile browsers */
        max-width: none;
        max-height: none;
        border-radius: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* iOS safe area support */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .chartModalBody {
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Hide the entire config panel header when collapsed on mobile */
    .chartConfigPanel.collapsed .chartConfigHeader {
        display: none;
    }

    /* When collapsed, panel takes no space */
    .chartConfigPanel.collapsed {
        border-bottom: none;
        max-height: 0;
        height: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .chartConfigPanel {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 60vh; /* Reduced from 70vh to ensure footer visibility */
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        flex-shrink: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .chartConfigHeader {
        display: flex;
        flex-shrink: 0;
        padding: 8px 12px;
        gap: 8px;
        align-items: center;
        background: #f8f8f8;
        border-bottom: 1px solid #e5e5e5;
    }

    /* Hide the small chevron toggle on mobile - we use footer buttons instead */
    .chartConfigHeaderLeft {
        display: none;
    }

    .chartConfigTabs {
        flex: 1;
    }

    /* Active state for mobile toggle buttons */
    .chartMobileTabBtn.active {
        background: var(--colorE-FILE, var(--colorTPMS, #a4823e));
        border-color: var(--colorE-FILE, var(--colorTPMS, #a4823e));
        color: #fff;
    }

    .chartMobileTabBtn.active svg {
        stroke: #fff;
    }

    .chartConfigContent,
    .chartFilterContent {
        flex: 1;
        overflow-y: auto;
        transition: none;
        opacity: 1;
    }

    .chartConfigPanel.collapsed .chartConfigContent,
    .chartConfigPanel.collapsed .chartFilterContent {
        display: none;
    }

    .chartDisplayPanel {
        flex: 1;
        min-height: 100px; /* Ensure minimum space for chart */
        padding: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .chartContainer {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: auto;
    }

    #__echartDiv {
        flex: 1;
        width: 100%;
        height: 100%;
        min-height: 150px; /* Reduced minimum height for mobile */
    }

    .chartConfigActions {
        margin-top: 10px;
        padding-top: 10px;
    }

    .chartBtn {
        padding: 12px;
    }

    /* Footer - always visible and responsive */
    .chartModalFooter {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        /* Ensure footer is always visible */
        position: relative;
        z-index: 10;
    }

    /* Show mobile tab buttons */
    .chartFooterMobileButtons {
        display: flex;
        gap: 6px;
        flex: 1;
    }

    .chartMobileTabBtn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #555;
        cursor: pointer;
        flex: 1;
        justify-content: center;
    }

    .chartMobileTabBtn:hover,
    .chartMobileTabBtn:active {
        background: #eee;
        border-color: #ccc;
    }

    .chartMobileTabBtn svg {
        flex-shrink: 0;
    }

    .chartBtnPrimary,
    .chartBtnSecondary {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .chartBtnSecondary span {
        display: none;
    }

    /* Ensure dropdowns work on mobile */
    .chartDropdown {
        max-height: 40vh;
    }

    .chartFilterValues {
        max-height: 50vh !important;
    }
}

/* ============================================
   FILTERING SYSTEM
   ============================================ */


.chartFilterPanel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}

.chartFilterWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chartFilterColumn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    white-space: nowrap;
}

.chartFilterColumn:hover {
    border-color: #bbb;
    background: #f9f9f9;
    color: #333;
}

.chartFilterColumn.active {
    border-color: #999;
    background: #f0f0f0;
    z-index: 1001; /* Above dropdown if needed */
}

/* Active Filter State (Has Values) */

.chartFilterColumn.hasFilter:hover {
    background: #87733d;
    opacity: 0.9;
}

.chartFilterColumn.hasFilter .chartFilterColIcon {
    stroke: #fff;
}

.chartFilterColIcon {
    width: 14px;
    height: 14px;
    stroke: #888;
    transition: transform 0.2s ease;
}

.chartFilterColumn.active .chartFilterColIcon {
    transform: rotate(180deg);
}

.chartFilterColClear {
    font-size: 16px;
    line-height: 1;
    margin-right: -2px;
    margin-left: 2px;
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: background 0.2s;
}

.chartFilterColClear:hover {
    background: rgba(255,255,255,0.2);
    opacity: 1;
}

/* Selected Tags (Chips) */
.chartFilterTags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    margin-left: 4px;
    max-width: 250px;
}

.chartFilterTag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 11px;
    color: #333;
    max-width: 100%;
}

.chartFilterTag span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chartFilterTag button {
    background: none;
    border: none;
    color: #999;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    display: flex;
    align-items: center;
}

.chartFilterTag button:hover {
    color: #555;
}

.chartFilterTagClear {
    font-size: 10px;
color: #a4823e;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
}

/* Dropdown Menu - Fixed position to escape overflow containers */
.chartFilterValues {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.chartFilterValues.visible {
    display: block;
}

.chartFilterSearch {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.chartFilterSearch:focus {
    background: #fafafa;
}

.chartFilterValueList {
    max-height: 250px;
    overflow-y: auto;
    padding: 4px 0;
}

.chartFilterValueItem {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.1s;
    user-select: none;
}

.chartFilterValueItem:hover {
    background: #f5f5f5;
}

.chartFilterValueItem.checked {
    background: #fcf8f0;
    font-weight: 500;
}

.chartFilterValueItem input {
    margin-right: 10px;
    accent-color: #a4823e;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.chartFilterValueCount {
    margin-left: auto;
    font-size: 11px;
    color: #999;
    padding-left: 8px;
}

/* Advanced Filters */
.chartAdvancedFilters {
    margin-top: 16px;
    background: #fafafa;
    border-radius: 6px;
    overflow: hidden;
}

.chartAdvancedFiltersHeader {
    padding: 6px 10px;
    cursor: default;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #f8f8f8;
}

.chartAdvFilterBadge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 8px;
}

.chartAdvFilterIcon {
    margin-left: auto;
    transition: transform 0.2s;
}

.chartAdvancedFiltersHeader.open .chartAdvFilterIcon {
    transform: rotate(180deg);
}

.chartAdvancedFiltersContent {
    display: none;
    padding: 14px;
    border-top: 1px solid #eee;
}

.chartAdvancedFiltersContent.visible {
    display: block;
}

.chartAdvRow {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.chartAdvRow:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.chartAdvSelect, .chartAdvInput {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fff;
    height: 34px;
    box-sizing: border-box;
}

.chartAdvSelect {
    min-width: 140px;
    cursor: pointer;
}

.chartAdvColSelect {
    flex: 1;
    min-width: 140px;
}

.chartAdvOpSelect {
    width: 130px;
    min-width: 130px;
}

.chartAdvColSelect .chartSearchInput,
.chartAdvOpSelect .chartSearchInput {
    height: 34px;
    padding: 7px 10px;
}

.chartAdvSelectOp {
    width: 100px;
    min-width: 100px;
}

.chartAdvInput {
    flex: 1;
    min-width: 120px;
}

.chartAdvRemove {
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.15s ease;
    margin-left: auto; /* Push to right */
}

.chartAdvRemove:hover {
    color: #333;
    background: #e5e5e5;
    border-color: #ccc;
    transform: scale(1.1);
}

.chartAdvActions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.chartFilterBtn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    transition: all 0.15s;
}

.chartFilterBtn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
}

.chartFilterBtnApply {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
    scroll-margin-bottom: 120px;
    
}

.chartFilterBtnApply:hover {
    background: #87733d;
}

/* Cell Quick Filter Popup */
.chartCellFilterPopup {
    position: fixed;
    z-index: 10001;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.chartCellFilterHeader {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 2px;
}

.chartCellFilterContent {
    display: flex;
    gap: 4px;
    align-items: center;
}

.chartCellFilterPopup.visible {
    opacity: 1;
    transform: scale(1);
}

.chartCellFilterInput {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fff;
    height: 30px;
    width: 180px;
    box-sizing: border-box;
    outline: none;
}

.chartCellFilterInput:focus {
    border-color: #999;
}

.chartCellFilterSave,
.chartCellFilterClose {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    transition: background 0.1s;
}

.chartCellFilterSave {
    background: #5470c6;
    color: #fff;
}

.chartCellFilterSave:hover {
    background: #4060b0;
}

.chartCellFilterClose {
    background: #f0f0f0;
    color: #888;
}

.chartCellFilterClose:hover {
    background: #e0e0e0;
    color: #555;
}

.chartRecordRow td[data-col]:not([data-col="__calc"]) {
    cursor: pointer;
}

.chartRecordRow td[data-col]:not([data-col="__calc"]):hover {
    background: rgba(84, 112, 198, 0.06);
}

/* Custom Tooltip for Chart headers/badges */
.chartCustomTooltip {
    position: absolute;
    z-index: 10002;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
    display: none;
    white-space: nowrap;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}