/* ===================================================================
   print.css — shared print stylesheet for EJEC IT handover bundle
   Include in every handover HTML as:
     <link rel="stylesheet" href="_shared/print.css" media="print">
=================================================================== */

/* --- Fonts (screen + print) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* --- Page setup --- */
@page {
  size: A4;
  margin: 18mm 15mm 20mm 15mm;
}

@page :first {
  margin-top: 22mm;
}

/* --- Base reset for print --- */
@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box;
  }

  html,
  body {
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
      'Yu Gothic', sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: #1d1d1f;
    background: #ffffff;
  }

  /* --- Hide non-printable elements --- */
  nav,
  .sidebar,
  .snav,
  .hdr-nav,
  .no-print,
  .tabs,
  .tbtn,
  .view-toggle,
  .vbtn,
  .fbtn,
  .sbtn,
  button,
  .print-hide {
    display: none !important;
  }

  /* --- Show print-only elements --- */
  .print-only {
    display: block !important;
  }

  /* --- Layout --- */
  .wrap {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Show all side panels (backend + frontend) */
  .side {
    display: block !important;
  }

  /* --- Page breaks --- */
  .sec {
    page-break-before: always;
    break-before: page;
  }

  .sec:first-of-type {
    page-break-before: avoid;
    break-before: avoid;
  }

  table,
  .card,
  .icard,
  .scard {
    page-break-inside: avoid;
    break-inside: avoid;
  }

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

  /* --- Cards: flatten shadows, keep borders --- */
  .card,
  .icard,
  .scard,
  .tlayer {
    box-shadow: none !important;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
  }

  /* --- Tables --- */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }

  th {
    background: #f2f2f7 !important;
    font-weight: 700;
    padding: 6px 10px;
    text-align: left;
    border: 1px solid #d1d1d6;
  }

  td {
    padding: 5px 10px;
    border: 1px solid #e5e5ea;
    vertical-align: top;
  }

  /* --- Code blocks --- */
  code,
  pre,
  .code-block {
    background: #f5f5f5 !important;
    color: #1d1d1f !important;
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 9pt;
    border: 1px solid #d1d1d6;
    border-radius: 4px;
    padding: 2px 5px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow: visible;
  }

  pre {
    padding: 10px 12px;
    margin: 8px 0;
  }

  pre code {
    border: none;
    padding: 0;
  }

  /* --- Anchors --- */
  a {
    color: #1d1d1f;
    text-decoration: none;
  }

  /* Show href after external links */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #636366;
  }

  /* --- SVG diagrams: allow scroll container to expand --- */
  .svg-scroll {
    overflow: visible !important;
  }

  .svg-scroll svg {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  /* --- Detail panels: always show --- */
  .dpanel {
    display: block !important;
  }

  /* --- Tab panels: show all --- */
  .tpanel {
    display: block !important;
    margin-bottom: 8px;
  }

  .tpanel::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 10pt;
    margin-bottom: 4px;
    color: #5b21b6;
  }

  /* --- Note boxes --- */
  .note-box {
    background: #f9f9f9 !important;
    border: 1px solid #d1d1d6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 10pt;
  }

  /* --- Heading styles --- */
  .sec-ttl {
    font-size: 14pt;
    font-weight: 700;
    border-bottom: 2px solid #1d1d1f;
    padding-bottom: 4px;
    margin-bottom: 10px;
    margin-top: 0;
  }

  .sec-ttl .num {
    display: inline-flex;
    background: #1d1d1f;
    color: #ffffff;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    font-size: 10pt;
    margin-right: 6px;
    vertical-align: middle;
  }
}