/**
 * Print Stylesheet
 * Optimizes pages for printing by hiding navigation and interactive elements
 * ALSO includes responsive overflow fixes for all screen sizes
 */

/* ========== RESPONSIVE OVERFLOW FIXES ========== */
/* Applied globally to prevent horizontal scrolling */

/* Ensure HTML and body never exceed viewport */
html {
  width: 100%;
  overflow-x: clip;
}


body {
  width: 100%;
  overflow-x: clip;
  max-width: 100vw;
}


/* Constrain all main containers to viewport width */
.import-container,
.container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


/* Ensure tables don't cause overflow */
table {
  max-width: 100%;
}


/* Ensure grid layouts don't overflow */
.grid,
[class*="-grid"],
[class*="row"] {
  max-width: 100%;
}


/* ========== PRINT STYLES ========== */

@media print {
    /* Hide non-printable elements */
    /* Buttons are NOT hidden as a whole (PDF check 2026-10-15): week bars, pattern choices and confirm
       ticks are buttons, and hiding them all removed charts and the Categorize choices from the PDF.
       Only the controls that mean nothing on paper go: the other period chips and the other tabs. */
    .navigation,
.sidebar,
nav,
.btn,
.button,
.tab-navigation,
.modal,
.overlay,
.tooltip,
.di-period-chip:not(.active),
.ap-tab:not(.active),
.tp-tab:not(.active),
.sp-tab:not(.active),
.pl-tab:not(.pl-tab--active),
.dp-tab:not(.active),
.bu-tab:not(.active) {
        display: none !important;
    }

    /* Print colours as on screen: bar charts and fills drawn as backgrounds vanished when every
       background was cleared (day of week, retirement spending by month, rhythm weeks). */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body { background: #fff !important; }

    body {
        margin: 0;
        padding: 20px;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Ensure readable text */
    h1 {
        font-size: 24pt;
        margin-bottom: 10pt;
        page-break-after: avoid;
    }

    h2 {
        font-size: 18pt;
        margin-top: 10pt;
        margin-bottom: 6pt;
        page-break-after: avoid;
    }

    h3 {
        font-size: 14pt;
        margin-top: 8pt;
        margin-bottom: 4pt;
        page-break-after: avoid;
    }

    /* Print charts and tables properly */
    .chart-card,
table {
        page-break-inside: avoid;
        margin-bottom: 20pt;
        border: 1pt solid #ccc !important;
        padding: 10pt;
    }

    /* Tables */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1pt solid #999 !important;
        padding: 4pt 8pt;
        text-align: left;
    }

    th {
        background: #f0f0f0 !important;
        font-weight: bold;
    }

    /* Preserve chart containers */
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    /* Links */
    a {
        text-decoration: underline;
    }

    /* Only links to other websites print their address; in-app links printed "(analyzing.html)"
       after every "View in Analyzing" (PDF check 2026-10-15). */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #666 !important;
    }

    /* Headers and footers */
    /* Landscape (Mic, 2026-10-23, PDF-REVIEW-PRINT): at portrait width (about 7 in) the desktop layouts
       squeezed - header stats overlapped, names crushed to one letter. Landscape gives about 10 in, close
       to the desktop width the pages are built for. "landscape" keeps the reader's own paper size. */
    @page {
        size: landscape;
        margin: 1cm;
    }

    /* Remove flexbox for print */
    .flex {
        display: block !important;
    }

    .chart-card {
        width: 100% !important;
        margin-bottom: 20pt;
    }

    /* Hide interactive states */
    .clickable,
[onclick],
[role="button"] {
        cursor: default !important;
        pointer-events: none !important;
    }

    /* Improve image printing */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Add print date/time footer */
    body::after {
        content: "Printed on: " attr(data-print-date);
        display: block;
        margin-top: 30pt;
        padding-top: 10pt;
        border-top: 1pt solid #ccc;
        font-size: 10pt;
        color: #666 !important;
        text-align: right;
    }
}


/* ========== PDF ACCURACY FIXES (PDF check 2026-10-15) ========== */
/* Found by printing every page x tab x period to PDF: no figures were lost, but the PDF never said which
   period (or tab) it shows, and scrolling boxes printed only their visible part (Analyzing expense list and
   cash-flow table, Balance History table, Spending donut legend, Data Recent Transactions). */
@media print {
  button.di-period-chip.active,
  button.ap-tab.active,
  button.tp-tab.active,
  button.sp-tab.active,
  button.pl-tab--active,
  button.dp-tab.active,
  button.bu-tab.active {
    border: 1pt solid #999 !important;
    border-radius: 4pt;
    padding: 2pt 6pt;
  }
  button.di-period-chip.active::before { content: "Period: "; }

  #ap-expense-list,
  .ap-cashflow-monthly-wrap,
  .bh-table-wrap,
  .bh-table-scroll,
  .bh-mh-scroll,              /* Budgeting > History: Monthly History past 7 months (PRINT-HISTORY-LONG) */
  .bh-ga-scroll,              /* Budgeting > History: Budget Accuracy past 7 rows (PRINT-GA-SCROLL) */
  .dp-tx-preview-panel,
  #cat-donut-legend,
  .cz-card-body,
  .dp-tx-table-wrap {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .dp-tx-table { min-width: 0 !important; table-layout: auto !important; }
  .dp-tx-table td { white-space: normal !important; }
}

/* Navigation now prints once at the top (main-navigation.js print rule), so the space each page reserves
   under the fixed screen header is not needed on paper. Accounts' six type tiles wrap to three per row,
   because at paper width their tags printed on top of the labels. */
@media print {
  [class*="page-wrapper"], body .import-container { padding-top: 0 !important; }
  .tp-type-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Landscape check (2026-10-23, PDF-REVIEW-PRINT): a card that fits on one page is kept whole instead of
   splitting across two (the asset donut on Planning, the category donut on Spending). A card taller
   than a page still breaks, as it must. */
@media print {
  [class*="card"]:not([class*="cards"]):not([class*="card-body"]) { break-inside: avoid; }
  .hero-panels .right-panel { break-inside: avoid; }          /* the donut box has no "card" in its name (qa-css CSS-1) */
  .nw-charts-card, .ap-cashflow-card { break-inside: auto !important; }  /* taller than a page: split where it lands, no half-empty page (CSS-2) */
  /* Data: the Recent Transactions table and the side cards stack; side by side, the table printed over them. */
  .dp-body-grid { grid-template-columns: 1fr !important; }
  /* A table may run onto the next page (its header row repeats); kept whole, it left half a page blank. */
  .dp-tx-table { break-inside: auto !important; page-break-inside: auto !important; }
  /* Analyzing: cash flow and "Spending this year" stack, so the 12-month table has the full width (side by
     side it was cut off after August). */
  .ap-overview-columns { grid-template-columns: 1fr !important; }
  .ap-year-matrix { overflow: visible !important; }
  /* On paper the period line and Budgeting's bottom bars sit in the page flow; pinned (as on screen) they
     printed over Overview's first card and the last Categorize groups. */
  .di-period-bar, .cz-footer, .sbn-bar { position: static !important; }
}