@media print {

    /* ===================================
       PAGE SETUP - A4 Landscape, No Margins
       =================================== */
    @page {
        size: A4 landscape;
        margin: 0;
    }

    /* ===================================
       CRITICAL FIX: Prevent Content Disappearing
       Override flex/grid display issues that cause content clipping
       =================================== */
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #root,
    main {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force text containers to be visible, but preserve layout containers */
    p,
    span,
    div:not([class*="grid"]):not([class*="flex"]) {
        overflow: visible !important;
    }

    /* Ensure colors print correctly */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ===================================
       HIDE NON-PRINTABLE UI ELEMENTS
       =================================== */
    nav,
    header:not(.always-print),
    footer:not(.always-print),
    aside,
    .no-print,
    nav button,
    header button,
    [class*="pagination"] button,
    [class*="control"] button,
    button[class*="hover:bg"]:not(td button):not(table button),
    [class*="fixed"]:not(.always-print),
    [class*="sticky"]:not(.always-print):not(thead),
    [class*="overlay"],
    [class*="modal"]:not(.always-print) {
        display: none !important;
    }

    /* Ensure always-print elements are visible */
    .always-print {
        display: block !important;
    }

    .always-print.flex {
        display: flex !important;
    }

    /* ===================================
       GRID FIXES - Ensure 2-column layouts work
       =================================== */
    .grid,
    .print-grid-2-col {
        display: grid !important;
    }

    .grid-cols-2,
    .md\\:grid-cols-2,
    .print\\:grid-cols-2,
    .print-grid-2-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem;
    }

    .grid-cols-5,
    .lg\\:grid-cols-5,
    .print\\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }

    /* ===================================
       BUTTON FIXES - Show content buttons
       =================================== */
    table button,
    td button,
    tbody button,
    [class*="card"] button,
    [class*="rounded"] button {
        display: inline-block !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        color: inherit !important;
        text-decoration: none !important;
        cursor: default !important;
        text-align: left !important;
    }

    /* Override table cell alignment for project names - only tbody, keep thead centered */
    tbody td[class*="text-center"] .flex,
    tbody td div.flex.flex-col.items-center {
        align-items: flex-start !important;
    }

    tbody td button[class*="text-center"] {
        text-align: left !important;
    }

    /* ===================================
       FLEX FIXES - Keep flex where needed
       =================================== */
    .flex,
    .md\\:flex,
    .print\\:flex,
    [class*="flex-col"],
    [class*="flex-row"] {
        display: flex !important;
    }

    .flex-col {
        flex-direction: column !important;
    }

    .flex-row {
        flex-direction: row !important;
    }

    /* ===================================
       PAGE BREAK CONTROL
       =================================== */
    .print-page-break,
    .break-after-page {
        break-after: page !important;
        page-break-after: always !important;
    }

    /* Prevent breaking inside these elements */
    .bg-white:not(table):not(div.flex-1>div),
    .rounded-xl:not(table):not(div.flex-1>div),
    .rounded-2xl:not(table):not(div.flex-1>div),
    .border:not(table):not(div.flex-1>div),
    [class*="card"],
    tr,
    img,
    figure {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    /* Allow tables in print pages to break if needed */
    table {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Allow text blocks to break */
    p,
    div:not([class*="card"]):not([class*="rounded"]),
    span {
        break-inside: auto !important;
    }

    /* Typography orphans/widows */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    p {
        orphans: 3;
        widows: 3;
    }

    /* ===================================
       BACKGROUND COLORS & IMAGES
       =================================== */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure specific backgrounds print - SUBTLY ENHANCED FOR VIBRANCY */
    .bg-prussian-50 {
        background-color: #e1ecf4 !important;
        /* prussian-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-slate-50 {
        background-color: #f1f5f9 !important;
        /* slate-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-gray-50 {
        background-color: #f3f4f6 !important;
        /* gray-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-blue-50 {
        background-color: #dbeafe !important;
        /* blue-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-amber-50 {
        background-color: #fef3c7 !important;
        /* amber-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-orange-50 {
        background-color: #ffedd5 !important;
        /* orange-100 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* TEXT COLOR ENHANCEMENT - Make greys darker/black */
    .text-slate-500,
    .text-slate-600,
    .text-slate-700,
    .text-gray-500,
    .text-gray-600,
    .text-gray-700,
    .text-prussian-500,
    .text-prussian-600 {
        color: #0f172a !important;
        /* slate-900 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure white text stays white */
    .text-white {
        color: #ffffff !important;
    }



    /* Remove shadows but keep borders */
    .shadow,
    .shadow-sm,
    .shadow-md,
    .shadow-lg {
        box-shadow: none !important;
    }

    .border {
        border-color: #e2e8f0 !important;
    }

    /* ===================================
       HEIGHT PRESERVATION - Critical for A4 pages
       =================================== */
    [class*="h-\\[210mm\\]"],
    [class*="max-h-\\[210mm\\]"],
    [class*="min-h-\\[210mm\\]"],
    [class*="h-\\[225mm\\]"],
    [class*="max-h-\\[225mm\\]"],
    [class*="min-h-\\[225mm\\]"] {
        height: 210mm !important;
        max-height: 210mm !important;
        min-height: 210mm !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Force all containers to show overflow in print */
    [class*="overflow-"] {
        overflow: visible !important;
    }

    /* Full height elements */
    .h-full,
    .print\\:h-full {
        height: 100% !important;
    }

    /* Flex-1 elements need to take available space */
    .flex-1 {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    /* ===================================
       TABLE FIXES
       =================================== */
    .print-area-table-wrapper {
        display: block !important;
        overflow: visible !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
        height: 100% !important;
    }

    .print-area-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    .print-area-fallback {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .print-area-grid {
        display: grid !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .print-area-header {
        background: #f1f5f9 !important;
        font-weight: 900 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        border-bottom: 1px solid #e2e8f0 !important;
        flex: 0 0 34px !important;
    }

    .print-area-row {
        border-bottom: 1px solid #f1f5f9 !important;
        flex: 1 1 0 !important;
        min-height: 28px !important;
    }

    .print-area-cell {
        padding: 8px 4px !important;
        font-size: 13px !important;
        color: #0f172a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .print-area-cell-center {
        text-align: center !important;
    }

    .print-area-cell-left {
        text-align: left !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .print-area-row:nth-child(even) {
        background: #f8fafc !important;
    }

    .print-area-header .print-area-cell {
        font-size: 11px !important;
        font-weight: 900 !important;
        color: #64748b !important;
    }

    .print-area-rank {
        font-weight: 900 !important;
        font-size: 13px !important;
    }

    .print-area-rank-1 {
        color: #f59e0b !important;
    }

    .print-area-rank-2 {
        color: #94a3b8 !important;
    }

    .print-area-rank-3 {
        color: #f97316 !important;
    }

    .print-area-trend {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
    }

    .print-area-trend-up {
        color: #ef4444 !important;
    }

    .print-area-trend-down {
        color: #10b981 !important;
    }

    .print-area-trend-flat {
        color: #cbd5f5 !important;
    }

    .print-area-trend-value {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .print-area-circle {
        font-weight: 800 !important;
    }

    .print-area-pill {
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        padding: 2px 8px !important;
        border-radius: 999px !important;
        background: #e8f1fb !important;
        border: 1px solid #dbeafe !important;
        color: #1e3a8a !important;
        font-weight: 900 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .print-area-unit {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
    }

    .print-area-rate {
        font-weight: 900 !important;
        font-size: 12px !important;
    }

    .print-area-rate-high {
        color: #059669 !important;
    }

    .print-area-rate-mid {
        color: #f59e0b !important;
    }

    .print-area-rate-low {
        color: #ef4444 !important;
    }

    .print-area-project {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-right: 6px !important;
        font-weight: 700 !important;
    }

    .print-area-project-name {
        color: #0f172a !important;
    }

    .print-area-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: #e2e8f0 !important;
        color: #475569 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
    }

    .print-area-top1 {
        background: rgba(252, 211, 77, 0.2) !important;
    }

    .print-area-top2 {
        background: rgba(241, 245, 249, 0.6) !important;
    }

    .print-area-top3 {
        background: rgba(254, 215, 170, 0.2) !important;
    }

    table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    thead th {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0.5rem 0.75rem !important;
        font-weight: 900 !important;
        color: #64748b !important;
        font-size: 11px !important;
    }

    tbody {
        display: table-row-group !important;
    }
    
    tbody td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

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

    /* ===================================
       SCROLLBAR REMOVAL
       =================================== */
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* Preserve overflow for chart containers but hide scrollbars */
    .overflow-auto,
    .overflow-y-auto {
        overflow: visible !important;
    }

    /* Keep horizontal overflow for charts to prevent clipping */
    .print-chart-container {
        overflow: visible !important;
    }

    /* Ensure inner chart container takes full width */
    .print-chart-container>div {
        min-width: 100% !important;
    }

    /* ===================================
       VISIBILITY & OPACITY
       =================================== */
    .print\\:block {
        display: block !important;
    }

    .print\\:hidden,
    .md\\:hidden:not(.print\\:block) {
        display: none !important;
    }

    .print\\:flex {
        display: flex !important;
    }

    /* Ensure printed elements are opaque */
    .opacity-50,
    .opacity-60,
    .opacity-70 {
        opacity: 1 !important;
    }

    /* Remove grayscale filters */
    .grayscale {
        filter: none !important;
    }
}

/* ========================================
   PRINT PROTECTION FOR MEMBER-ONLY CONTENT
   ======================================== */
@media print {

    /* Blur all Expert Highlights content when not authorized */
    body:not(.authorized-print) .expert-highlights-content,
    body:not(.authorized-print) [class*="expert-highlights"]>div {
        filter: blur(8px) !important;
        -webkit-filter: blur(8px) !important;
        user-select: none !important;
    }

    /* Add "MEMBERS ONLY" watermark overlay for unauthorized prints */
    body:not(.authorized-print)::before {
        content: "會員限定內容 MEMBERS ONLY" !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        font-size: 80px !important;
        font-weight: 900 !important;
        color: rgba(0, 0, 0, 0.15) !important;
        z-index: 99999 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
        letter-spacing: 0.1em !important;
    }

    /* Authorized print: Remove blur and watermark */
    body.authorized-print .expert-highlights-content,
    body.authorized-print [class*="expert-highlights"]>div {
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.authorized-print::before {
        display: none !important;
    }

    /* ===================================
       FINAL OVERRIDES - FORCE WHITE BACKGROUNDS (LAYOUT ONLY)
       =================================== */
    html,
    body,
    #root,
    main,
    .min-h-screen {
        background: white !important;
        background-color: white !important;
    }

    /* WE DO NOT WANT TO OVERRIDE CONTENT BACKGROUNDS
       Only override explicit sticky layout containers that might leak */
    .sticky.bottom-0,
    div[class*="sticky"][class*="bg-slate-50"] {
        display: none !important;
    }
}

/* ===================================
/* ===================================
   REMOVE OPACITY FOR PRINT (Force solid colors)
   =================================== */
@media print {

    .opacity-50,
    .opacity-60,
    .opacity-70,
    .opacity-80,
    .opacity-90 {
        opacity: 1 !important;
    }
}