@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* === Responsive Scaling === clamp(min, preferred, max) so the dashboard scales from laptop (~16px @ 1280px) → 1080p (~23px) → 4K (~46px) All Mantine rem-based sizes (Text, Title, Badge, spacing) scale automatically. */ html { font-size: clamp(16px, 1.2vw, 50px); } /* Laptop mode: halve the base font-size so all rem/em-based sizes and spacing scale down to match the ECharts SCALE=1 (half of SCALE=2 used for 4K). Applied via class="laptop-mode" on , injected by app.py at startup. */ html.laptop-mode { font-size: clamp(12px, 0.85vw, 18px); } /* Expand Mantine containers to use near-full viewport width on large screens. Uses % (relative to parent) instead of vw to account for scrollbar width. */ .mantine-Container-root { max-width: 95% !important; } /* Prevent horizontal overflow from any fixed-width element */ html, body { overflow-x: hidden; } /* Fix compare modal (fullscreen dbc.Modal) scrollbar height. Force the modal content to stay within the viewport so the modal body is the only scrolling region. */ #compare-modal .modal-dialog { height: 100%; margin: 0; } #compare-modal .modal-content { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; } #compare-modal .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); min-height: 100vh; } .dashboard-title { font-size: 2.5rem; font-weight: 700; color: #1a365d; text-align: center; margin-bottom: 0.5rem; } .dashboard-subtitle { font-size: 1rem; color: #4a5568; text-align: center; margin-bottom: 2rem; } .metric-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; padding: 1.5rem; color: white; box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3); transition: transform 0.3s ease; } .metric-card:hover { transform: translateY(-5px); } .metric-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 10px 40px rgba(17, 153, 142, 0.3); } .metric-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 10px 40px rgba(245, 87, 108, 0.3); } .metric-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 10px 40px rgba(79, 172, 254, 0.3); } .metric-value { font-size: 1.8rem; font-weight: 700; } .metric-label { font-size: 0.9rem; opacity: 0.9; margin-top: 0.5rem; } .card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 1.5rem; margin-bottom: 1.5rem; } .card-title { font-size: 1.25rem; font-weight: 600; color: #1a365d; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e2e8f0; } .sankey-container { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 1rem; min-height: 600px; } .nav-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .nav-button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); }