/* =================================================================
 * www/styles/print.css
 *
 * Phase 1 PDF support: "View as PDF" via browser print (or
 * www/render-pdf.mjs which drives Playwright's page.pdf()).
 *
 * Load on any page that should be printable:
 *   <link rel="stylesheet" media="print" href="styles/print.css">
 *
 * Strategy:
 *   - Hide app chrome (site header, sidebars, toolbars, state panel,
 *     action buttons, add/remove controls on repeaters).
 *   - Flatten editable widgets (inputs / selects / textareas) to plain
 *     text — defensive, since print Views should already have every
 *     block in mode=readPretty.
 *   - Use @page for letter geometry + page counter footer.
 *   - Prevent bad breaks inside hasMany items, section headings, and
 *     decoration headings.
 *
 * Hooks used:
 *   - Semantic selectors (header.site-header, aside.cases, …) for the
 *     current case-editor / intake pages.
 *   - data-fit-* attributes on widget custom elements (fit-text-input,
 *     fit-date-input, fit-bool-checkbox, fit-choose-one, fit-choose-many,
 *     fit-combo-box, fit-decoration). See www/components/*.js.
 * ================================================================= */

@page {
  size: letter;
  margin: 0.75in;
  @bottom-right { content: counter(page) " of " counter(pages); }
}

@media print {
  /* Backgrounds and colors — let the browser print what the author set */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: #fff; color: #000; }

  /* ---------- hide app chrome ---------- */
  header.site-header,
  nav,
  aside.cases,
  aside.state-panel,
  .editor-toolbar,
  .form-actions,
  button,
  [data-fit-action],
  .new-case,
  .diff-panel,
  .timeline-panel { display: none !important; }

  /* Main layout becomes single-column full-width */
  main { display: block !important; grid-template-columns: none !important; }
  section.editor { padding: 0 !important; overflow: visible !important; }
  .form-area { padding: 0 !important; border: 0 !important; background: #fff !important; }

  /* ---------- flatten editable widgets (defensive) ---------- */
  /* Even in editable mode, strip borders/backgrounds so a stray
     editable field still looks sensible on paper. */
  input, select, textarea {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
            appearance: none;
    color: #000 !important;
  }
  textarea { resize: none; }

  /* ---------- widget-level hooks ---------- */
  /* Hide repeater add/remove buttons and drag handles */
  [data-fit-add], [data-fit-remove], [data-fit-drag], .repeater-controls { display: none !important; }

  /* Decorations */
  [data-fit-widget="decoration"][data-fit-variant="heading"] { break-after: avoid; }
  [data-fit-widget="decoration"][data-fit-variant="paragraph"] { orphans: 2; widows: 2; }

  /* ---------- break control for nested + hasMany ---------- */
  /* Keep each item of a hasMany list together on a page */
  [data-fit-item],
  .list-item,
  .repeater-item { break-inside: avoid; }

  /* Don't orphan a section title at the bottom of a page */
  section h2, section h3,
  .section-title,
  [data-fit-widget="decoration"][data-fit-variant="heading"] { break-after: avoid; }

  /* Keep a labelled field together with its value */
  .preview-label { break-after: avoid; }
  label { break-after: avoid; }

  /* ---------- hyperlinks ---------- */
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}