/**
 * Print Stylesheet - ACT Therapy Web Application
 * Optimized layouts for printing worksheets and progress reports
 */

@media print {
  /* ===== Reset for Print ===== */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ===== Page Setup ===== */
  @page {
    margin: 1.5cm;
    size: letter;
  }

  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* ===== Hide Non-Printable Elements ===== */
  .sidebar,
  .header,
  .mobile-menu-toggle,
  .nav-category,
  .nav-worksheet-list,
  .header-actions,
  .worksheet-actions,
  button,
  .btn,
  .notification,
  #main-nav,
  #home-btn,
  #export-json,
  #export-text,
  #print-btn,
  #share-email,
  #clear-data,
  #import-data,
  #save-worksheet,
  #complete-worksheet,
  #print-worksheet,
  .progress-container,
  .welcome-card {
    display: none !important;
  }

  /* ===== Layout Adjustments ===== */
  .app-container {
    display: block;
  }

  .main-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }

  .home-section,
  .worksheet-section {
    display: block !important;
  }

  /* ===== Typography for Print ===== */
  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
    page-break-after: avoid;
  }

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

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

  h4, h5, h6 {
    font-size: 12pt;
    margin-bottom: 6pt;
    page-break-after: avoid;
  }

  p {
    margin-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  /* ===== Worksheet Header ===== */
  .worksheet-header {
    border: 2px solid #000;
    padding: 15pt;
    margin-bottom: 15pt;
    page-break-inside: avoid;
  }

  .worksheet-category {
    border: 1px solid #000;
    padding: 4pt 8pt;
    display: inline-block;
    margin-bottom: 8pt;
  }

  .worksheet-description {
    font-size: 11pt;
    margin-bottom: 8pt;
  }

  .worksheet-instructions {
    border-left: 3pt solid #000;
    padding: 10pt;
    margin-top: 10pt;
    background: #f5f5f5 !important;
  }

  /* ===== Worksheet Body ===== */
  .worksheet-body {
    padding: 0;
    margin-bottom: 15pt;
  }

  /* ===== Form Elements ===== */
  .form-group {
    margin-bottom: 15pt;
    page-break-inside: avoid;
  }

  .form-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 6pt;
  }

  .form-instruction {
    border: 1px solid #000;
    padding: 10pt;
    margin-bottom: 15pt;
    font-style: italic;
    background: #f5f5f5 !important;
  }

  /* Input fields - show values */
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="month"],
  input[type="number"],
  textarea,
  select {
    border: none;
    border-bottom: 1px solid #000;
    padding: 4pt 0;
    width: 100%;
    font-size: 11pt;
    background: transparent !important;
  }

  /* Empty inputs - show lines for writing */
  input[type="text"]:empty,
  input[type="email"]:empty,
  input[type="date"]:empty,
  input[type="month"]:empty,
  input[type="number"]:empty,
  textarea:empty {
    border-bottom: 1px dotted #000;
    min-height: 20pt;
  }

  textarea {
    min-height: 60pt;
    border: 1px solid #000;
    padding: 6pt;
  }

  /* Range inputs - show value */
  .range-input {
    display: none;
  }

  .range-value {
    display: inline-block;
    font-weight: bold;
    border: 1px solid #000;
    padding: 2pt 6pt;
    margin-left: 6pt;
  }

  .range-value::before {
    content: "Value: ";
    font-weight: normal;
  }

  /* Checkboxes and Radio Buttons */
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #000;
    width: 12pt;
    height: 12pt;
    margin-right: 6pt;
  }

  input[type="checkbox"]:checked::after {
    content: "✓";
    display: block;
    text-align: center;
    font-weight: bold;
  }

  input[type="radio"]:checked::after {
    content: "●";
    display: block;
    text-align: center;
  }

  /* ===== Specific Form Layouts ===== */
  .value-item,
  .scenario-item {
    border: 1px solid #ddd;
    padding: 8pt;
    margin-bottom: 8pt;
    page-break-inside: avoid;
  }

  .thought-pair {
    border: 1px solid #000;
    padding: 10pt;
    margin-bottom: 10pt;
    page-break-inside: avoid;
    background: #f9f9f9 !important;
  }

  .scenario-text {
    font-weight: bold;
    margin-bottom: 6pt;
  }

  /* ===== ACT Concepts ===== */
  .concepts-grid {
    display: block;
  }

  .concept-card {
    border: 2px solid #000;
    padding: 12pt;
    margin-bottom: 12pt;
    page-break-inside: avoid;
  }

  .concept-card h3 {
    border-bottom: 1px solid #000;
    padding-bottom: 6pt;
    margin-bottom: 8pt;
  }

  .concept-keywords {
    margin-top: 8pt;
  }

  .keyword-tag {
    border: 1px solid #000;
    padding: 2pt 6pt;
    margin-right: 6pt;
    display: inline-block;
    margin-bottom: 4pt;
  }

  /* ===== Page Breaks ===== */
  .worksheet-header,
  .concept-card,
  .form-group,
  .thought-pair,
  .scenario-item {
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  /* ===== Links ===== */
  a {
    text-decoration: underline;
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  /* Don't show URLs for internal links */
  a[href^="#"]::after {
    content: "";
  }

  /* ===== Print Header ===== */
  .worksheet-header::before {
    content: "ACT Therapy Worksheet";
    display: block;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 1pt;
    margin-bottom: 8pt;
    color: #666 !important;
  }

  /* ===== Print Footer ===== */
  .worksheet-body::after {
    content: "Printed: " attr(data-print-date);
    display: block;
    margin-top: 20pt;
    padding-top: 10pt;
    border-top: 1px solid #000;
    font-size: 9pt;
    text-align: right;
    color: #666 !important;
  }

  /* ===== Notes and Instructions ===== */
  .note {
    font-style: italic;
    font-size: 10pt;
    margin-top: 8pt;
    padding: 6pt;
    border-left: 2pt solid #000;
  }

  /* ===== Trigger Checkboxes ===== */
  .trigger-checkboxes {
    display: flex;
    flex-wrap: wrap;
  }

  .trigger-checkboxes label {
    margin-right: 15pt;
    margin-bottom: 6pt;
    display: inline-flex;
    align-items: center;
  }

  /* ===== Progress Report ===== */
  .progress-report {
    page-break-before: always;
  }

  .progress-report h1 {
    border-bottom: 2pt solid #000;
    padding-bottom: 10pt;
    margin-bottom: 15pt;
  }

  .report-date {
    font-size: 10pt;
    color: #666 !important;
    margin-bottom: 15pt;
  }

  .progress-summary,
  .completed-worksheets {
    margin-bottom: 20pt;
    page-break-inside: avoid;
  }

  .progress-summary h2,
  .completed-worksheets h2 {
    border-bottom: 1pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }

  .completed-worksheets ul {
    list-style-position: inside;
  }

  .completed-worksheets li {
    margin-bottom: 6pt;
  }

  /* ===== PDF Content ===== */
  .pdf-content {
    padding: 20pt;
  }

  .pdf-content h1 {
    border-bottom: 2pt solid #000;
    padding-bottom: 10pt;
    margin-bottom: 15pt;
  }

  .pdf-content hr {
    border: none;
    border-top: 1pt solid #000;
    margin: 15pt 0;
  }

  .response-content {
    margin-top: 15pt;
  }

  .response-item {
    margin-bottom: 15pt;
    page-break-inside: avoid;
  }

  .response-item h3 {
    background: #f5f5f5 !important;
    padding: 6pt;
    border-left: 3pt solid #000;
  }

  .response-item pre {
    border: 1px solid #ddd;
    padding: 8pt;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 10pt;
    background: #f9f9f9 !important;
  }

  /* ===== Ensure Clean Printing ===== */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: avoid;
  }

  table td,
  table th {
    border: 1px solid #000;
    padding: 6pt;
  }

  /* ===== Optimize for Black & White Printing ===== */
  .concept-card:nth-child(1),
  .concept-card:nth-child(2),
  .concept-card:nth-child(3),
  .concept-card:nth-child(4) {
    border-top: 3pt solid #000;
  }
}