/* 1: Module: print.css
   2: Path: G:\My Drive\sapsaj.com\public\tools\surveys\print.css
   3: Inputs: Standard CSS3, @media print
   4: Exports: none
   5: Purpose: Balanced, color-preserving 2-page print layout fitting pages comfortably with clean lines */

@media print {
  @page {
    margin: 0.32in 0.38in;
    size: letter portrait;
  }

  *, *:before, *:after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10.5px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .no-print {
    display: none !important;
  }

  nav, button, .lang-toggle, .lang-dropdown-wrapper, #surveyLoadingState, dialog {
    display: none !important;
  }

  /* Omit helper / placeholder text within fields in print */
  input::placeholder,
  textarea::placeholder,
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  input::-moz-placeholder,
  textarea::-moz-placeholder,
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
    font-size: 0 !important;
    visibility: hidden !important;
    line-height: 0 !important;
  }

  .print-omit-helper,
  .field-helper-text {
    display: none !important;
  }

  main, .survey-app {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  /* Card and section containers fill previous page before breaking, keeping sections intact */
  .survey-box,
  .survey-header-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 6px !important;
    padding: 7px 11px !important;
    gap: 4px !important;
  }

  .lang-box {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    gap: 3px !important;
    line-height: 1.25 !important;
  }

  .header-top-row {
    margin-bottom: 4px !important;
  }

  .header-qr-container {
    width: 60px !important;
    height: 60px !important;
    padding: 3px !important;
    box-shadow: none !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 6px !important;
  }

  .header-qr-container img,
  .header-qr-container canvas {
    width: 54px !important;
    height: 54px !important;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
  }

  h2 { font-size: 13.5px !important; }
  h3 { font-size: 12px !important; }
  h4 { font-size: 11px !important; }

  p, span, label, div {
    margin: 0 0 1px 0 !important;
    line-height: 1.25 !important;
  }

  /* Vibrant print colors preserving B&W distinct styles */
  .text-emerald {
    color: #047857 !important;
  }

  .text-cyan {
    color: #0e7490 !important;
  }

  .border-l-solid,
  .border-l-emerald-500 {
    border-left: 3.5px solid #059669 !important;
  }

  .border-l-dashed,
  .border-l-cyan-500 {
    border-left: 3.5px dashed #0891b2 !important;
  }

  .border-l-dotted {
    border-left: 3.5px dotted #d97706 !important;
  }

  .border-l-double {
    border-left: 4.5px double #7c3aed !important;
  }

  .modular-lang-grid {
    gap: 6px !important;
  }

  .option-aligned-row {
    margin-bottom: 4px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .option-row {
    padding: 3px 4px !important;
    gap: 6px !important;
    line-height: 1.25 !important;
  }

  .survey-checkbox {
    width: 12.5px !important;
    height: 12.5px !important;
    margin-top: 1px !important;
    accent-color: #059669 !important;
  }

  /* Full-width pan-language handwriting fields */
  .pan-lang-field-row {
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  .full-width-field,
  .print-fill-line {
    border: none !important;
    border-bottom: 1.5px solid #334155 !important;
    background: transparent !important;
    width: 100% !important;
    flex: 1 !important;
    height: 20px !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
  }

  .full-custom-option {
    padding: 4px 8px !important;
    margin-top: 4px !important;
    background: #f8fafc !important;
    border: 1px dashed #94a3b8 !important;
  }

  .badge-tag {
    font-size: 9.5px !important;
    padding: 1px 4px !important;
    border: 1px solid #10b981 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
  }
}