/* =============================================================================
   PRINT / PDF STYLES — Ohio School Insight
   =============================================================================
   Produces a professional 2-page 8.5×11" letter PDF.

   Page 1 (p1-page):
     — District name + meta bar
     — Two columns: Insight Index left | State Report Card + outcomes right
     — Stats strip: teacher salary · student/teacher ratio · experience · per-pupil

   Page 2 (p2-page):
     — Three columns: Spending breakdown | Revenue sources | Community context
     — Footer: data sources

   All web chrome is hidden. Dark-theme colors are overridden.
   Print-only blocks (class="print-only") are revealed and laid out for paper.

   Screen rule: .print-only elements are invisible on screen.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Screen: hide all print-only elements
   ----------------------------------------------------------------------------- */

@media screen {
  .print-only {
    display: none !important;
  }
}


/* =============================================================================
   @media print
   ============================================================================= */

@media print {

  /* ---------------------------------------------------------------------------
     Page geometry — 8.5×11" letter, 0.5in top/bottom, 0.6in left/right
     Printable area: 7.3" wide × 10" tall
     --------------------------------------------------------------------------- */

  @page {
    size: letter portrait;
    margin: 0.5in 0.6in;
  }


  /* ---------------------------------------------------------------------------
     Global color + background reset
     Override the dark Material You theme. Print on white paper.
     --------------------------------------------------------------------------- */

  *,
  *::before,
  *::after {
    color: #111 !important;
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Freeze all animations + ensure everything is visible */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }


  /* ---------------------------------------------------------------------------
     Hide all web chrome — nav, buttons, interactive widgets, charts
     --------------------------------------------------------------------------- */

  nav,
  #main-nav,
  #mobile-nav,
  footer,
  #export-report-btn,
  .district-toc-nav,
  nav[aria-label="Page sections"],
  .flex.items-center.justify-between.mb-8,
  button,
  .chart-tooltip,
  .tooltip,
  .chart-loading,
  .animate-pulse,
  [class*="skeleton"],
  .sparkline,
  #chart-scatter,
  #chart-trend,
  #chart-treemap,
  #chart-donut,
  #chart-bars,
  .dot-glow,
  .dot-highlight,
  [class*="glow"],
  .no-print {
    display: none !important;
  }

  /* Hide all web-layout content inside each section;
     only .print-only blocks (p1-page, p2-page) are shown. */
  #overview > *:not(.print-only),
  #performance > *:not(.print-only),
  #finances > *:not(.print-only),
  #demographics > *:not(.print-only) {
    display: none !important;
  }

  .star-chart,
  .star-rating {
    display: none !important;
  }


  /* ---------------------------------------------------------------------------
     Show print-only elements
     --------------------------------------------------------------------------- */

  .print-only {
    display: block !important;
  }


  /* ---------------------------------------------------------------------------
     Document body + layout reset
     --------------------------------------------------------------------------- */

  html,
  body {
    font-family: 'Public Sans', 'Arial', Helvetica, sans-serif;
    font-size: 8.5pt;
    line-height: 1.4;
    background: white !important;
    color: #111 !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  #app,
  main#app,
  [id="app"],
  main,
  .px-6,
  [class*="px-"],
  [class*="py-"],
  [class*="mx-"],
  [class*="my-"] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .max-w-6xl,
  .max-w-7xl {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  section {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  a {
    color: #111 !important;
    text-decoration: none !important;
  }


  /* ===========================================================================
     PRINT HEADER — appears once at the top of page 1
     =========================================================================== */

  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 5pt;
    border-bottom: 1.5pt solid #111 !important;
    margin-bottom: 0;
  }

  .print-brand {
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #111 !important;
  }

  .print-subtitle {
    font-size: 6.5pt;
    color: #666 !important;
    margin-top: 1.5pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .print-date {
    font-size: 7pt;
    color: #777 !important;
    text-align: right;
  }


  /* ===========================================================================
     PAGE 1 — p1-page
     Two-column layout inside 7.3" × 10" printable area.
     =========================================================================== */

  .p1-page {
    display: block;
  }

  /* ---- District identity block ---- */

  .p1-identity {
    padding: 9pt 0 7pt 0;
    border-bottom: 0.5pt solid #bbb !important;
    margin-bottom: 9pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .p1-name {
    font-size: 17pt;
    font-weight: 700;
    color: #111 !important;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  .p1-meta {
    font-size: 6.5pt;
    color: #555 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 2.5pt;
  }

  /* ---- Two-column body ---- */

  .p1-body {
    display: grid !important;
    /* Left: ~39%, gap: 2%, Right: ~59% */
    grid-template-columns: 39% 59%;
    gap: 0 2%;
    margin-bottom: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ---- Column shared styles ---- */

  .p1-col-head {
    font-size: 6.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #222 !important;
    border-bottom: 0.75pt solid #333 !important;
    padding-bottom: 3pt;
    margin-bottom: 6pt;
  }

  .p1-col-head-sub {
    font-weight: 400;
    color: #777 !important;
    text-transform: none;
    letter-spacing: 0;
  }

  .p1-section-rule {
    font-size: 5.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666 !important;
    border-bottom: 0.4pt solid #ddd !important;
    padding-bottom: 2pt;
    margin: 8pt 0 4pt 0;
  }

  /* ---- Left column: Insight Index ---- */

  .p1-col-left {
    padding-right: 0;
  }

  .p1-score-block {
    display: flex !important;
    align-items: baseline;
    gap: 6pt;
    margin: 5pt 0 4pt 0;
  }

  .p1-score-num {
    font-size: 42pt;
    font-weight: 700;
    color: #111 !important;
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .p1-score-annot {
    display: flex !important;
    flex-direction: column;
    gap: 2pt;
    padding-bottom: 5pt;
  }

  .p1-score-denom {
    font-size: 9.5pt;
    color: #777 !important;
    font-weight: 400;
  }

  .p1-score-pctile {
    font-size: 7pt;
    color: #333 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .p1-score-stars {
    font-size: 9pt;
    color: #333 !important;
    letter-spacing: 0.8pt;
  }

  /* Index components table */

  .p1-comp-table {
    width: 100%;
    border-collapse: collapse;
  }

  .p1-comp-table td {
    font-size: 7.5pt;
    color: #111 !important;
    padding: 2pt 0;
    vertical-align: middle;
  }

  .p1-comp-lbl {
    width: 44%;
    color: #333 !important;
  }

  .p1-comp-val {
    width: 10%;
    text-align: right;
    font-weight: 700;
    padding-right: 1pt;
  }

  .p1-comp-max {
    width: 8%;
    color: #999 !important;
    font-size: 6.5pt;
    padding-right: 4pt;
  }

  .p1-comp-bar {
    width: 38%;
  }

  .p1-comp-total-row td {
    border-top: 0.5pt solid #999 !important;
    padding-top: 3pt;
    margin-top: 1pt;
    font-weight: 700;
    font-size: 8pt;
  }

  /* Progress bars */

  .p1-bar-track {
    background: #e2e2e2 !important;
    height: 5pt;
    border-radius: 2pt;
    overflow: hidden;
    width: 100%;
  }

  .p1-bar-fill {
    height: 100%;
    background: #2c6e64 !important;
    border-radius: 2pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .p1-bar-total {
    background: #1a2a3a !important;
  }

  /* ---- Right column: Report card ---- */

  .p1-col-right {
    border-left: 0.4pt solid #ddd !important;
    padding-left: 12pt;
  }

  .p1-rc-table {
    width: 100%;
    border-collapse: collapse;
  }

  .p1-rc-table td {
    font-size: 7.5pt;
    color: #111 !important;
    padding: 2.5pt 0;
    vertical-align: middle;
  }

  .p1-rc-lbl {
    width: 34%;
    color: #333 !important;
  }

  .p1-rc-dots {
    width: 44%;
    font-size: 8.5pt;
    letter-spacing: 1pt;
    color: #111 !important;
  }

  .p1-rc-val {
    width: 22%;
    font-size: 7pt;
    color: #666 !important;
    text-align: right;
  }

  .p1-no-data {
    color: #aaa !important;
    font-size: 7pt;
    font-style: italic;
  }

  .p1-rc-overall-row td {
    border-top: 0.5pt solid #aaa !important;
    padding-top: 3.5pt;
    font-size: 8pt;
  }

  /* Key outcomes table */

  .p1-out-table {
    width: 100%;
    border-collapse: collapse;
  }

  .p1-out-table td {
    font-size: 7.5pt;
    color: #111 !important;
    padding: 2pt 0;
    vertical-align: middle;
  }

  .p1-out-lbl {
    width: 62%;
    color: #333 !important;
  }

  .p1-out-val {
    width: 38%;
    font-weight: 700;
    color: #111 !important;
    text-align: right;
  }

  /* Value color classes */

  .p1-positive { color: #1a5c52 !important; }
  .p1-negative { color: #8b1c1c !important; }

  /* ---- Stats strip (bottom of page 1) ---- */

  .p1-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6pt 10pt;
    border-top: 0.75pt solid #333 !important;
    padding-top: 8pt;
    margin-top: 10pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .p1-stat-lbl {
    font-size: 5.5pt;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: #666 !important;
    margin-bottom: 2.5pt;
  }

  .p1-stat-val {
    font-size: 11.5pt;
    font-weight: 700;
    color: #111 !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .p1-stat-sub {
    font-size: 6.5pt;
    color: #777 !important;
    margin-top: 1.5pt;
  }


  /* ===========================================================================
     PAGE 2 — p2-page
     Three-column layout. Starts on a new page.
     =========================================================================== */

  .p2-page {
    display: block;
  }

  /* ---- Page 2 header strip ---- */

  .p2-top-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 4pt;
    border-bottom: 1pt solid #111 !important;
    margin-bottom: 10pt;
  }

  .p2-top-brand {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #444 !important;
  }

  .p2-top-name {
    font-size: 8pt;
    color: #333 !important;
    font-style: italic;
  }

  /* ---- Three-column body ---- */

  .p2-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 16pt;
  }

  .p2-col {
    border-left: 0.4pt solid #ddd !important;
    padding-left: 12pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .p2-col:first-child {
    border-left: none !important;
    padding-left: 0;
  }

  .p2-col-head {
    font-size: 6.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #222 !important;
    border-bottom: 0.75pt solid #333 !important;
    padding-bottom: 3pt;
    margin-bottom: 6pt;
  }

  .p2-col-head-sub {
    font-weight: 400;
    color: #888 !important;
    text-transform: none;
    letter-spacing: 0;
  }

  .p2-section-rule {
    font-size: 5.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #666 !important;
    border-bottom: 0.4pt solid #ddd !important;
    padding-bottom: 2pt;
    margin-bottom: 4pt;
  }

  /* ---- Data tables (used in all three columns) ---- */

  .p2-table {
    width: 100%;
    border-collapse: collapse;
  }

  .p2-table td {
    font-size: 7.5pt;
    color: #111 !important;
    padding: 2.5pt 0;
    vertical-align: middle;
  }

  .p2-tbl-lbl {
    width: 40%;
    color: #333 !important;
  }

  .p2-tbl-val {
    width: 14%;
    text-align: right;
    font-weight: 700;
    padding-right: 4pt;
    white-space: nowrap;
  }

  .p2-tbl-bar {
    width: 46%;
  }

  .p2-no-data {
    font-size: 7pt;
    color: #aaa !important;
    font-style: italic;
  }

  /* ---- Progress bars ---- */

  .p2-bar-track {
    background: #e2e2e2 !important;
    height: 5pt;
    border-radius: 2pt;
    overflow: hidden;
    width: 100%;
  }

  /* Spending: teal */
  .p2-bar-spend {
    height: 100%;
    background: #2c6e64 !important;
    border-radius: 2pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Revenue: blue */
  .p2-bar-rev {
    height: 100%;
    background: #3a5a8a !important;
    border-radius: 2pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Community: warm gray */
  .p2-bar-comm {
    height: 100%;
    background: #7a7a7a !important;
    border-radius: 2pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---- Per-pupil note (col 1 bottom) ---- */

  .p2-per-pupil {
    font-size: 7.5pt;
    color: #333 !important;
    margin-top: 6pt;
    padding-top: 4pt;
    border-top: 0.4pt solid #ddd !important;
  }

  /* ---- Spending comparison rows (col 2) ---- */

  .p2-cmp-row {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    font-size: 7.5pt;
    margin-bottom: 2.5pt;
  }

  .p2-cmp-lbl {
    color: #555 !important;
  }

  .p2-cmp-val {
    font-weight: 700;
  }

  /* ---- Peer group (col 3) ---- */

  .p2-peer-lbl {
    font-size: 8pt;
    color: #111 !important;
    margin-bottom: 1pt;
  }

  .p2-peer-code {
    font-size: 6.5pt;
    color: #888 !important;
  }

  /* ---- Growth index (col 3) ---- */

  .p2-growth-val {
    font-size: 15pt;
    font-weight: 700;
    color: #111 !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  /* Value color classes */

  .p2-positive { color: #1a5c52 !important; }
  .p2-negative { color: #8b1c1c !important; }

  /* ---- Footer ---- */

  .p2-footer {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    font-size: 6.5pt;
    color: #777 !important;
    border-top: 0.5pt solid #ccc !important;
    padding-top: 5pt;
    margin-top: 14pt;
  }

} /* end @media print */