/* ================================================================
   print.css
   Print + PDF-download stylesheet (loaded with media="print").

   The HTML / PDF download takes a snapshot of #report-section.
   This stylesheet:
     1. Hides the chrome that doesn't belong in a printed report
        (nav, breadcrumb, tab bar, sidebar, download modal, table)
     2. Re-shows the AidEnvironment logo at the top of the report
        (it's hidden on screen via page-member-state-detail.css)
     3. Forces the hero, stat cards, commodity bars and pie charts
        to fit nicely on A4

   Sections
   ────────
     1. Hide non-printable elements
     2. Body + container reset
     3. Logo reveal
     4. Hero strip (country name + flag)
     5. Stat cards
     6. Commodity-bar widget
     7. Pie-chart section
     8. Page settings (size, margins, colour fidelity)
   ================================================================ */


/* ===== 1. Hide non-printable elements ====================== */

.cc-nav,
.cc-nav__overlay,
.cc-detail-breadcrumb,
.cc-detail-tabbar,
.cc-detail-side,
.container > nav:first-of-type,
.breadcrumb-trail,
.breadcrumb,
.footer,
#toggle-sidebar,
.sticky-sidebar,
.toggle-button,
.cc-detail-download,
.cc-detail-toolbar,
.cc-detail-supplier__boat,
.modal__overlay,
.info-icon,
.info-tooltip {
    display: none !important;
}


/* ===== Forest-risk products table ========================= */

/* Compact the destinations / suppliers table so it fits A4. The
   on-screen 8-column grid is much wider than the printable area;
   force smaller column floors + small fonts so everything fits. */
.table-section {
    page-break-inside: avoid !important;
    border: 0 !important;
    box-shadow: none !important;
    background: white !important;
    padding: 0 !important;
    margin: 8px 0 !important;
}

.cc-table {
    background: white !important;
}

.cc-table__head,
.cc-table__row {
    grid-template-columns:
        minmax(36px, 0.5fr)
        minmax(90px, 1.1fr)
        minmax(75px, 0.8fr)
        repeat(5, minmax(70px, 1fr)) !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    font-size: 7pt !important;
}

.cc-table__head {
    background: #087880 !important;
    color: white !important;
}

.cc-table__row {
    border-bottom: 1px solid #eee !important;
}

.cc-table__row:hover {
    background: transparent !important;
}

/* Supplier cell internals — keep flag + name + bar, drop hover-only
   metric tooltip styling. */
.cc-detail-supplier__head {
    gap: 4px !important;
    line-height: 1.15 !important;
}

.cc-detail-supplier__flag {
    width: 14px !important;
}

.cc-detail-supplier__name {
    color: #087880 !important;
    text-decoration: none !important;
    font-size: 7pt !important;
}

.cc-detail-supplier__defor {
    width: 12px !important;
    height: 12px !important;
}

.cc-detail-share__bar--supplier {
    height: 4px !important;
}

.cc-detail-supplier__pct {
    font-size: 6pt !important;
}

/* Heading + lede above the table */
.cc-detail-heading__title {
    font-size: 11pt !important;
    margin: 12px 0 4px !important;
}

.cc-detail-heading__lede {
    font-size: 7pt !important;
    margin: 0 0 6px !important;
}


/* ===== 2. Body + container reset =========================== */

body {
    margin: 0 !important;
    padding: 0 !important;
    background: white;
}

.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#report-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0.5cm 0.3cm 0.5cm !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: -100px !important;
}


/* ===== 3. Logo reveal ====================================== */

/* On screen the AidEnvironment logo is hidden; only the printed
   report shows it. */
.print-logo {
    display: block !important;
    margin-bottom: 20px;
    padding-bottom: 5px;
}


/* ===== 4. Hero strip ======================================= */

.cc-detail-hero {
    margin-top: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    break-inside: avoid !important;
}

.cc-detail-hero__inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cc-detail-hero__flag img {
    width: 60px !important;
    height: auto !important;
    box-shadow: none !important;
}

.cc-detail-hero__text h1 {
    font-size: 18pt !important;
    margin: 0 !important;
}

.cc-detail-hero__intro {
    font-size: 9pt !important;
    margin: 4px 0 0 !important;
}


/* ===== 5. Stat cards ======================================= */

.page-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    break-inside: avoid !important;
}

.stat-card {
    flex: 1 !important;
    min-width: 120px !important;
    border: 1px solid #ddd !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: white !important;
    box-shadow: none !important;
}

.stat-card__label    { font-size: 7pt !important; }
.stat-card__value    { font-size: 16pt !important; }
.stat-card__sublabel { font-size: 7pt !important; }


/* ===== 6. Commodity tile grid ============================== */

.cc-commodity-card {
    padding-top: 0 !important;
}

.cc-commodity-card__meta {
    font-size: 7pt !important;
}

.cc-commodity-card__grid {
    /* Tighter grid in print so all seven tiles fit on the page. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 4px !important;
    margin-top: 8px !important;
}

.cc-commodity-card__tile {
    padding: 6px !important;
    border-color: #999 !important;
    background: white !important;
    box-shadow: none !important;
}

.cc-commodity-card__name {
    font-size: 9pt !important;
}

.cc-commodity-card__value {
    font-size: 7pt !important;
}

/* Hover-swap is irrelevant in print — show the short readout only. */
.cc-commodity-card__value-full { display: none !important; }
.cc-commodity-card__value-short { display: inline !important; }

.cc-commodity-card__bar-label,
.cc-commodity-card__bar-pct {
    font-size: 7pt !important;
}

.cc-commodity-card__bar-fill {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.cc-commodity-card__legend {
    font-size: 7pt !important;
    margin-top: 8px !important;
}


/* ===== 7. Pie-chart section ================================ */

.chart-section {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    clear: both !important;
}

.chart-section__heading {
    font-size: 13pt !important;
    font-weight: bold !important;
    margin: 0 0 6px !important;
}

.chart-container-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.chart-container {
    width: 48% !important;
    margin-bottom: 8px !important;
    vertical-align: top !important;
}

.chart-row {
    display: block !important;
    text-align: center !important;
}

.chart-wrapper {
    position: relative !important;
    width: 130px !important;
    height: 130px !important;
    margin: 15px auto 0 !important;
}

.chart-header {
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 6pt !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    background: transparent !important;
    z-index: 100 !important;
}

canvas,
.chart-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 130px !important;
    height: 130px !important;
    display: block !important;
}

canvas           { z-index: 2 !important; }
.chart-background { z-index: 1 !important; opacity: 1 !important; object-fit: contain !important; }

.chart-legend {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

.chart-legend li {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 8px !important;
    margin-bottom: 1px !important;
    font-size: 6pt !important;
}

.legend-color-box {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 4px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}


/* ===== 8. Page settings ==================================== */

/* Force full-fidelity colours so the brand teals + commodity hues
   render in the PDF. */
* {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

@page {
    size: A4;
    margin: 0cm;
}