'), var(--bg-color); } @media (min-width: 1200px) { .app-container { grid-template-columns: 480px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "controls table" "footer footer"; } .app-header { grid-area: header; } .controls-container { grid-area: controls; } .table-container-wrapper { grid-area: table; } .app-footer { grid-area: footer; } } @media (max-width: 1199px) { body { height: auto; overflow-y: auto; } .app-container { height: auto; } } /* --- General Components --- */ .glass-pane { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 8px 32px 0 var(--shadow-color); padding: clamp(1rem, 3vw, 1.5rem); display: flex; flex-direction: column; overflow: hidden; } .app-header { display: flex; justify-content: space-between; align-items: center; } .app-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; } .app-footer { text-align: center; font-size: clamp(0.7rem, 1.5vw, 0.8rem); color: var(--text-secondary); padding-top: 0.5rem; } .theme-toggle { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; cursor: pointer; padding: 0.5rem; position: relative; width: 60px; height: 32px; } .theme-toggle i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--text-secondary); transition: opacity 0.3s ease; } .theme-toggle .fa-sun { left: 8px; } .theme-toggle .fa-moon { right: 8px; } [data-theme="dark"] .theme-toggle .fa-sun { opacity: 0; } [data-theme="light"] .theme-toggle .fa-moon { opacity: 0; } /* --- Controls Panel --- */ .controls-container { gap: 1rem; } .control-group { margin-bottom: 1rem; } .control-group label { display: block; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; } .action-btn { padding: 0.65rem 1rem; font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; background-color: var(--accent-primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .action-btn:not(:disabled):hover { transform: translateY(-2px); background-color: #6159e6; } .action-btn i { margin-right: 0.5em; } .action-btn:disabled { background-color: var(--glass-border); color: var(--text-secondary); opacity: 0.7; cursor: not-allowed; } .button-group { display: flex; gap: 0.75rem; } #file-name-display { color: var(--text-secondary); font-size: 0.8rem; margin-top: 0.5rem; min-height: 1.2em; text-align: center; } #error-message { color: var(--error-color); font-size: 0.85rem; margin-top: 0.5rem; text-align: center; min-height: 1.2em; } .divider { border: none; height: 1px; background-color: var(--glass-border); margin: 1rem 0; } /* --- Advanced Filters --- */ #filter-rules-container { display: flex; flex-direction: column; gap: 0.75rem; max-height: 40vh; overflow-y: auto; padding-right: 5px; } .filter-rule { display: block; gap: 0.5rem; align-items: center; } .filter-rule select, .filter-rule input { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); border-radius: 6px; padding: 0.5rem; font-family: var(--font-primary); font-size: 0.85rem; color: var(--text-primary); } .filter-rule select:focus, .filter-rule input:focus { outline: none; border-color: var(--accent-primary); } .filter-rule .column-select { flex: 3; } .filter-rule .condition-select { flex: 2; } .filter-rule .value-input { flex: 3; } .remove-filter-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.2rem; transition: color 0.2s; } .remove-filter-btn:hover { color: var(--error-color); } /* --- Table Styling --- */ .table-container-wrapper { position: relative; } #table-output { height: 100%; width: 100%; overflow: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--glass-border); white-space: nowrap; } .data-table thead th { font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: color 0.2s ease; position: sticky; top: 0; z-index: 1; background: var(--glass-bg-header); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .data-table thead th:hover { color: var(--text-primary); } .data-table th.sortable::after { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0dc"; margin-left: 0.75em; opacity: 0.5; } .data-table th.sort-asc::after { content: "\f0de"; opacity: 1; color: var(--accent-secondary); } .data-table th.sort-desc::after { content: "\f0dd"; opacity: 1; color: var(--accent-secondary); } .data-table tbody tr { transition: background-color 0.2s ease; } .data-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme="light"] .data-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.03); } .no-results-row td { text-align: center; color: var(--text-secondary); font-style: italic; }