@media print {

    /* Hide Navigation and UI Elements */
    #sidebar-wrapper,
    /* Common ID */
    .sidebar,
    /* Common Class */
    #sidebar,
    .navbar,
    .btn-group,
    button:not(:disabled),
    /* Hide all buttons unless specified */
    .no-print,
    footer,
    .filters-card,
    /* Hides the filter row */
    .nav-tabs,
    /* Hides the Tab selection headers */
    .sticky-area,
    /* Hides the sticky header area containing filters */
    header,
    /* Standard HTML5 header */
    .header-title-section,
    /* Assuming header component class */
    #page-content>div>h1,
    /* Generic page titles */
    .dash-header,
    /* If any */

    /* Floating Artifacts & Badges */
    .badge,
    [class*="badge"],
    [class*="status"],
    [class*="sidebar-toggle"],
    .btn-float,
    [style*="position: fixed"],
    /* Hides all fixed elements like chat widgets or status bars */
    [style*="bottom:"]

    /* Likely hides footer elements positioned at bottom */
    ,
    .hide-on-print {
        display: none !important;
    }

    /* Reset Main Container */
    .container-fluid,
    .content,
    #page-content,
    .tab-content,
    /* Bootstrap tab content container */
    #content-dashboard-ui {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: white !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Page Setup */
    @page {
        size: A4;
        margin: 1.5cm;
    }

    body {
        background-color: white !important;
        color: #1a1a1a !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }

    /* Report Specific Styles */
    .report-header {
        display: block !important;
        border-bottom: 2px solid #6610f2;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }

    .report-logo {
        max-height: 60px;
    }

    .report-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        text-transform: uppercase;
    }

    .report-date {
        font-size: 14px;
        color: #666;
    }

    /* Glossario Styling */
    .glossary-box {
        background-color: #f8f9fa !important;
        border-left: 5px solid #e9ecef;
        padding: 1rem;
        margin-bottom: 2rem;
        page-break-inside: avoid;
    }

    /* Card Resets */
    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-body {
        padding: 0.5rem 0 !important;
    }

    /* Grid Adjustments */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .col-md-3,
    .col-md-4,
    .col-md-6 {
        flex: 0 0 auto !important;
    }

    .col-md-3 {
        width: 25% !important;
    }

    .col-md-4 {
        width: 33.33% !important;
    }

    .col-md-6 {
        width: 50% !important;
    }

    /* Top Media */
    .media-card-print {
        display: block;
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 1rem;
        background-color: white !important;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .media-thumbnail {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .ranked-badge {
        position: absolute;
        top: 5px;
        left: 5px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        font-size: 12px;
    }
}

/* Screen Only Styles for Report Elements (Hide header on screen normally?) 
   Actually, we might want to show them nicely on screen too, or hide the detailed header 
   until print. For now, let's keep them visible or use a class to hide on screen if needed.
*/
.print-only {
    display: none;
}

@media print {
    .print-only {
        display: block !important;
    }
}