/* Print Stylesheet — optimized for white paper output without annotations.
 *
 * Two-pronged approach:
 *   1. @media print — standard print styles
 *   2. .plannotator-print — class added via JS beforeprint/afterprint events
 *      to guarantee overrides that @media print alone cannot achieve
 *      (e.g. beating Tailwind layers, and the syntax theme's per-token inline
 *      colours — inline styles only lose to an !important author rule).
 */

/* ============================================================
 * CLASS-BASED OVERRIDES — applied via beforeprint/afterprint JS
 * These use .plannotator-print on <html> for maximum specificity.
 * ============================================================ */

/* Code blocks: flatten the syntax theme's dark block background to paper */
.plannotator-print pre,
.plannotator-print pre[class] {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  color: #1a1a1a !important;
  border: 1px solid #ccc !important;
  border-left: 3px solid #888 !important;
}

.plannotator-print pre code,
.plannotator-print code.pn-code,
.plannotator-print pre code.pn-code,
.plannotator-print .code-snippet-preview {
  background: transparent !important;
  background-color: transparent !important;
  color: #1a1a1a !important;
}

/* The syntax theme colours every token with an inline `style`, so these
   !important rules are what flattens code to black on paper. */
.plannotator-print pre span,
.plannotator-print pre code span,
.plannotator-print .code-snippet-preview span {
  color: #1a1a1a !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
  font-style: normal !important;
}

/* Inline code */
.plannotator-print code {
  background: #e8e8e8 !important;
  background-color: #e8e8e8 !important;
  color: #1a1a1a !important;
  border: 1px solid #ccc !important;
}

/* Inline code inside pre should be transparent (not gray pill) */
.plannotator-print pre code {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* ============================================================
 * @media print — layout, visibility, typography
 * ============================================================ */

@media print {
  /* ========== Reset & Page ========== */

  * {
    transition: none !important;
    animation: none !important;
  }

  @page {
    size: A4;
    margin: 0.75in;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: white !important;
    color: #1a1a1a !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    font-size: 11pt;
    overflow: visible !important;
    height: auto !important;
  }

  /* ========== Hide UI Chrome ========== */

  header {
    display: none !important;
  }

  aside {
    display: none !important;
  }

  .annotation-toolbar {
    display: none !important;
  }

  .fixed {
    display: none !important;
  }

  [data-resize-handle] {
    display: none !important;
  }

  [data-print-hide] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar-tab-flag {
    display: none !important;
  }

  pre .absolute,
  .group > button.absolute {
    display: none !important;
  }

  button[title="Settings"],
  button[title="Toggle theme"],
  button[title="Add global comment"],
  button[title="Copy plan"],
  button[title="Copy file"] {
    display: none !important;
  }

  /* ========== Main Content Area ========== */

  [data-print-region="root"] {
    height: auto !important;
    overflow: visible !important;
  }

  [data-print-region="content"] {
    overflow: visible !important;
  }

  main, [data-print-region="document"] {
    width: 100% !important;
    overflow: visible !important;
    background: white !important;
    background-image: none !important;
    padding: 0 !important;
  }

  main > div {
    padding: 0 !important;
    margin: 0 !important;
  }


  article, [data-print-region="article"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Collapse first heading top margin for tight print layout */
  article h1:first-of-type,
  [data-print-region="article"] h1:first-of-type {
    margin-top: 0 !important;
  }

  /* ========== Typography ========== */

  /*
   * `:not([data-diagram-block] *)` keeps every typography rule off DIAGRAM
   * content. Mermaid 12 draws node and edge labels as real HTML inside
   * `<foreignObject>` (`span.nodeLabel > p`, `span.edgeLabel`), so a blanket
   * `div, span, p { color: #1a1a1a !important }` repainted them — over a dark
   * node fill that prints as an empty box. A diagram colours itself (and
   * prints in the light half of the palette, see ThemeProvider), and its own
   * `<style>` has no `!important` to defend itself with, so the exemption has
   * to live here.
   */
  body,
  div:not([data-diagram-block] *),
  span:not([data-diagram-block] *),
  p:not([data-diagram-block] *),
  li:not([data-diagram-block] *),
  td:not([data-diagram-block] *),
  th:not([data-diagram-block] *),
  label:not([data-diagram-block] *),
  strong:not([data-diagram-block] *),
  em:not([data-diagram-block] *),
  b:not([data-diagram-block] *),
  i:not([data-diagram-block] *) {
    color: #1a1a1a !important;
  }

  strong:not([data-diagram-block] *),
  b:not([data-diagram-block] *) {
    font-weight: bold !important;
    color: #000 !important;
  }

  em:not([data-diagram-block] *),
  i:not([data-diagram-block] *) {
    font-style: italic !important;
    color: #1a1a1a !important;
  }

  h1 {
    font-size: 24pt;
    font-weight: bold;
    margin: 1.5em 0 0.5em 0;
    page-break-after: avoid;
    color: #000 !important;
  }

  h2 {
    font-size: 18pt;
    font-weight: bold;
    margin: 1.25em 0 0.4em 0;
    page-break-after: avoid;
    color: #000 !important;
  }

  h3 {
    font-size: 14pt;
    font-weight: bold;
    margin: 1em 0 0.3em 0;
    page-break-after: avoid;
    color: #000 !important;
  }

  h4 {
    font-size: 12pt;
    font-weight: bold;
    margin: 0.8em 0 0.25em 0;
    page-break-after: avoid;
    color: #000 !important;
  }

  h5, h6 {
    font-size: 11pt;
    font-weight: bold;
    margin: 0.6em 0 0.2em 0;
    page-break-after: avoid;
    color: #000 !important;
  }

  p:not([data-diagram-block] *) {
    margin: 0.5em 0;
    color: #1a1a1a !important;
  }

  /* ========== Lists ========== */

  ul, ol {
    margin: 0.5em 0;
    padding-left: 2em;
  }

  li {
    margin: 0.25em 0;
    color: #1a1a1a !important;
  }

  li p {
    margin: 0.25em 0;
  }

  /* ========== Code & Preformatted ========== */

  code,
  code[class] {
    font-family: 'Courier New', Monaco, Consolas, monospace !important;
    font-size: 10pt !important;
    background: #e8e8e8 !important;
    background-color: #e8e8e8 !important;
    color: #1a1a1a !important;
    padding: 0.1em 0.4em !important;
    border-radius: 3px !important;
    border: 1px solid #ccc !important;
  }

  .group {
    page-break-inside: avoid;
  }

  pre,
  pre[class] {
    margin: 1em 0 !important;
    padding: 1em !important;
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-left: 3px solid #888 !important;
    border-radius: 4px !important;
    page-break-inside: avoid;
    overflow: visible !important;
    color: #1a1a1a !important;
  }

  pre code,
  pre code[class],
  pre code.pn-code,
  code.pn-code {
    font-size: 9pt !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  .code-snippet-preview {
    background: transparent !important;
    background-color: transparent !important;
    color: #1a1a1a !important;
  }

  pre span, pre code span, code span,
  .code-snippet-preview span {
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-style: normal !important;
  }

  /* ========== Tables ========== */

  table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
    page-break-inside: avoid;
  }

  thead {
    background: #e8e8e8 !important;
    page-break-after: avoid;
  }

  th {
    font-weight: bold;
    text-align: left;
    padding: 0.5em;
    border: 1px solid #999;
    color: #000 !important;
    background: #e8e8e8 !important;
  }

  td {
    padding: 0.5em;
    border: 1px solid #ccc;
    color: #1a1a1a !important;
  }

  tbody tr:nth-child(even) {
    background: #f9f9f9 !important;
  }

  tbody tr:nth-child(odd) {
    background: white !important;
  }

  /* ========== Blockquotes ========== */

  blockquote {
    margin: 1em 0;
    padding: 0.5em 0 0.5em 1em;
    border-left: 4px solid #999 !important;
    background: #f7f7f7 !important;
    color: #333 !important;
  }

  blockquote p {
    margin: 0.5em 0;
  }

  /* ========== Horizontal Rules ========== */

  hr {
    margin: 1.5em 0;
    border: none;
    border-top: 1px solid #999;
    page-break-after: avoid;
  }

  /* ========== Links ========== */

  a {
    color: #0066cc !important;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
    word-break: break-all;
  }

  a[href^="#"]::after {
    content: "";
  }

  /* ========== Images ========== */

  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
    margin: 1em 0;
  }

  /* ========== Diagrams (Mermaid, Graphviz) ========== */

  svg {
    max-width: 100%;
    height: auto !important;
    page-break-inside: avoid;
  }

  /* ========== Page Break Hints ========== */

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

  pre, blockquote, table, figure {
    page-break-inside: avoid;
  }

  /* ========== Print colour control ========== */

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}