@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {
  :root {
    --gwg-blue: #0032A0 !important;
    --gwg-text: #0f172a !important;
    --gwg-muted: #5f6b7a !important;
    --gwg-line: #d9dee7 !important;
    --gwg-card: #ffffff !important;
    --gwg-bg: #ffffff !important;
    --gwg-shadow: none !important;
    --gwg-radius: 10px !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: var(--gwg-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .no-print,
  .header-actions,
  .btn,
  button,
  .install-btn,
  .info-actions,
  #updateBanner,
  #quickResetBtn,
  #savePdfBtn,
  .timer-panel,
  .timer-card,
  .fusion-timer,
  #countdownPanel,
  #timerPanel,
  #timerWrap,
  #fusionTimerWrap,
  #fusionTimerCard {
    display: none !important;
  }

  .home-header,
  .hero-card,
  .tools-card,
  .info-card,
  .footer-note {
    display: none !important;
  }

  main,
  .app-shell,
  .calc-shell,
  .page,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .app-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 2px solid var(--gwg-blue) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-logo {
    width: 22px !important;
    height: 22px !important;
  }

  .header-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--gwg-blue) !important;
  }

  .card,
  .section,
  .panel,
  .project-card,
  .inputs-card,
  .results-card,
  .breakdown-card,
  .disclaimer-card {
    display: block !important;
    margin: 0 0 6px 0 !important;
    padding: 6px !important;
    background: #ffffff !important;
    border: 1px solid var(--gwg-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .card-title,
  h1.card-title,
  h2.card-title,
  h3.card-title {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: var(--gwg-blue) !important;
  }

  h1 {
    font-size: 14px !important;
    margin: 0 0 6px 0 !important;
  }

  h2 {
    font-size: 12px !important;
    margin: 0 0 5px 0 !important;
  }

  h3,
  h4 {
    font-size: 10px !important;
    margin: 0 0 4px 0 !important;
  }

  p,
  label,
  span,
  div,
  li,
  td,
  th {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  p {
    margin: 0 0 4px 0 !important;
  }

  .grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .input-grid,
  .result-grid,
  .results-grid,
  .tile-grid {
    display: grid !important;
    gap: 6px !important;
  }

  .grid.two,
  .input-grid.two {
    grid-template-columns: 1fr 1fr !important;
  }

  .grid.three {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid.four {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .field {
    margin: 0 !important;
    min-width: 0 !important;
  }

  .field label {
    display: block !important;
    margin: 0 0 2px 0 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    color: var(--gwg-muted) !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    border: 1px solid #c9d2df !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: var(--gwg-text) !important;
    font-size: 9px !important;
    box-sizing: border-box !important;
  }

  textarea {
    min-height: 48px !important;
    resize: none !important;
  }

  .pillbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }

  .pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--gwg-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    font-size: 8px !important;
  }

  .pill.active {
    border-color: var(--gwg-blue) !important;
    color: var(--gwg-blue) !important;
    background: #f4f8ff !important;
  }

  .results-grid,
  .result-grid,
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .result-tile,
  .tile,
  .result-card {
    padding: 6px !important;
    border: 1px solid var(--gwg-line) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .result-label,
  .tile-label,
  .result-card .label {
    margin: 0 0 4px 0 !important;
    font-size: 8px !important;
    color: var(--gwg-muted) !important;
  }

  .result-value,
  .tile-value,
  .result-card .value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--gwg-text) !important;
    line-height: 1.1 !important;
  }

  .mono {
    font-variant-numeric: tabular-nums !important;
  }

  .info-note,
  .note,
  .summary-note {
    margin-top: 6px !important;
    padding: 6px !important;
    border: 1px solid var(--gwg-line) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .info-note strong {
    color: var(--gwg-blue) !important;
  }

  .fittings-list {
    display: grid !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }

  .fittings-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .fitting-name {
    font-size: 9px !important;
    font-weight: 700 !important;
    margin-bottom: 1px !important;
  }

  .fitting-factor {
    font-size: 8px !important;
    color: var(--gwg-muted) !important;
  }

  .table-scroll {
    overflow: visible !important;
  }

  table,
  .results-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    background: #ffffff !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  th,
  td {
    border: 1px solid var(--gwg-line) !important;
    padding: 4px 5px !important;
    text-align: left !important;
    vertical-align: top !important;
    font-size: 8.5px !important;
    word-break: break-word !important;
  }

  th {
    width: 34% !important;
    background: #f7f9fc !important;
    font-weight: 700 !important;
    color: var(--gwg-text) !important;
  }

  .badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    border: 1px solid var(--gwg-line) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    background: #ffffff !important;
    color: var(--gwg-text) !important;
  }

  .badge.ok {
    color: #166534 !important;
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
  }

  .badge.warn {
    color: #92400e !important;
    border-color: #fde68a !important;
    background: #fffbeb !important;
  }

  .badge.danger {
    color: #991b1b !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
  }

  .card + .card,
  .project-card + .inputs-card,
  .inputs-card + .results-card,
  .results-card + .breakdown-card,
  .breakdown-card + .disclaimer-card {
    margin-top: 0 !important;
  }

  .project-card,
  .results-card,
  .breakdown-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .print-optional,
  .helper-text,
  .notes-extended,
  .screen-only {
    display: none !important;
  }

  .breakdown-card table,
  .breakdown-card th,
  .breakdown-card td {
    font-size: 8px !important;
  }

  @supports (display: grid) {
    .results-grid.one-col-print {
      grid-template-columns: 1fr !important;
    }
  }
}