/* ============================================================ Macro Investment Dashboard — Custom Styles ============================================================ */ /* --- Global ------------------------------------------------- */ body { font-size: 0.875rem; } /* Navbar */ .navbar-brand { letter-spacing: 0.02em; } /* --- DataTables dark theme overrides ----------------------- */ table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid #444 !important; white-space: nowrap; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #aaa; background-color: #0d0d1a; } table.dataTable.table-dark tbody tr:hover td { background-color: #1a1a2e !important; } table.dataTable.table-dark > tbody > tr.selected > td { background-color: #2a2a4e !important; } div.dataTables_wrapper div.dataTables_filter input { background-color: #1a1a2e; border: 1px solid #444; color: #fff; border-radius: 4px; padding: 0.25rem 0.5rem; } div.dataTables_wrapper div.dataTables_length select { background-color: #1a1a2e; border: 1px solid #444; color: #fff; border-radius: 4px; } div.dataTables_wrapper div.dataTables_info { color: #888; font-size: 0.75rem; } div.dataTables_wrapper div.dataTables_paginate .paginate_button { color: #aaa !important; } div.dataTables_wrapper div.dataTables_paginate .paginate_button.current, div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover { background: #2a2a4e !important; border-color: #555 !important; color: #fff !important; } /* --- Metric Cards ------------------------------------------ */ .metric-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 0.875rem 1rem; transition: border-color 0.2s; } .metric-card:hover { border-color: #555; } .metric-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin-top: 0.25rem; } .metric-label { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.06em; } /* --- Chart containers -------------------------------------- */ .chart-container { position: relative; min-height: 240px; } /* --- Table dark overrides ---------------------------------- */ .table-dark th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #888; border-color: #333; } .table-dark td { border-color: #2a2a2a; vertical-align: middle; white-space: nowrap; } /* Compact table cells */ #country-table td, #country-table th { padding: 0.35rem 0.6rem; } /* Fix: text-muted is too dark on dark table backgrounds */ .table-dark .text-muted, .bg-dark .text-muted { color: #9ca3af !important; } /* --- Color utilities --------------------------------------- */ .text-positive { color: #4CAF50; } .text-negative { color: #f44336; } /* --- Cards ------------------------------------------------- */ .card-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #aaa; } /* --- Download buttons -------------------------------------- */ .btn-outline-secondary { font-size: 0.75rem; } /* --- Theme toggle button ----------------------------------- */ #theme-toggle { font-size: 1rem; line-height: 1; padding: 0.25rem 0.5rem; } /* ============================================================ LIGHT MODE OVERRIDES Applied when ============================================================ */ html[data-theme="light"] body { background-color: #f0f2f5 !important; color: #212529 !important; } html[data-theme="light"] .bg-dark, html[data-theme="light"] .bg-dark.card { background-color: #ffffff !important; } html[data-theme="light"] .text-light { color: #212529 !important; } html[data-theme="light"] .text-muted, html[data-theme="light"] .table-dark .text-muted, html[data-theme="light"] .bg-dark .text-muted { color: #6c757d !important; } html[data-theme="light"] .border-secondary { border-color: #dee2e6 !important; } html[data-theme="light"] .card { box-shadow: 0 1px 3px rgba(0,0,0,0.08); } html[data-theme="light"] .card-header { color: #495057 !important; background-color: #f8f9fa !important; border-color: #dee2e6 !important; } html[data-theme="light"] .metric-card { background: #ffffff !important; border-color: #dee2e6 !important; } html[data-theme="light"] .metric-label { color: #6c757d !important; } html[data-theme="light"] .metric-value { color: #212529 !important; } /* Light mode tables */ html[data-theme="light"] .table-dark { --bs-table-bg: #ffffff; --bs-table-striped-bg: #f8f9fa; --bs-table-hover-bg: #f0f2f5; --bs-table-border-color: #dee2e6; --bs-table-color: #212529; color: #212529 !important; } html[data-theme="light"] .table-dark th { color: #6c757d !important; border-color: #dee2e6 !important; background-color: #f8f9fa !important; } html[data-theme="light"] .table-dark td { border-color: #dee2e6 !important; color: #212529 !important; } html[data-theme="light"] table.dataTable thead th, html[data-theme="light"] table.dataTable thead td { background-color: #f8f9fa !important; color: #6c757d !important; border-bottom: 1px solid #dee2e6 !important; } html[data-theme="light"] table.dataTable.table-dark tbody tr:hover td { background-color: #f0f2f5 !important; } html[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input, html[data-theme="light"] div.dataTables_wrapper div.dataTables_length select { background-color: #ffffff; border-color: #ced4da; color: #212529; } html[data-theme="light"] div.dataTables_wrapper div.dataTables_info { color: #6c757d; } html[data-theme="light"] div.dataTables_wrapper div.dataTables_paginate .paginate_button { color: #495057 !important; } html[data-theme="light"] div.dataTables_wrapper div.dataTables_paginate .paginate_button.current, html[data-theme="light"] div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover { background: #e9ecef !important; border-color: #ced4da !important; color: #212529 !important; } html[data-theme="light"] .btn-outline-secondary { color: #6c757d; border-color: #6c757d; } html[data-theme="light"] .range-btn { color: #6c757d; border-color: #6c757d; } html[data-theme="light"] .range-btn.active { background-color: #6c757d; color: #fff; }