:root { /* Dark Theme (Default in this block) */
    --bg-color: #0d1117;          /* GitHub Dark Background */
    --surface-color: #161b22;     /* GitHub Dark Surface */
    --primary-color: #21262d;     /* GitHub Dark Primary UI */
    --font-color: #e6edf3;        /* Soft White */
    --font-color-muted: #8b949e;  /* Muted Gray */
    --border-color: #30363d;      /* Subtle Border */
    --grid-color: rgba(139, 148, 158, 0.2);
    --hover-bg-color: rgba(173, 216, 230, 0.1); /* Light Blue Hover */
    --search-bg-color: #0d1117;
    --heatmap-text-color: #e6edf3;
    --matrix-axis-bg-color: #0d1117;
    --btn-grad-start: #f778ba; --btn-grad-end: #ad53b3; /* Vibrant Magenta/Purple */
    --btn-print-grad-start: #38bdf8; --btn-print-grad-end: #3b82f6; /* Strong Cyan/Blue */
    --btn-add-grad-start: #34d399; --btn-add-grad-end: #059669; /* Bright Teal/Green */
}

body.light-theme { /* Professional Light Theme */
    --bg-color: #f8f9fa;          /* Very Light Gray */
    --surface-color: #ffffff;     /* White */
    --primary-color: #e9ecef;     /* Lighter Gray for UI elements */
    --font-color: #212529;        /* Professional Dark Gray */
    --font-color-muted: #6c757d;  /* Standard Muted Gray */
    --border-color: #dee2e6;      /* Subtle Gray Border */
    --grid-color: rgba(33, 37, 41, 0.1);
    --hover-bg-color: rgba(13, 110, 253, 0.05); /* Very Subtle Blue Hover */
    --search-bg-color: #e9ecef;
    --heatmap-text-color: #212529;
    --matrix-axis-bg-color: #e9ecef;
    --btn-grad-start: #dc3545; --btn-grad-end: #c82333; /* Corporate Red */
    --btn-print-grad-start: #0d6efd; --btn-print-grad-end: #0b5ed7; /* Corporate Blue */
    --btn-add-grad-start: #198754; --btn-add-grad-end: #157347; /* Corporate Green */
}

body.pastel-theme { /* Lively Pastel Theme */
    --bg-color: #fff7e9;          /* Soft Cream */
    --surface-color: #fffefd;     /* Off-white with hint of cream */
    --primary-color: #f3e8ff;     /* Soft Lavender */
    --font-color: #4c3b4d;        /* Dark Muted Purple */
    --font-color-muted: #9d8c9d;  /* Lighter Muted Purple */
    --border-color: #d6e4ff;      /* Pastel Blue Border */
    --grid-color: rgba(76, 59, 77, 0.1);
    --hover-bg-color: rgba(186, 225, 255, 0.4); /* Light blue hover */
    --search-bg-color: #f3e8ff;
    --heatmap-text-color: #4c3b4d;
    --matrix-axis-bg-color: #f3e8ff;
    --btn-grad-start: #ff9a9e; --btn-grad-end: #fecfef; /* Pink Sorbet */
    --btn-print-grad-start: #a1c4fd; --btn-print-grad-end: #c2e9fb; /* Sky Blue */
    --btn-add-grad-start: #d4fc79; --btn-add-grad-end: #96e6a1; /* Mint Green */
}

body.pastel-theme .btn { color: var(--font-color); font-weight: 500; }

/* === GENERAL LAYOUT === */
body { font-family: 'Tahoma', sans-serif; background-color: var(--bg-color); color: var(--font-color); margin: 0; padding: 20px; font-size: 14px; line-height: 1.6; transition: background-color 0.3s, color 0.3s; }
.container { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
header, .file-uploader, section { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: background-color 0.3s, border-color 0.3s; }
/* header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 10px; 
    
    /* --- START: Added for Sticky Header --- */
    position: sticky;
    top: 0;
    z-index: 990; /* High value to stay on top of content, but below modals (z-index: 1000) */
    /* --- END: Added for Sticky Header --- */
}
.logo-container { display: flex; align-items: center; gap: 15px; flex-grow: 1; }
.logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #536DFE, #84a0ff); border-radius: 10px; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: bold; flex-shrink: 0; font-family: 'Tahoma', sans-serif; }
.main-title-input { font-family: 'Mitr', 'Tahoma', sans-serif; font-size: 24px; font-weight: bold; color: var(--font-color); background: transparent; border: none; padding: 0; margin: 0; border-radius: 4px; flex-grow: 1; min-width: 250px; }
.main-title-input:focus { outline: 1px solid var(--border-color); background-color: var(--bg-color); padding: 0 5px;}
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
main#dashboard.hidden, #main-action-buttons.hidden { display: none !important; }
#file-uploader.hidden { display: none; }
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width: 1200px) { 
    .dashboard-grid { grid-template-columns: 3fr 1fr; }
    .dashboard-grid.no-sidebar {
        grid-template-columns: 1fr;
    }
    .dashboard-grid.no-sidebar .sidebar-content {
        display: none;
    }
}
.main-content { display: flex; flex-direction: column; gap: 20px; }

/* === BUTTON STYLES === */
.btn { background-image: linear-gradient(to right, var(--btn-grad-start), var(--btn-grad-end)); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-family: 'Tahoma'; font-size: 14px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn-print { background-image: linear-gradient(to right, var(--btn-print-grad-start), var(--btn-print-grad-end)); }
.btn-add { background-image: linear-gradient(to right, var(--btn-add-grad-start), var(--btn-add-grad-end)); color: white; }
.btn-cancel { background-image: none; background-color: var(--primary-color); color: var(--font-color); }
.btn-cancel:hover { background-color: var(--hover-bg-color); }
.btn-reset { background-image: none; background-color: var(--primary-color); } .btn-reset:hover { background-color: var(--border-color);}
#header-advanced-search-btn.adv-filter-active, #open-filter-modal-btn.filter-active, #matrix-advanced-filter-btn.filter-active { background-image: linear-gradient(to right, var(--btn-grad-start), var(--btn-grad-end)); color: #fff; box-shadow: 0 0 8px var(--btn-grad-start); }
#header-advanced-search-btn.adv-filter-active:hover, #open-filter-modal-btn.filter-active:hover, #matrix-advanced-filter-btn.filter-active:hover { transform: translateY(-2px); }
#header-reset-btn { background-image: none; background-color: var(--primary-color); }
#header-reset-btn.reset-active { background-image: linear-gradient(to right, var(--btn-grad-start), var(--btn-grad-end)); }
.btn-theme, .btn-info, .btn-header-action { background-image: none; background-color: var(--primary-color); padding: 8px; width: 40px; height: 40px; justify-content: center; }
.btn-theme:hover, .btn-info:hover, .btn-header-action:hover { background-color: var(--border-color); }
.btn-theme svg, .btn-info svg, .btn-header-action svg { stroke: var(--font-color); }
.btn.btn-icon { padding: 8px; width: 40px; height: 40px; justify-content: center; gap: 0; }
.btn.btn-load-template { background-image: linear-gradient(to right, var(--btn-print-grad-start), var(--btn-print-grad-end)); }
.btn.btn-save-template { background-image: linear-gradient(to right, var(--btn-add-grad-start), var(--btn-add-grad-end)); }

/* === UI COMPONENTS === */
#filter-status-bar { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background-color: var(--primary-color); border: 1px solid var(--border-color); border-radius: 6px; font-size: 12px; color: var(--font-color-muted); margin-top: -10px; margin-bottom: 20px; flex-wrap: wrap; }
#filter-status-bar svg { stroke: var(--btn-grad-start); flex-shrink: 0; }
#filter-status-bar span { font-weight: bold; color: var(--font-color); background-color: var(--bg-color); padding: 2px 6px; border-radius: 4px; }
.header-search-container { display: flex; align-items: center; gap: 8px; background-color: var(--primary-color); padding: 5px; border-radius: 6px; }
#header-search-input { background-color: var(--bg-color); color: var(--font-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 12px; height: 40px; width: 200px; box-sizing: border-box; }
#header-search-btn { background-image: linear-gradient(to right, var(--btn-print-grad-start), var(--btn-print-grad-end)); }
#header-advanced-search-btn { background-image: none; background-color: var(--primary-color); border: 1px solid var(--border-color); }
#header-advanced-search-btn:hover { background-color: var(--border-color); }
.file-uploader { text-align: center; padding: 50px 30px; border: 2px dashed var(--border-color); border-radius: 12px; background-color: var(--primary-color); margin: 20px 0; transition: background-color 0.3s, border-color 0.3s; }
.file-uploader .upload-icon { stroke: var(--btn-grad-start); margin-bottom: 20px; }
.file-uploader h3 { margin: 0 0 10px 0; font-size: 22px; color: var(--font-color); }
.file-uploader p { color: var(--font-color-muted); margin-bottom: 25px; }
.file-uploader label.btn { cursor: pointer; display: inline-block; }
.file-uploader input[type="file"] { display: none; }
.file-uploader.drag-over { border-color: #f8b400; background-color: var(--hover-bg-color); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: end; }
.control-group { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.control-group label { margin-bottom: 5px; color: var(--font-color-muted); }
.control-group input, .control-group select { width: 100%; padding: 10px; background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--font-color); border-radius: 5px; box-sizing: border-box; }
input[type="color"] { padding: 5px; height: 40px; }
select[multiple] { height: 100px; padding: 5px; }
.cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.card { background-color: var(--primary-color); padding: 12px; border-radius: 8px; text-align: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s; display: flex; flex-direction: column; justify-content: center; }
.card.active { border: 2px solid var(--btn-grad-start); transform: translateY(-3px); }
.card h3 { margin: 0 0 10px 0; font-size: 16px; color: var(--font-color-muted); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.card .value { font-size: 32px; font-weight: bold; color: var(--font-color); }
#dynamic-analytics-section { display: flex; flex-direction: column; gap: 20px; }
.analytics-header { display: flex; justify-content: space-between; align-items: center; }
.analytics-title-input { font-family: 'Tahoma', sans-serif; font-size: 1.5em; font-weight: bold; color: var(--font-color); background: transparent; border: none; padding: 2px 5px; margin: 0; border-radius: 4px; }
.analytics-title-input:focus { outline: 1px solid var(--border-color); background-color: var(--bg-color); }
#charts-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
.chart-card { background: var(--surface-color); padding: 15px; border-radius: 8px; display: flex; flex-direction: column; cursor: zoom-in; }
#charts-container .chart-card-full { grid-column: span 2; }
@media (max-width: 850px) { #charts-container .chart-card-full { grid-column: 1 / -1; } }
.chart-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.chart-card-title { color: var(--font-color); font-weight: bold; }
.chart-card-controls { display: flex; gap: 8px; }
.chart-card-controls button { background: none; border: none; color: var(--font-color-muted); cursor: pointer; font-size: 20px; padding: 0 4px; line-height: 1; }
.chart-card-controls button:hover { color: var(--btn-grad-start); }
.chart-card-controls .filter-chart-btn { font-size: 16px; padding: 2px; }
.chart-card-controls .filter-chart-btn.filter-active svg { stroke: var(--btn-grad-start); }
.chart-wrapper { position: relative; flex-grow: 1; min-height: 300px; }
.chart-wrapper canvas { max-height: 300px; width: 100% !important; }
.placeholder-text { display: flex; align-items: center; justify-content: center; height: 150px; color: var(--font-color-muted); border: 2px dashed var(--border-color); border-radius: 8px; }
.sidebar-content { display: flex; flex-direction: column; gap: 20px; }
#sidebar-section-container { padding: 0; background: none; border: none; box-shadow: none; display:contents; }
.top-list-card { background-color: var(--surface-color); padding: 15px; border-radius: 8px; display: flex; flex-direction: column; border: 1px solid var(--border-color); }
.top-list-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 8px; flex-shrink: 0; }
.top-list-title-input { font-family: 'Tahoma', sans-serif; font-weight: bold; font-size: 16px; background: transparent; border: none; color: var(--font-color); width: 120px; padding: 2px 4px; border-radius: 3px; }
.top-list-title-input:focus { outline: 1px solid var(--border-color); background-color: var(--bg-color); }
.top-list-header select { background-color: var(--bg-color); color: var(--font-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 8px; font-size: 12px; max-width: 150px; }
.top-list-body ol { margin: 0; padding: 0; list-style-position: inside; }
.top-list-body li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--primary-color); font-size: 12px; }
.top-list-body li:last-child { border-bottom: none; }
.top-list-body .item-name { white-space: normal; word-break: break-word; margin-right: 10px; }
.top-list-body .item-count { font-weight: bold; color: var(--btn-grad-start); flex-shrink: 0; }
.item-count .item-percentage { font-size: 0.8em; font-weight: normal; color: var(--font-color-muted); margin-left: 6px; }
.table-container-wrapper { position: relative; }
.table-controls { display: flex; justify-content: flex-end; margin-bottom: 10px; align-items: center; gap: 10px;}
.column-selector-wrapper { position: relative; }
#column-selector-panel { display: none; position: absolute; top: 100%; right: 0; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; z-index: 10; min-width: 200px; max-height: 300px; overflow-y: auto; }
#column-selector-panel label { display: block; margin-bottom: 5px; }
.table-container { overflow-x: auto; max-height: 600px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; }
th { background-color: var(--primary-color); position: sticky; top: 0; z-index: 5; user-select: none; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 12px; }
th:not(.sortable-chosen) { transition: background-color 0.2s; }
th.sortable-ghost { background-color: var(--border-color); opacity: 0.7; }
#table-head th[data-column] { cursor: default; }
#table-head.sort-mode th[data-column] { cursor: pointer; }
#table-head:not(.sort-mode) th[data-column] { cursor: grab; }
#table-head:not(.sort-mode) th[data-column]:active { cursor: grabbing; }
th .sort-indicator { display: inline-block; width: 1em; margin-left: 5px; color: var(--font-color-muted); }
#table-head.sort-mode th .sort-indicator { cursor: pointer; }
th[data-sort-state="asc"] .sort-indicator::after { content: '▲'; color: var(--btn-grad-start); }
th[data-sort-state="desc"] .sort-indicator::after { content: '▼'; color: var(--btn-grad-start); }
tbody tr:nth-child(even) { background-color: var(--primary-color); }
tbody tr:hover { background-color: var(--hover-bg-color); }
mark { background-color: #fce18d; color: #333; padding: 1px 3px; border-radius: 3px; }
body.light-theme mark, body.pastel-theme mark { background-color: #ffc107; color: #1a1a2e; }
.negative-value { color: var(--btn-grad-start); }

/* === MODAL STYLES === */
/* === MODAL STYLES === */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
#advancedSearchModal { z-index: 1010; } /* Ensure Advanced Search is always on top */
.modal-content { background-color: var(--surface-color); margin: auto; padding: 25px; border: 1px solid var(--border-color); width: 90%; max-width: 550px; border-radius: 12px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
#zoomChartModal .modal-content, #advancedSearchModal .modal-content, #filterModal .modal-content { max-width: 90vw; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-shrink: 0; }
.modal-header h2 { margin: 0; color: var(--font-color); }
.modal-body { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; min-height: 0; }
.modal-body-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.modal-body-header p { margin: 0; flex-grow: 1; }
#infoModal .modal-body { max-height: 70vh; overflow-y: auto; padding-right: 15px; gap: 15px; }
#infoModal .modal-body h3 { color: var(--btn-grad-start); margin: 10px 0 5px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
#infoModal .modal-body p, #infoModal .modal-body li { font-size: 13px; color: var(--font-color-muted); }
#zoom-chart-container { position: relative; height: 60vh; max-height: 500px; }
#sheet-list-container label { display: block; padding: 8px 12px; cursor: pointer; border-radius: 4px; }
#sheet-list-container label:hover { background-color: var(--hover-bg-color); }
.modal-footer { margin-top: 30px; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.modal-footer .template-buttons { flex-grow: 1; text-align: left; display: flex; gap: 10px; flex-wrap: wrap; }
.close-modal { color: var(--font-color-muted); font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; transition: color 0.2s; }
.close-modal:hover { color: var(--btn-grad-start); }
.chart-type-selector { display: flex; flex-wrap: wrap; background-color: var(--primary-color); border-radius: 8px; padding: 5px; gap: 5px; }
.chart-type-selector button { flex-grow: 1; background: transparent; border: none; color: var(--font-color-muted); padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, color 0.2s; font-size: 14px; }
.chart-type-selector button.active { background-color: var(--border-color); color: #fff; }
#page-credit { position: fixed; bottom: 5px; left: 10px; font-size: 10px; color: var(--bg-color); opacity: 0.5; transition: color 0.3s, opacity 0.3s; z-index: 1; }
#page-credit:hover { color: var(--font-color-muted); opacity: 1; }
.dropdown-wrapper { position: relative; display: inline-block; }
.dropdown-menu { display: none; position: absolute; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px 0; z-index: 1010; min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dropdown-menu.show { display: block; }
.header-save-menu { top: 100%; right: 0; margin-top: 5px; }
.modal-save-menu { bottom: 100%; left: 0; margin-bottom: 5px; }
.dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: var(--font-color); text-decoration: none; font-size: 13px; white-space: nowrap; }
.dropdown-menu a:hover { background-color: var(--hover-bg-color); }
.dropdown-menu a.disabled { color: var(--font-color-muted); cursor: not-allowed; background-color: transparent; }
.dropdown-menu a.disabled:hover { background-color: transparent; }
.dropdown-menu a svg { width: 16px; height: 16px; stroke: var(--font-color-muted); flex-shrink: 0; transition: stroke 0.2s; }
.dropdown-menu a:hover:not(.disabled) svg { stroke: var(--btn-grad-start); }
.column-setup-row { display: grid; grid-template-columns: 60px 2fr 1.5fr repeat(5, 60px); gap: 15px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); opacity: 1; transition: opacity 0.3s ease; }
.column-setup-row.disabled { opacity: 0.5; }
.column-setup-header { font-weight: bold; color: var(--font-color-muted); }
.column-setup-header span { display: flex; justify-content: center; align-items: center; gap: 5px; text-align: center; }
.column-setup-header span:nth-child(2), .column-setup-header span:nth-child(3) { justify-content: flex-start; text-align: left; }
.column-setup-row:last-child { border-bottom: none; }
.column-setup-row input[type="checkbox"], .column-setup-row input[type="radio"] { justify-self: center; margin: 0; }
#column-setup-none-row { padding: 10px 0; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; }
#column-setup-none-row label { font-weight: bold; }
#column-setup-preview table { font-size: 11px; width: 100%; border-collapse: collapse; }
#column-setup-preview th, #column-setup-preview td { padding: 4px 6px; text-align: left; border: 1px solid var(--border-color); white-space: nowrap; }

/* --- ADVANCED SEARCH & CALCULATED FIELDS --- */
#advanced-search-conditions-container, #calculated-fields-list { display: flex; flex-direction: column; gap: 15px; max-height: 40vh; overflow-y: auto; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; }
.adv-search-condition-row { display: grid; grid-template-columns: 2fr 1.5fr 2fr 40px; gap: 10px; align-items: center; }
.adv-search-condition-row select, .adv-search-condition-row input { padding: 8px; font-size: 12px; background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--font-color); border-radius: 4px; }
.adv-search-logic-selector { padding: 8px 12px; }
#advanced-query-display { margin-top: 15px; padding: 10px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 5px; font-family: 'Courier New', monospace; font-size: 12px; color: var(--font-color-muted); min-height: 40px; white-space: pre-wrap; word-break: break-all; }
#advanced-search-header { display: flex; gap: 20px; align-items: center; margin-bottom: 10px; }
.calculated-field-row { background-color: var(--bg-color); padding: 15px; border-radius: 5px; display: flex; flex-direction: column; gap: 15px; border: 1px solid var(--border-color); }
.field-main-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.field-specific-controls { border-top: 1px solid var(--border-color); padding-top: 15px; }
.concat-controls, .calc-controls, .calc-simple-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.calc-custom-input { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.calc-custom-input small { color: var(--font-color-muted); font-size: 11px; }
.calc-name-input { flex-grow: 1; }
.calc-type-select, .calc-col1-select, .calc-col2-select, .calc-col1-select-num, .calc-col2-select-num, .calc-operator-select, .calc-formula-input, .calc-custom-input textarea { padding: 8px; background-color: var(--primary-color); border: 1px solid var(--border-color); color: var(--font-color); border-radius: 4px; font-size: 13px; box-sizing: border-box; width: 100%; }
.concat-controls span { font-weight: bold; color: var(--font-color-muted); }
.remove-calculated-field-btn { padding: 8px !important; width: 36px !important; height: 36px !important; font-size: 20px !important; }

/* === NEW COLLAPSIBLE MATRIX SIDEBAR LAYOUT === */
.modal-content-matrix { flex-direction: row; max-width: 95vw; width: 95vw; height: 90vh; padding: 0; overflow: hidden; }
.matrix-controls-sidebar { width: 320px; flex-shrink: 0; background-color: var(--primary-color); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.2s ease-in-out; }
.matrix-view-main { flex: 1; display: flex; flex-direction: column; padding: 20px; min-width: 0; position: relative; }
.matrix-view-main .modal-footer { flex-shrink: 0; margin-top: auto; padding-top: 15px; justify-content: space-between; }
.matrix-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-shrink: 0; }
.matrix-sidebar-header h3 { margin: 0; font-size: 18px; color: var(--font-color); }
.matrix-controls { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; flex-grow: 1; padding-right: 5px; }
.matrix-filter-group { border-top: 1px solid var(--border-color); padding-top: 15px; }
.matrix-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.matrix-filter-header h4 { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--font-color); font-size: 16px; }
.matrix-filter-header h4 svg { stroke: var(--btn-print-grad-start); }
.matrix-filter-header div { display: flex; gap: 10px; } /* For Advanced + Reset buttons */
.matrix-filter-inputs { display: flex; flex-direction: column; gap: 15px; }
.matrix-controls .control-group label { font-size: 12px; color: var(--font-color-muted); }
.matrix-controls .control-group select, .matrix-controls .control-group input { padding: 8px; font-size: 13px; background-color: var(--bg-color); }
.matrix-controls .matrix-axis-control select { background-color: var(--search-bg-color); }
#matrix-table-container { flex-grow: 1; overflow: auto; min-height: 200px; }
#matrix-table-container table { font-size: 12px; }
#matrix-table-container th, #matrix-table-container td { padding: 6px 10px; text-align: center; white-space: nowrap; transition: background-color 0.3s; }
#matrix-table-container td.heatmap-cell { color: var(--heatmap-text-color); }
#matrix-table-container th { font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#matrix-table-container th:first-child, #matrix-table-container td:first-child { text-align: left; position: sticky; left: 0; background-color: var(--primary-color); z-index: 2; }
#matrix-table-container thead th { z-index: 3; }
#matrix-table-container tfoot th { position: sticky; bottom: 0; background-color: var(--primary-color); z-index: 1; }
#matrix-table-container th.total, #matrix-table-container td.total { font-weight: bold; background-color: var(--btn-grad-start) !important; color: white; }
#matrix-sidebar-toggle-btn { position: absolute; top: 10px; left: -20px; z-index: 100; border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 1px solid var(--border-color); background-color: var(--surface-color); transition: left 0.3s ease-in-out, background-color 0.3s, transform 0.3s; }
#matrix-sidebar-toggle-btn:hover { background-color: var(--primary-color); }
#matrix-sidebar-toggle-btn svg { stroke: var(--font-color); transition: transform 0.3s ease-in-out; }
/* Collapsed State */
.modal.sidebar-collapsed .matrix-controls-sidebar { width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden; border-right: none; }
.modal.sidebar-collapsed #matrix-sidebar-toggle-btn { left: 10px; }
.modal.sidebar-collapsed #matrix-sidebar-toggle-btn svg { transform: rotate(180deg); }

/* === RESPONSIVE & PRINT === */
@media (max-width: 1199px) { .sidebar-content { grid-row-start: 2; } }
@media (max-width: 768px) { body { padding: 10px; } header { flex-direction: column; gap: 15px; text-align: center; } .action-buttons { justify-content: center; } .controls, #charts-container { grid-template-columns: 1fr; } .cards-container { grid-template-columns: 1fr 1fr; } .adv-search-condition-row { grid-template-columns: 1fr; } }
@media print { body { padding: 0; background-color: #fff; color: #000; } .no-print, .controls, .table-controls, .top-list-header select, .top-list-title-input { display: none !important; } header { border: none !important; box-shadow: none !important; padding: 0 0 10px 0 !important; margin: 0 0 20px 0 !important; display: block !important; border-bottom: 2px solid #ccc !important; } .analytics-header { padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc; } .top-list-header::before { content: attr(data-print-title); font-size: 16px; font-weight: bold; } .main-title-input { color: #d92644 !important; text-align: center; border: none; background: transparent; } .analytics-title-input { color: #000 !important; text-align: center; border: none; background: transparent; } .container { max-width: 100%; gap: 10px;} section { border: none; box-shadow: none; padding: 10px 0; break-inside: avoid; page-break-inside: avoid; } .dashboard-grid { display: block !important; } .main-content { gap: 15px; } .sidebar-content { display: flex !important; flex-direction: row; gap: 20px; justify-content: space-between; margin-top: 20px; } .cards-container { display: flex !important; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px; } .card { padding: 8px; flex-grow: 1; min-width: 120px; } .card h3 { font-size: 10px; margin-bottom: 5px;} .card .value { font-size: 18px; } .top-list-card, .chart-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc; } .top-list-card { width: 48%; } .chart-wrapper canvas { max-height: none !important; } .table-container { max-height: none !important; overflow: visible !important; } }

/* === LAYOUT STYLES === */
#sidebar-toggle-btn { position: absolute; top: 20px; left: -20px; z-index: 100; border-radius: 50%; width: 40px; height: 40px; padding: 0; display: none; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 1px solid var(--border-color); background-color: var(--surface-color); transition: left 0.3s ease-in-out, background-color 0.3s, transform 0.3s; }
#sidebar-toggle-btn:hover { background-color: var(--primary-color); }
#sidebar-toggle-btn svg { stroke: var(--font-color); transition: transform 0.3s ease-in-out; }
main#dashboard.layout-sidebar, main#dashboard.layout-analytics-focus { display: grid; gap: 20px; }
main#dashboard.layout-sidebar #cards-container, main#dashboard.layout-sidebar .dashboard-grid, main#dashboard.layout-sidebar .table-container-wrapper, main#dashboard.layout-analytics-focus #cards-container, main#dashboard.layout-analytics-focus .dashboard-grid, main#dashboard.layout-analytics-focus .table-container-wrapper { display: none; }
main#dashboard.layout-sidebar { grid-template-columns: 320px 1fr; grid-template-rows: auto; transition: grid-template-columns 0.3s ease-in-out; }
main#dashboard.layout-sidebar #sidebar-toggle-btn { display: inline-flex; }
#layout-sidebar-container { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 10px; transition: width 0.3s ease-in-out, opacity 0.2s ease-in-out, padding 0.3s ease-in-out, border 0.3s; width: 100%; opacity: 1; border-right: 1px solid var(--border-color); }
#layout-main-content-container { position: relative; }
main#dashboard.layout-sidebar #layout-sidebar-container, main#dashboard.layout-sidebar #layout-main-content-container { display: flex; flex-direction: column; gap: 20px; height: 100%; }
main#dashboard.layout-sidebar.sidebar-collapsed { grid-template-columns: 0 1fr; gap: 0; }
main#dashboard.layout-sidebar.sidebar-collapsed #layout-sidebar-container { width: 0; padding: 0; opacity: 0; overflow: hidden; border: none; }
main#dashboard.layout-sidebar.sidebar-collapsed #sidebar-toggle-btn { left: 5px; }
main#dashboard.layout-sidebar.sidebar-collapsed #sidebar-toggle-btn svg { transform: rotate(180deg); }
main#dashboard.layout-analytics-focus { grid-template-columns: 1fr; grid-template-rows: auto auto; }
#analytics-focus-top-container { display: contents; }
#analytics-focus-bottom-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
main#dashboard.layout-analytics-focus #sidebar-toggle-btn { display: none; }
@media (max-width: 992px) { main#dashboard.layout-analytics-focus #analytics-focus-bottom-container { grid-template-columns: 1fr; } }
@media (max-width: 992px) { main#dashboard.layout-sidebar { grid-template-columns: 1fr; } #layout-sidebar-container { max-height: none; overflow-y: visible; border-right: none; padding-right: 0; } #sidebar-toggle-btn { display: none !important; } }

/* === CHART MODAL STYLES === */
.chart-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px 20px; align-items: end; }
.chart-options-grid .grid-col-span-2 { grid-column: 1 / -1; }
#standard-chart-options, #combo-chart-options { display: none; }
#standard-chart-options.active, #combo-chart-options.active { display: contents; }
#common-chart-options { grid-column: 1 / -1; border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: 5px; }
.control-group-checkbox { display: flex; align-items: center; gap: 10px; height: 100%; padding-bottom: 5px; }
.control-group-checkbox label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; font-weight: normal; color: var(--font-color); }
.control-group-checkbox input[type="checkbox"] { width: 16px; height: 16px; }
.stack-control-group { align-self: end; }
#addChartModal h4 { color: var(--font-color); margin: 10px 0 0 0; border-top: 1px solid var(--border-color); padding-top: 15px; }
@media (max-width: 800px) { #addChartModal .modal-content { max-width: 95vw; } }