/* ============================================================ TAX CHART CARDS — MATCH DEBT DASHBOARD COLORS ============================================================ */ /* Chart title */ .tax-dashboard-page .tax-indicator-chart-header h5 { color: #10233f !important; font-weight: 700 !important; } /* Subtitle */ .tax-dashboard-page .tax-chart-subtitle { color: #4a6692 !important; opacity: 1 !important; } /* Metadata box */ .tax-dashboard-page .tax-indicator-meta-block { background: #f7f9fc !important; border: 1px solid #dce4ed !important; } /* Units / Period labels */ .tax-dashboard-page .tax-meta-row > span { color: #4a6692 !important; font-weight: 700 !important; opacity: 1 !important; } /* Units / Period values */ .tax-dashboard-page .tax-meta-row > strong { color: #173f73 !important; font-weight: 500 !important; opacity: 1 !important; } /* Period-count badge */ .tax-dashboard-page .tax-point-count { color: #416b91 !important; background: #eef5fa !important; border-color: #cfdeea !important; } /* Light theme reinforcement */ [data-theme="light"] .tax-dashboard-page .tax-indicator-chart-header h5 { color: #10233f !important; } [data-theme="light"] .tax-dashboard-page .tax-chart-subtitle { color: #4a6692 !important; } [data-theme="light"] .tax-dashboard-page .tax-meta-row > span { color: #4a6692 !important; } [data-theme="light"] .tax-dashboard-page .tax-meta-row > strong { color: #173f73 !important; } /* TAX INFORMATION HEADING CARDS */ .tax-dashboard-page .tax-info-heading-card { padding: 32px 30px !important; min-height: 0 !important; margin-top: 20px !important; } .tax-dashboard-page .tax-info-heading-card h3 { margin: 0 0 8px 0 !important; color: #10233f !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1.2 !important; } .tax-dashboard-page .tax-info-heading-card p { margin: 0 !important; color: #4a6692 !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* ============================================================ TAX FINAL CHART / COLLAPSIBLE CLEANUP ============================================================ */ /* Tax shade only for the standard common collapsible icon. Size and typography continue to come from the shared dashboard styles used on the other pages. */ .tax-dashboard-page .collapsible-icon.tax-section-icon { color: #087faf !important; background: #eef8fc !important; border-color: #b8deee !important; } .tax-dashboard-page .collapsible-toggle:hover .collapsible-icon.tax-section-icon { color: #066c98 !important; background: #e2f4fb !important; border-color: #8bcde5 !important; } /* Keep Tax-to-GDP first when both are displayed */ .tax-dashboard-page .tax-indicator-chart-card[data-tax-chart-kind="tax_gdp"] { order: 1; } .tax-dashboard-page .tax-indicator-chart-card[data-tax-chart-kind="tax_composition"] { order: 2; } /* TAX CHART HOVER STABILITY FIX */ /* * Do not enlarge, fade, filter or move the actual * chart/canvas on hover. */ .tax-dashboard-page .tax-indicator-chart-card:hover .tax-indicator-chart-wrap, .tax-dashboard-page .tax-indicator-chart-card:hover .tax-indicator-panel, .tax-dashboard-page .tax-indicator-chart-card:hover .tax-mini-chart, .tax-dashboard-page .tax-indicator-chart-wrap:hover, .tax-dashboard-page .tax-mini-chart:hover { transform: none !important; scale: 1 !important; opacity: 1 !important; visibility: visible !important; filter: none !important; } /* Keep canvas stable while Chart.js tooltip is active */ .tax-dashboard-page .tax-mini-chart { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } /* ============================================================ TAX CHART ZOOM — MATCH APPROVED DEBT / MACRO SMALL CARDS Desktop: - subtle sideways scale: 1.035 - chart height: 320px -> 350px Responsive: - no sideways scaling at <= 900px - mobile chart height: 300px Canvas itself remains stable to prevent Chart.js flicker. ============================================================ */ .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card { transform: translateZ(0) scale(1); } .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-wrap { transition: height 0.22s ease, min-height 0.22s ease; } @media (hover: hover) and (pointer: fine) { .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:hover, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:focus-within, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card.is-chart-zoomed { z-index: 8; transform: translateZ(0) scale(1.035) !important; } .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:hover .tax-indicator-chart-wrap, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:focus-within .tax-indicator-chart-wrap, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card.is-chart-zoomed .tax-indicator-chart-wrap { height: 350px !important; min-height: 350px !important; transform: none !important; } .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-grid:has( .tax-indicator-chart-card:hover ) .tax-indicator-chart-card:not(:hover) { opacity: 1 !important; } .public-dashboard-page.tax-dashboard-page .tax-mini-chart, .public-dashboard-page.tax-dashboard-page .tax-mini-chart:hover { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } } @media (max-width: 900px) { .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:hover, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:focus-within, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card.is-chart-zoomed { transform: none !important; } } @media (max-width: 720px) { .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:hover .tax-indicator-chart-wrap, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:focus-within .tax-indicator-chart-wrap, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card.is-chart-zoomed .tax-indicator-chart-wrap { height: 300px !important; min-height: 300px !important; } } @media (prefers-reduced-motion: reduce) { .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-wrap { transition: none !important; } .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:hover, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card:focus-within, .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-card.is-chart-zoomed { transform: none !important; } } /* ============================================================ TAX CHART ORDER — FOLLOW BACKEND ORDER Django already returns the visual cards in the required order: 1. Tax-to-GDP Ratio 2. Tax Revenue Composition 3. Additional / calculated visuals Do not reorder individual cards through CSS. ============================================================ */ .tax-indicator-chart-grid > .tax-indicator-chart-card { order: initial !important; } /* ============================================================ TAX CHART ROW SPACING Keep horizontal spacing unchanged but reduce the large vertical space between chart rows. ============================================================ */ .tax-indicator-chart-grid { row-gap: 20px !important; } .tax-indicator-chart-card { margin-top: 0 !important; } /* ============================================================ TAX GRAPH ROW SPACING — FINAL OVERRIDE Horizontal spacing remains 20px. Vertical spacing between graph rows is reduced. Remove the legacy 30px top margin applied to each chart card. ============================================================ */ .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-grid { column-gap: 20px !important; row-gap: 12px !important; } .public-dashboard-page.tax-dashboard-page .tax-indicator-chart-grid > .tax-indicator-chart-card { margin-top: 0 !important; }