/* CVE.ICU Design System, as used by rbptracker.org.

   PRUNED 2026-08-26. This file was imported wholesale from a sibling project and
   two thirds of it styled components this site does not have: dropdown navs, stat
   cards with sparklines, chart and calendar containers, year pickers, viz cards,
   skeleton loaders. There is no canvas and no chart anywhere on this site, and
   after the pivot to a single list page there is no stat card either. It was
   49758 bytes on every page load, of which 19097 styled nothing.

   Removed by matching every top-level selector against the classes and ids the
   live templates actually emit. @media and @keyframes blocks were left untouched
   on purpose: rbp/breakpoints.py derives the render suite's viewport sweep from
   the @media preludes in this file, so pruning one silently narrows the sweep,
   and tests/test_breakpoints.py pins the widths.

   132 rules removed, 92 kept.
*/

/* Root Variables - Design System Colors */
:root {
    /* Base Colors */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #e9ecef;
    --color-bg-content: #ffffff;
    --color-bg-hover: #f8f9fa;
    --color-text: #212529;
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-primary: #0d6efd;
    --color-primary-light: rgba(13, 110, 253, 0.1);
    --color-accent: #0d6efd;
    --color-border: #dee2e6;
    --color-border-light: #f1f3f4;
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    
    /* Light Blue to Light Grey Visualization Palette */
    --viz-color-1: #e3f2fd;  /* Very light blue */
    --viz-color-2: #bbdefb;  /* Light blue */
    --viz-color-3: #90caf9;  /* Medium light blue */
    --viz-color-4: #64b5f6;  /* Medium blue */
    --viz-color-5: #42a5f5;  /* Blue */
    --viz-color-6: #2196f3;  /* Primary blue */
    --viz-color-7: #1e88e5;  /* Darker blue */
    --viz-color-8: #1976d2;  /* Dark blue */
    --viz-color-9: #9e9e9e;  /* Medium grey */
    --viz-color-10: #757575; /* Dark grey */
    
    /* Chart Color Palette - Light Blue to Grey Gradient */
    --chart-primary: #2196f3;
    --chart-secondary: #64b5f6;
    --chart-tertiary: #90caf9;
    --chart-quaternary: #bbdefb;
    --chart-accent-1: #81c784;
    --chart-accent-2: #ffb74d;
    --chart-accent-3: #f06292;
    --chart-grey-light: #e0e0e0;
    --chart-grey-medium: #9e9e9e;
    --chart-grey-dark: #616161;
    
    /* Semantic Colors */
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Layout */
    --container-max-width: 1200px;
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --color-bg-primary: #0f1117;
    --color-bg-secondary: #1a1d27;
    --color-bg-content: #1e2130;
    --color-bg-hover: #252838;
    --color-text: #e1e4ea;
    --color-text-primary: #e1e4ea;
    --color-text-secondary: #9ca3b4;
    --color-text-muted: #6b7280;
    --color-primary: #3b82f6;
    --color-primary-light: rgba(59, 130, 246, 0.15);
    --color-accent: #60a5fa;
    --color-border: #2d3348;
    --color-border-light: #252838;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #22d3ee;
    --color-light: #1a1d27;
    --color-dark: #e1e4ea;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header {
    background: linear-gradient(135deg, #1a1d27 0%, #252838 100%);
}

[data-theme="dark"] a:hover {
    color: #93c5fd;
}

[data-theme="dark"] .card-header.bg-primary {
    background-color: #1e3a5f !important;
}

[data-theme="dark"] .page-header button {
    background-color: #252838 !important;
    border-color: #2d3348 !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .page-header button:hover {
    background-color: #2d3348 !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

[data-theme="dark"] .page-header button:active,
[data-theme="dark"] .page-header button.active {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table {
    color: var(--color-text-primary);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: #2d3348;
}

[data-theme="dark"] .text-muted {
    color: var(--color-text-secondary) !important;
}

/* Dark mode toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
}

.theme-toggle:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Base Typography */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

h1 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

/* Links */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Header and Navigation */
.header {
    background-color: var(--color-bg-content);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}

.nav-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
    color: var(--color-text-primary);
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
    color: var(--color-accent);
}

.logo img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.nav {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all 0.15s ease-in-out;
    border: 2px solid transparent;
}

.nav-menu a:hover {
    color: var(--color-accent);
    background-color: rgba(13, 110, 253, 0.1);
    border-color: var(--color-accent);
    text-decoration: none;
}

.nav-menu a.active {
    color: var(--color-accent);
    background-color: rgba(13, 110, 253, 0.1);
    border-color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
}

.nav-toggle span {
    width: 1.5rem;
    height: 2px;
    background-color: var(--color-text-primary);
    margin: 2px 0;
    transition: 0.3s;
}

/* Main Content */
main {
    min-height: calc(100vh - 8rem);
    padding: var(--spacing-xl) 0;
}

/* Professional Page Header Styling */
.page-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2196f3, #64b5f6, #90caf9);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.page-header h1 {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.page-header small {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-medium);
}

/* Page header buttons - ensure proper contrast against gradient background */
.page-header button {
    background-color: #ffffff !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.page-header button:hover {
    background-color: #f8f9fa !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.page-header button:active,
.page-header button.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Responsive page header */
@media (max-width: 768px) {
    .page-header {
        padding: var(--spacing-lg) var(--spacing-md);
        margin-top: var(--spacing-md);
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-header small {
        font-size: 0.9rem;
    }
}

/* Cards */
.card {
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.card-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.card-body {
    padding: 0;
}

/* Responsive grid for smaller screens */


/* Additional responsive adjustments for card content */


table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

th {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

/* TOKEN-DRIVEN, and it was not.
   
   This shipped as a hardcoded `rgba(248, 249, 250, 0.5)` with no dark override,
   so in dark theme it composited to #8b8d95 and put --color-text-primary on it at
   2.6:1 and a link at 1.56:1, against a bar of 4.5. Every even row of every table
   on /method and /status.
   
   rbp.css already carried a comment describing this exact defect and a corrected
   restatement of the rule, scoped to `table.rbp`. The scoping is why it stayed
   live: the correction covered our own table and this unscoped original went on
   striping everything else. The 2026-08-26 pivot then deleted every page built
   around `table.rbp`, so the fixed rule ended up covering one small table and the
   broken one covered the rest of the site.
   
   Opaque token rather than a translucent fill, so there is nothing to composite
   and it resolves per theme. tests/test_a11y.py sweeps this surface. */
tbody tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
}

tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

/* Metric Cards for Visualizations */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.metric-card {
    background: linear-gradient(135deg, var(--viz-color-1), var(--viz-color-2));
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--chart-primary), var(--chart-secondary));
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.metric-value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--chart-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1;
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-secondary); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }

/* Footer */
.footer {
    background-color: var(--color-bg-content);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-xl) 0;
    margin-top: auto;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.footer p {
    margin-bottom: var(--spacing-sm);
}

.footer a {
    color: var(--color-text-secondary);
}

/* Responsive adjustments for visualizations */
@media (max-width: 768px) {
    
    .metric-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .metric-card {
        padding: var(--spacing-md);
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
}

.footer a:hover {
    color: var(--color-accent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-content);
        border-top: 1px solid var(--color-border);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: var(--box-shadow-lg);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .nav-container {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    
    .card {
        padding: var(--spacing-md);
    }
    
    th, td {
        padding: var(--spacing-sm);
    }
    
    .metric-grid {
        grid-template-columns: 1fr;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
}

/* ========================================
   COMPREHENSIVE MOBILE ENHANCEMENTS
   ======================================== */

/* Touch-friendly minimum sizes for mobile */
@media (max-width: 768px) {
    /* Improved touch targets (minimum 44px) */
    button,
    .btn,
    .quick-select-btn,
    .nav-menu a,
    .year-label {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    table {
        min-width: 600px;
        font-size: 0.8rem;
    }
    
    th, td {
        white-space: nowrap;
        padding: 0.5rem;
    }
    
    /* Mobile-friendly navigation */
    .nav-container {
        height: auto;
        min-height: 4rem;
        padding: 0.5rem 1rem;
    }
    
    .logo {
        font-size: 1.1rem;
    }
    
    .logo img {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    /* Full-width mobile menu */
    .nav-menu {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }
    
    .nav-menu a {
        display: block;
        width: 100%;
        padding: 1rem 1.5rem;
        text-align: left;
    }
    
    /* Better card spacing */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-header,
    .card-body {
        padding: 1rem;
    }
    
    /* Page header mobile optimization */
    .page-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .page-header .display-4 {
        font-size: 1.75rem;
    }
    
    .page-header small {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* Better form controls */
    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.2);
    }
    
    /* Improved footer for mobile */
    .footer {
        padding: 1.5rem 0;
        font-size: 0.8rem;
    }
    
    .footer > div > div {
        flex-direction: column;
        gap: 1rem;
        text-align: center !important;
    }
    
    .footer > div > div > div {
        text-align: center !important;
    }
}

/* Extra small devices (320px - 480px) */
@media (max-width: 480px) {
    /* Even more compact layouts */
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 0 0.75rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* Compact cards */
    .card {
        padding: 0.75rem;
    }
    
    .card-header,
    .card-body {
        padding: 0.75rem;
    }
    
    /* Smaller navigation */
    .nav-container {
        padding: 0.5rem 0.75rem;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    /* Better logo and text layout */
    .page-header .btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Landscape mobile devices */
@media (max-width: 900px) and (orientation: landscape) {
    
    .page-header {
        padding: 0.75rem 1rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
}

/* Tablet devices (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    
    .container {
        padding: 0 1.5rem;
    }
}

/* Mobile viewport height fix for iOS */
@supports (-webkit-touch-callout: none) {
}

/* Improved touch scrolling for all mobile devices */
* {
    -webkit-overflow-scrolling: touch;
}

/* Prevent zoom on input focus (mobile Safari) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Mobile-friendly hover states (disable on touch devices) */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .stat-card:hover,
    .viz-card:hover {
        transform: none;
        box-shadow: var(--box-shadow);
    }
    
    .nav-menu a:hover {
        background-color: transparent;
    }
}

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .header {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .footer {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* Skeleton loading animations */
@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

.homepage-chart-card:hover .chart-export-controls,
.card:hover .chart-export-controls,
.homepage-chart-card:focus-within .chart-export-controls,
.card:focus-within .chart-export-controls {
    opacity: 1;
}


/* Skip to content link (accessibility) */
/* THE OFF-SCREEN POSITION HAS TO BE DERIVED, not guessed at -40px.
   
   The link computes to 41.6px tall (0.5rem padding either side of a 1rem line),
   so `top: -40px` left 1.6px of it on screen: a small blue bar in the top-left
   corner of every page on the site, visible in every screenshot taken during the
   2026-08-27 review.
   
   `translateY(-100%)` moves it by its OWN height whatever that turns out to be,
   so a padding or font-size change cannot uncover it again. `top: 0` stays as the
   anchor so the focused state needs no second offset. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.2s;
}
.skip-link:focus {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

/* Print styles */
@media print {

    /* Page margins */
    @page {
        margin: 1.5cm;
    }

    /* 1. Hide non-essential UI elements */
    .header,
    .footer,
    .nav-toggle,
    .btn,
    button,
    .theme-toggle,
    .chart-export-controls,
    .quick-select-buttons,
    .export-buttons,
    .homepage-chart-footer,
    .page-header .btn,
    .whats-new-banner {
        display: none !important;
    }

    /* 2. Force white backgrounds (override dark mode) */
    body,
    .card,
    .stat-card,
    .stat-cards,
    .page-header,
    .container,
    [data-theme="dark"] body,
    [data-theme="dark"] .card,
    [data-theme="dark"] .stat-card,
    [data-theme="dark"] .stat-cards,
    [data-theme="dark"] .page-header {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* 3. Force dark text color for readability */
    body,
    p,
    span,
    h1, h2, h3, h4, h5, h6,
    a,
    td, th,
    label,
    .stat-card,
    .stat-card *,
    .card *,
    .page-header *,
    [data-theme="dark"] body,
    [data-theme="dark"] p,
    [data-theme="dark"] span,
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6,
    [data-theme="dark"] a,
    [data-theme="dark"] td,
    [data-theme="dark"] th,
    [data-theme="dark"] label,
    [data-theme="dark"] .stat-card,
    [data-theme="dark"] .stat-card *,
    [data-theme="dark"] .card *,
    [data-theme="dark"] .page-header * {
        color: #212529 !important;
    }

    /* 4. Remove box shadows and border-radius for clean printing */
    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .card,
    .stat-card,
    .page-header {
        border-radius: 0 !important;
        border: 1px solid #dee2e6 !important;
    }

    /* Remove pseudo-element decorations */
    .stat-card::before,
    .page-header::before {
        display: none !important;
    }

    /* 5. Make charts display at full width */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 6. Ensure tables print with borders and don't break across pages */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }

    th, td {
        border: 1px solid #dee2e6 !important;
        padding: 6px 8px !important;
    }

    thead {
        display: table-header-group !important;
    }

    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* 7. Remove hover effects and transitions */
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .stat-card:hover,
    .card:hover,
    a:hover {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Print links with their URLs */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #6c757d !important;
        word-break: break-all;
    }

    /* Prevent nav links from printing URLs */
    .header a::after,
    .footer a::after {
        content: none !important;
    }

}