/* ========================================
   Hanzi Practice Generator - Print Styles
   ========================================

   This stylesheet ensures perfect print output
   by overriding Bootstrap defaults and setting
   precise page dimensions for US Letter paper.
   ======================================== */

@media print {
  /* ----------------------------------------
     Page Setup
     ---------------------------------------- */
  @page {
    size: 8.5in 11in;
    margin: 0;
  }

  /* ----------------------------------------
     Reset & Base Overrides
     ---------------------------------------- */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    height: auto !important;
    overflow: visible !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Nuclear option: hide everything, then show only what we need */
  body > *:not(#page) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Ensure nothing after #page takes space */
  #page ~ * {
    display: none !important;
    height: 0 !important;
  }

  /* Prevent page breaks at document level */
  #page,
  body {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Hide any content after #root */
  #root ~ * {
    display: none !important;
    height: 0 !important;
  }

  /* ----------------------------------------
     Bootstrap Utility Overrides
     ----------------------------------------
     Bootstrap uses !important on utilities, so we need
     higher specificity to override them for print.
     ---------------------------------------- */

  /* Override display utilities */
  .preview-area.d-none,
  .preview-area.d-none.d-lg-flex {
    display: block !important;
  }

  .app-container .d-none {
    display: block !important;
  }

  /* But keep no-print elements hidden */
  .app-container .no-print,
  .app-container .no-print.d-none {
    display: none !important;
  }

  /* Override background utilities - Bootstrap bg-* uses !important */
  .bg-light,
  .bg-secondary,
  .bg-primary,
  .bg-dark,
  .preview-area.bg-secondary,
  .preview-area.bg-secondary.bg-opacity-25,
  .app-container.bg-light,
  [class*="bg-"] {
    background: white !important;
    background-color: white !important;
    --bs-bg-opacity: 0 !important;
  }

  /* Reset any opacity utilities */
  [class*="bg-opacity-"] {
    --bs-bg-opacity: 0 !important;
  }

  /* ----------------------------------------
     Hide Non-Print Elements
     ---------------------------------------- */
  .no-print,
  .sidebar-panel,
  .preview-label,
  /* WordPress admin bar */
  #wpadminbar,
  html.wp-toolbar,
  /* WordPress theme header/footer */
  #masthead,
  .site-header,
  .cfu-footer,
  footer,
  #cfu-announcement,
  .skip-link,
  /* Mobile tab navigation */
  .mobile-tab-nav {
    display: none !important;
    visibility: hidden !important;
  }

  /* Reset admin bar margin on html */
  html {
    margin-top: 0 !important;
  }

  /* ----------------------------------------
     WordPress Container Reset
     ---------------------------------------- */
  #page,
  #page.site,
  .site,
  .site-main,
  main,
  #primary {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* ----------------------------------------
     App Container Reset
     ---------------------------------------- */
  .app-container {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* ----------------------------------------
     Preview Area Reset
     ---------------------------------------- */
  .preview-area {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* Reset position-relative wrapper inside preview area */
  .preview-area > .position-relative {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ----------------------------------------
     Worksheet Pages Container
     ---------------------------------------- */
  .worksheet-pages-container {
    display: block !important;
    gap: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important; /* Reset mobile scaling for print */
    transform-origin: top left !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
    /* Prevent page break after container */
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Override ALL mobile responsive margins that scale the container */
  @media (max-width: 480px) {
    .worksheet-pages-container {
      transform: none !important;
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      width: auto !important;
    }
  }
  @media (min-width: 481px) and (max-width: 640px) {
    .worksheet-pages-container {
      transform: none !important;
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      width: auto !important;
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    .worksheet-pages-container {
      transform: none !important;
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      width: auto !important;
    }
  }
  @media (min-width: 769px) and (max-width: 991.98px) {
    .worksheet-pages-container {
      transform: none !important;
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      width: auto !important;
    }
  }

  /* Override mobile preview-area padding */
  @media (max-width: 991.98px) {
    .preview-area {
      padding: 0 !important;
      padding-bottom: 0 !important;
    }
    .app-container {
      padding-bottom: 0 !important;
    }
  }

  /* Ensure last worksheet page doesn't trigger extra page */
  .worksheet-pages-container > .print-page-break:last-child {
    break-after: avoid !important;
    page-break-after: avoid !important;
    margin-bottom: 0 !important;
  }

  /* Hide any potential pseudo-elements that could cause space */
  .worksheet-pages-container::after,
  .preview-area::after,
  .app-container::after,
  #page::after,
  body::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
  }

  /* ----------------------------------------
     Individual Worksheet Page
     ---------------------------------------- */
  .worksheet-page {
    width: 8.5in !important;
    height: 11in !important;
    min-height: 11in !important;
    max-height: 11in !important;
    margin: 0 !important;
    padding: 1cm !important;
    box-sizing: border-box !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Page breaks between worksheet pages (not after the last one) */
  /* Use break-before on non-first pages instead of break-after */
  .print-page-break {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Add page break BEFORE each page except the first */
  .print-page-break:not(:first-child) {
    break-before: page !important;
    page-break-before: always !important;
  }

  /* Ensure first page has no break before it */
  .print-page-break:first-child {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* ----------------------------------------
     Worksheet Header/Title
     ---------------------------------------- */
  .worksheet-page > div:first-child {
    margin-bottom: 0.5rem !important;
  }

  .worksheet-page h1 {
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
  }

  /* ----------------------------------------
     Character Block
     ---------------------------------------- */
  .character-block {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 1rem !important;
  }

  /* ----------------------------------------
     SVG Elements - Ensure Visibility
     ---------------------------------------- */
  svg {
    overflow: visible !important;
  }

  .svg-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .content-overlay {
    position: absolute !important;
    inset: 0 !important;
  }

  /* ----------------------------------------
     Typography for Print
     ---------------------------------------- */
  .font-sans {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif !important;
  }

  .pinyin-text {
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  .radical-display {
    font-size: 36px !important;
    color: #000 !important;
  }

  .radical-label {
    font-size: 8px !important;
    font-weight: 400 !important;
    color: #000 !important;
  }

  /* ----------------------------------------
     Colors - Ensure Ink Prints
     ---------------------------------------- */
  .text-dark,
  .text-body {
    color: #000 !important;
  }

  .text-muted {
    color: #6c757d !important;
  }

  .text-primary {
    color: #0d6efd !important;
  }

  .bg-white {
    background-color: #fff !important;
  }

  /* ----------------------------------------
     Stroke Order Container
     ---------------------------------------- */
  .stroke-order-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  /* ----------------------------------------
     Flex Layout Preservation
     ---------------------------------------- */
  .d-flex {
    display: flex !important;
  }

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

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

  .flex-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-shrink-0 {
    flex-shrink: 0 !important;
  }

  .align-items-center {
    align-items: center !important;
  }

  .justify-content-center {
    justify-content: center !important;
  }

  /* ----------------------------------------
     Spacing Preservation
     ---------------------------------------- */
  .gap-4 {
    gap: 1.5rem !important;
  }

  .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-5 {
    margin-bottom: 3rem !important;
  }

  .p-2 {
    padding: 0.5rem !important;
  }

  .pt-4 {
    padding-top: 1.5rem !important;
  }

  /* ----------------------------------------
     Position Utilities
     ---------------------------------------- */
  .position-relative {
    position: relative !important;
  }

  .position-absolute {
    position: absolute !important;
  }

  .inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  /* ----------------------------------------
     Width/Height Utilities
     ---------------------------------------- */
  .w-100 {
    width: 100% !important;
  }

  .h-100 {
    height: 100% !important;
  }
}