Upload 8 files

app.js

@@ -257,13 +257,16 @@ function renderBtnGroup(container, items, activeValue) {
 function populateFilters() {
     renderSidebar();
 
+    const chartsShown = filters[GROUP_BY] !== "all";
+
+
     // Metric buttons
     const metricEl = document.getElementById("filter-metric");
     renderBtnGroup(metricEl,
         config.metrics.map(m => ({ value: m.column, label: m.short || m.column })),
         filters.metric
     );
-    metricEl.closest(".filter-group").style.display = config.metrics.length <= 1 ? "none" : "";
+    metricEl.closest(".filter-group").style.display = (config.metrics.length <= 1 || !chartsShown) ? "none" : "";
 
     updateDependentFilters();
 }
@@ -329,14 +332,13 @@ function buildChart(filtered) {
 
     const metricCol = filters.metric;
     const metricCfg = config.metrics.find(m => m.column === metricCol) || {};
-    const groupCol  = GROUP_BY;
-    const groupFilterCfg = config.filters.find(f => f.column === groupCol);
+    const groupFilterCfg = config.filters.find(f => f.column === GROUP_BY);
 
-    const groupVal = filters[groupCol];
+    const groupVal = filters[GROUP_BY];
     if (groupVal === "all") return;
 
     const groupLabel = groupFilterCfg?.value_labels?.[groupVal] || String(groupVal);
-    const gRows = filtered.filter(r => String(r[groupCol]) === String(groupVal));
+    const gRows = filtered.filter(r => String(r[GROUP_BY]) === String(groupVal));
     if (!gRows.length) return;
 
     // If no scenarios configured, show one chart with all rows
@@ -423,7 +425,7 @@ function buildChart(filtered) {
                     },
                 },
                 scales: {
-                    y: { beginAtZero: true, title: { display: true, text: yLabel, color: cssVar("--text-muted") }, grid: { color: cssVar("--chart-grid") }, ticks: { color: cssVar("--text-dim") } },
+                    y: { beginAtZero: true, title: { display: true, text: yLabel, color: cssVar("--text-muted") }, grid: { color: cssVar("--border") }, ticks: { color: cssVar("--text-dim") } },
                     x: { grid: { display: false }, ticks: { color: cssVar("--text-muted"), font: { size: 14 } } },
                 },
             },
@@ -437,11 +439,10 @@ function buildChart(filtered) {
 function buildTables(filtered, chartsShown) {
     const section   = document.getElementById("tables-section");
     section.innerHTML = "";
-    const groupCol  = GROUP_BY;
-    const groupFilterCfg = config.filters.find(f => f.column === groupCol);
-    const groupVal  = filters[groupCol];
+    const groupFilterCfg = config.filters.find(f => f.column === GROUP_BY);
+    const groupVal  = filters[GROUP_BY];
     const opts      = availableOptions(filters.family);
-    const groupVals = groupVal === "all" ? (opts[groupCol] || []) : [groupVal];
+    const groupVals = groupVal === "all" ? (opts[GROUP_BY] || []) : [groupVal];
 
     // Determine which display columns are visible given current filter state
     const visibleDisplay = (config.display_columns || []).filter(dc => {
@@ -464,7 +465,7 @@ function buildTables(filtered, chartsShown) {
     const tableGroupBy = familyCfg.table_group_by || config.table_group_by || "";
 
     groupVals.forEach(gv => {
-        const rows = filtered.filter(r => String(r[groupCol]) === String(gv));
+        const rows = filtered.filter(r => String(r[GROUP_BY]) === String(gv));
         if (!rows.length) return;
         rows.sort((a, b) => {
             for (const rule of sortRules) {
@@ -551,8 +552,7 @@ function buildExperimentSetup() {
     section.innerHTML = "";
     const familyCfg = config.model_families?.[filters.family] || {};
     const setupMap = familyCfg.experiment_setup || {};
-    const groupCol = GROUP_BY;
-    const groupVal = filters[groupCol];
+    const groupVal = filters[GROUP_BY];
 
     const deviceVals = groupVal === "all"
         ? []
@@ -592,6 +592,12 @@ function render() {
 
     buildChart(filtered);
     const chartsShown = filters[GROUP_BY] !== "all";
+    // Toggle metric selector visibility
+    const metricEl = document.getElementById("filter-metric");
+    if (metricEl) {
+        metricEl.closest(".filter-group").style.display =
+            (config.metrics.length <= 1 || !chartsShown) ? "none" : "";
+    }
     buildTables(filtered, chartsShown);
     buildExperimentSetup();
 }

config.json

@@ -8,7 +8,7 @@
   "filters": [
     {
       "column": "type",
-      "label": "Inference Type"
+      "label": "Modality"
     },
     {
       "column": "batch",
@@ -50,7 +50,7 @@
     },
     {
       "column": "e2e",
-      "label": "End-to-End Latency (s)",
+      "label": "End-to-End Latency (sec)",
       "short": "E2E ↓",
       "higher_is_better": false,
       "description": "End-to-end latency in seconds (lower is better). Total time from request submission to completion of the full generated response. This reflects real user-perceived latency."

style.css

@@ -1,378 +1,513 @@
 /* ── Palette ──────────────────────────────────────────── */
 :root {
---bg:          #0B1527;
---bg-opaque:   rgba(11, 21, 39,0.45);
---bg-surface:  #1a1a2e;
---teal:        #58b1c3;
---green:       #6fcf97;
---red:         #ff4d6d;
---pink:        #ff6ec7;
---purple:      #9b5de5;
---blue:        #007F9E;
---neutral:     #667788;
---text:        #e8e8e8;
---text-muted:  #8899aa;
---text-dim:    #5a6a7a;
---border:      rgba(255,255,255,0.06);
---chart-grid:  rgba(255,255,255,0.06);
---btn-hover-bg: rgba(255,255,255,0.03);
---btn-active-bg: rgba(88,177,195,0.12);
---btn-active-border: rgba(88,177,195,0.3);
---sidebar-hover-bg: rgba(255,255,255,0.02);
---sidebar-active-bg: rgba(88,177,195,0.04);
---row-hover-bg: rgba(255,255,255,0.02);
---row-border:  rgba(255,255,255,0.03);
---code-bg:     rgba(88,177,195,0.1);
---tooltip-bg:  #2c3e50;
---tooltip-text: #f1f1f1;
---tooltip-body: #d9d9d9;
+    --bg: #0B1527;
+    --bg-opaque: rgba(11, 21, 39, 0.45);
+    --bg-surface: #1a1a2e;
+    --teal: #58b1c3;
+    --green: #6fcf97;
+    --red: #ff4d6d;
+    --pink: #ff6ec7;
+    --purple: #9b5de5;
+    --blue: #007F9E;
+    --neutral: #667788;
+    --text: #e8e8e8;
+    --text-muted: #8899aa;
+    --text-dim: #5a6a7a;
+    --border: rgba(255, 255, 255, 0.06);
+    --btn-hover-bg: rgba(255, 255, 255, 0.03);
+    --btn-active-bg: rgba(88, 177, 195, 0.12);
+    --btn-active-border: rgba(88, 177, 195, 0.3);
+    --sidebar-active-bg: rgba(88, 177, 195, 0.04);
+    --row-hover-bg: rgba(255, 255, 255, 0.02);
+    --row-border: rgba(255, 255, 255, 0.03);
+    --code-bg: rgba(88, 177, 195, 0.1);
+    --tooltip-bg: #2c3e50;
+    --tooltip-text: #f1f1f1;
+    --tooltip-body: #d9d9d9;
 }
 
 /* ── Reset & Base ─────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { font-size: 16px; }
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    background: radial-gradient(
+            800px 500px at 50% -40px,
+            rgba(0, 226, 213, 0.25),
+            rgba(18, 208, 254, 0.15) 30%,
+            transparent 70%
+    ), var(--bg);
+}
+
 body {
-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-background: var(--bg);
-color: var(--text);
-line-height: 1.6;
--webkit-font-smoothing: antialiased;
-position: relative;
-}
-body::before {
-content: "";
-position: fixed;
-top: -260px;
-left: 50%;
-transform: translateX(-50%);
-width: 69rem;
-height: 42rem;
-background: radial-gradient(circle, rgba(0,226,213,0.25) 0%, rgba(18,208,254,0.15) 30%, transparent 70%);
-filter: blur(80px);
-pointer-events: none;
-z-index: 0;
+    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: var(--text);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
 }
+
 code {
-background: var(--code-bg);
-color: var(--teal);
-padding: 0.15em 0.45em;
-border-radius: 4px;
-font-size: 0.95em;
+    background: var(--code-bg);
+    color: var(--teal);
+    padding: 0.15em 0.45em;
+    border-radius: 4px;
+    font-size: 0.95em;
 }
 
 /* ── Page Layout ─────────────────────────────────────── */
 .page {
-position: relative;
-z-index: 1;
-display: flex;
-flex-direction: row;
-min-height: 100vh;
-max-width: 1440px;
-margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    max-width: 1440px;
+    margin: 0 auto;
 }
 
 /* ── Sidebar ─────────────────────────────────────────── */
 .sidebar {
-width: 280px;
-max-width: 300px;
-flex-shrink: 0;
-padding: 2rem 0;
-position: sticky;
-top: 0;
-height: 100vh;
-overflow-y: auto;
+    width: 280px;
+    max-width: 300px;
+    flex-shrink: 0;
+    padding: 2rem 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
 }
+
 .sidebar-logo {
-display: block;
-padding: 0 1.25rem 3.25rem;
+    display: block;
+    padding: 0 1.25rem 3.25rem;
 }
+
 .sidebar-nav {
-display: flex;
-flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
+
 .sidebar-item {
-display: block;
-padding: 0.5rem 1.25rem;
-font-size: 1.25rem;
-font-weight: 400;
-color: var(--text-dim);
-text-decoration: none;
-cursor: pointer;
-border-left: 2px solid transparent;
-transition: color 0.15s, background 0.15s, border-color 0.15s;
+    display: block;
+    padding: 0.5rem 1.25rem;
+    font-size: 1.25rem;
+    font-weight: 400;
+    color: var(--text-dim);
+    text-decoration: none;
+    cursor: pointer;
+    border-left: 2px solid transparent;
+    transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
+
 .sidebar-item:hover {
-color: var(--text-muted);
+    color: var(--text-muted);
 }
+
 .sidebar-item.active {
-color: var(--teal);
-font-weight: 600;
+    color: var(--teal);
+    font-weight: 600;
 }
 
 /* ── Main Column ─────────────────────────────────────── */
 .main {
-flex: 1;
-min-width: 0;
+    flex: 1;
+    min-width: 0;
 }
+
 .main-inner {
-max-width: 1100px;
-width: 100%;
-padding: 0 2rem 2rem;
+    max-width: 1100px;
+    width: 100%;
+    padding: 0 2rem 2rem;
 }
 
 /* ── Hero ────────────────────────────────────────────── */
 .hero {
-position: relative;
-padding: 2rem 0 2.5rem;
+    position: relative;
+    padding: 2rem 0 2.5rem;
 }
+
 .hero-badge {
-display: inline-block;
-padding: 1px;
-border-radius: 999px;
-background: linear-gradient(90deg, var(--teal),var(--blue));
-margin-bottom: 1rem;
+    display: inline-block;
+    padding: 1px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, var(--teal), var(--blue));
+    margin-bottom: 1rem;
 }
+
 .hero-badge span {
-display: inline-block;
-padding: 0.35rem 1rem;
-border-radius: 999px;
-background: var(--bg-opaque);
-color: var(--teal);
-font-size: 1rem;
-font-weight: 600;
-letter-spacing: 0.03em;
-text-transform: uppercase;
+    display: inline-block;
+    padding: 0.35rem 1rem;
+    border-radius: 999px;
+    background: var(--bg-opaque);
+    color: var(--teal);
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
 }
+
 .hero h1 {
-font-size: clamp(1.8rem, 3.5vw, 3.0rem);
-font-weight: 700;
-margin-bottom: 0.5rem;
-letter-spacing: -0.02em;
+    font-size: clamp(1.8rem, 3.5vw, 3.0rem);
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+}
+
+.hero .accent {
+    color: var(--teal);
 }
-.hero .accent { color: var(--teal); }
+
 .hero-sub {
-color: var(--text-muted);
-font-size: 1.1rem;
-max-width: 620px;
-line-height: 1.6;
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    max-width: 620px;
+    line-height: 1.6;
 }
 
 /* ── Filters ─────────────────────────────────────────── */
 .filters-bar {
-display: flex;
-flex-wrap: wrap;
-gap: 1.25rem;
-padding: 1rem 0;
-top: 0;
-z-index: 10;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+    padding: 1rem 0;
+    top: 0;
+    z-index: 10;
 }
+
 .filter-group label {
-display: block;
-font-size: 0.8rem;
-font-weight: 600;
-text-transform: uppercase;
-letter-spacing: 0.08em;
-color: var(--text-dim);
-margin-bottom: 0.25rem;
-}
-.btn-group { display: flex; gap: 0; }
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-dim);
+    margin-bottom: 0.25rem;
+}
+
+.btn-group {
+    display: flex;
+}
+
 .btn {
-background: transparent;
-border: 1px solid var(--border);
-color: var(--text-muted);
-font-size: 1rem;
-font-weight: 400;
-padding: 0.45rem 1rem;
-cursor: pointer;
-transition: all 0.15s;
-}
-.btn:first-child { border-radius: 6px 0 0 6px; }
-.btn:last-child  { border-radius: 0 6px 6px 0; }
-.btn:not(:first-child) { margin-left: -1px; }
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 0.45rem 1rem;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn:first-child {
+    border-radius: 6px 0 0 6px;
+}
+
+.btn:last-child {
+    border-radius: 0 6px 6px 0;
+}
+
+.btn:not(:first-child) {
+    margin-left: -1px;
+}
+
 .btn:hover {
-color: var(--text);
-background: var(--btn-hover-bg);
+    color: var(--text);
+    background: var(--btn-hover-bg);
 }
+
 .btn.active {
-background: var(--btn-active-bg);
-color: var(--teal);
-border-color: var(--btn-active-border);
-font-weight: 600;
-z-index: 1;
-position: relative;
+    background: var(--btn-active-bg);
+    color: var(--teal);
+    border-color: var(--btn-active-border);
+    font-weight: 600;
+    z-index: 1;
+    position: relative;
 }
 
 /* ── Chart ───────────────────────────────────────────── */
 .chart-block {
-margin: 1.5rem 0;
+    margin: 1.5rem 0;
 }
+
 .chart-heading {
-font-size: 1.25rem;
-font-weight: 600;
-color: var(--text);
-margin-bottom: 0.25rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0.25rem;
 }
+
 .chart-subtitle {
-font-size: 1rem;
-color: var(--text-muted);
-margin-bottom: 0.75rem;
+    font-size: 1rem;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
 }
+
 .chart-wrap {
-height: 340px;
+    height: 340px;
 }
 
 /* ── Tables ──────────────────────────────────────────── */
 .table-card {
-margin: 1.5rem 0 2rem;
+    margin: 1.5rem 0 2rem;
 }
+
 .table-card h3 {
-font-size: 1.15rem;
-font-weight: 600;
-color: var(--text);
-margin-bottom: 0.5rem;
-padding-bottom: 0.5rem;
-border-bottom: 1px solid var(--border);
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
 }
+
 .table-scroll {
-overflow-x: auto;
-scrollbar-color: var(--text-dim) var(--border);
-scrollbar-width: thin;
-}
-.table-scroll::-webkit-scrollbar { height: 8px; }
-.table-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
-.table-scroll::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 4px; }
-.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
+    overflow-x: auto;
+    scrollbar-color: var(--text-dim) var(--border);
+    scrollbar-width: thin;
+}
+
+.table-scroll::-webkit-scrollbar {
+    height: 8px;
+}
+
+.table-scroll::-webkit-scrollbar-track {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+.table-scroll::-webkit-scrollbar-thumb {
+    background: var(--text-dim);
+    border-radius: 4px;
+}
+
+.table-scroll::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 1rem;
+}
+
 thead th {
-text-align: left;
-font-weight: 600;
-font-size: 0.8rem;
-text-transform: uppercase;
-letter-spacing: 0.05em;
-color: var(--text-dim);
-padding: 0.5rem 0.75rem;
-border-bottom: 1px solid var(--border);
-white-space: nowrap;
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-dim);
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
 }
+
 tbody td {
-padding: 0.5rem 0.75rem;
-border-bottom: 1px solid var(--row-border);
-white-space: nowrap;
-color: var(--text-muted);
-}
-tbody tr:last-child td { border-bottom: none; }
-tbody tr:hover { background: var(--row-hover-bg); }
-.model-cell { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text); }
-.model-cell a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
-.model-cell a:hover { text-decoration: underline; }
-.model-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.oom { color: var(--red); font-weight: 600; }
-tbody tr.row-group-break td { border-top: 2px solid var(--border); }
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--row-border);
+    white-space: nowrap;
+    color: var(--text-muted);
+}
+
+tbody tr:last-child td {
+    border-bottom: none;
+}
+
+tbody tr:hover {
+    background: var(--row-hover-bg);
+}
+
+.model-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    color: var(--text);
+}
+
+.model-cell a {
+    color: var(--teal);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+
+.model-cell a:hover {
+    text-decoration: underline;
+}
+
+.model-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.oom {
+    color: var(--red);
+    font-weight: 600;
+}
+
+tbody tr.row-group-break td {
+    border-top: 2px solid var(--border);
+}
 
 /* ── Legend ───────────────────────────────────────────── */
 .legend-section {
-margin: 2rem 0;
-padding-top: 1.5rem;
+    margin: 2rem 0;
+    padding-top: 1.5rem;
 }
+
 .legend-grid {
-display: grid;
-grid-template-columns: 1fr;
-gap: 0.25rem;
-font-size: 0.8rem;
-color: var(--text-dim);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+}
+
+.legend-grid strong {
+    color: var(--text-muted);
+    font-weight: 500;
 }
-.legend-grid strong { color: var(--text-muted); font-weight: 500; }
+
 .experiment-setup {
-margin-top: 0.75rem;
-font-size: 0.95rem;
-color: var(--text-dim);
-font-style: italic;
-line-height: 1.6;
+    margin-top: 0.75rem;
+    font-size: 0.95rem;
+    color: var(--text-dim);
+    font-style: italic;
+    line-height: 1.6;
+}
+
+.experiment-setup p {
+    margin-bottom: 0.25rem;
 }
-.experiment-setup p { margin-bottom: 0.25rem; }
 
 /* ── Footer ──────────────────────────────────────────── */
 .footer {
-padding: 2.5rem 0;
-margin-top: 2rem;
+    padding: 2.5rem 0;
+    margin-top: 2rem;
 }
+
 .footer-inner {
-max-width: 1440px;
-margin: 0 auto;
-padding: 0 2rem;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 2rem;
 }
+
 .footer-grid {
-display: flex;
-gap: 3rem;
-flex-wrap: wrap;
+    display: flex;
+    gap: 3rem;
+    flex-wrap: wrap;
 }
+
 .footer-col {
-font-size: 1rem;
-color: var(--text-dim);
-line-height: 1.7;
+    font-size: 1rem;
+    color: var(--text-dim);
+    line-height: 1.7;
 }
-.footer-col p { margin: 0; }
+
+.footer-col p {
+    margin: 0;
+}
+
 .footer-col-title {
-font-size: 0.85rem;
-font-weight: 600;
-text-transform: uppercase;
-letter-spacing: 0.08em;
-color: var(--text);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text);
 }
+
 .footer-logo-img {
-display: block;
-margin-bottom: 0.5rem;
+    display: block;
+    margin-bottom: 0.5rem;
 }
+
 .footer-logo {
-font-size: 1rem;
-color: var(--text-muted);
-margin-bottom: 1.2rem;
+    font-size: 1rem;
+    color: var(--text-muted);
+    margin-bottom: 1.2rem;
+}
+
+.footer-logo a {
+    color: var(--text-muted);
+    text-decoration: none;
 }
-.footer-logo a { color: var(--text-muted); text-decoration: none; }
-.footer-logo a:hover { text-decoration: underline; }
+
+.footer-logo a:hover {
+    text-decoration: underline;
+}
+
 .footer-social {
-display: flex;
-gap: 0.75rem;
+    display: flex;
+    gap: 0.75rem;
 }
+
 .footer-social a {
-color: var(--text-dim);
-transition: color 0.15s;
-display: flex;
-align-items: center;
+    color: var(--text-dim);
+    transition: color 0.15s;
+    display: flex;
+    align-items: center;
 }
+
 .footer-social a:hover {
-color: var(--teal);
+    color: var(--teal);
 }
 
 /* ── Responsive ──────────────────────────────────────── */
 @media (max-width: 768px) {
-.page { flex-direction: column; }
-.sidebar {
-width: 100%;
-max-width: none;
-height: auto;
-position: static;
-border-right: none;
-border-bottom: 1px solid var(--border);
-padding: 0.75rem 0;
-}
-.sidebar-nav {
-flex-direction: row;
-flex-wrap: wrap;
-padding: 0 0.75rem;
-}
-.sidebar-item {
-border-left: none;
-border-bottom: 2px solid transparent;
-padding: 0.4rem 0.75rem;
-font-size: 0.9rem;
-}
-.sidebar-item.active {
-border-left-color: transparent;
-border-bottom-color: var(--teal);
-}
-.main-inner { padding: 0 1rem 2rem; }
-.filters-bar { gap: 0.75rem; }
-.btn { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
-.chart-wrap { height: 260px; }
+    .page {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        max-width: none;
+        height: auto;
+        position: static;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+        padding: 0.75rem 0;
+    }
+
+    .sidebar-nav {
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 0 0.75rem;
+    }
+
+    .sidebar-item {
+        border-left: none;
+        border-bottom: 2px solid transparent;
+        padding: 0.4rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .sidebar-item.active {
+        border-left-color: transparent;
+        border-bottom-color: var(--teal);
+    }
+
+    .main-inner {
+        padding: 0 1rem 2rem;
+    }
+
+    .filters-bar {
+        gap: 0.75rem;
+    }
+
+    .btn {
+        font-size: 0.85rem;
+        padding: 0.35rem 0.7rem;
+    }
+
+    .chart-wrap {
+        height: 260px;
+    }
 }