/* ─── Print-only styles ───────────────────────────────────────────────────── */
/* Loaded via <link media="print"> — zero impact on screen rendering */
/* GOAL: Everything fits on ONE A4 page */

@page {
  size: A4;
  margin: 10mm 15mm;
}

@media print {
  /* ── Hide all interactive / screen-only elements ── */
  .toolbar,
  .preset-section,
  .bottom-bar,
  #history-panel,
  .btn-tool,
  .btn-bottom,
  .toast,
  #share-toast,
  #btn-install,
  .no-print,
  .print-footer-fixed {
    display: none !important;
  }

  /* ── Auto-expand employee details for print ── */
  .emp-details,
  .emp-details[open] {
    display: block !important;
  }

  .emp-details-toggle {
    display: none !important;
  }

  /* ── Reset page ── */
  html,
  body {
    background: white !important;
    color: black !important;
    font-size: 10pt;
    line-height: 1.3;
    padding: 0 !important;
    margin: 0 !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* ── Page card ── */
  .main-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .page {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .page-inner {
    page-break-inside: avoid;
    overflow: visible !important;
  }

  /* ── Sections — tight spacing ── */
  .section {
    padding: 6pt 0 !important;
    border-bottom: 0.5pt solid #ddd;
  }

  .section-title {
    font-size: 8pt !important;
    margin-bottom: 4pt !important;
    letter-spacing: 1pt;
  }

  .section-title::before {
    height: 10pt;
    width: 2pt;
  }

  /* ── Header — compact ── */
  .report-header {
    background: var(--green-dark) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 8pt 12pt !important;
  }

  .report-header h1 {
    font-size: 14pt !important;
  }

  .report-header p {
    font-size: 8pt !important;
  }

  .emblem {
    width: 32pt !important;
    height: 32pt !important;
    font-size: 12pt !important;
    margin-right: 8pt !important;
  }

  .header-right {
    font-size: 8pt !important;
  }

  .report-date {
    font-size: 10pt !important;
  }

  /* ── Brand banner — compact for print ── */
  .brand-banner {
    background: #1a5c2a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 4pt 8pt !important;
    border-bottom: 1.5pt solid #c8a415 !important;
    animation: none !important;
  }

  .brand-name {
    font-size: 14pt !important;
    letter-spacing: 2pt !important;
  }

  .brand-credit {
    font-size: 7pt !important;
  }

  /* ── Basic pay hero — flatten for print ── */
  .basic-pay-hero {
    background: none !important;
    border-bottom: 0.5pt solid #ddd !important;
    padding: 4pt 0 !important;
    text-align: left !important;
  }

  .hero-label {
    font-size: 8pt !important;
    margin-bottom: 2pt !important;
  }

  .hero-input-wrap {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: none !important;
    margin: 0 !important;
    display: inline-flex !important;
  }

  .hero-currency {
    font-size: 10pt !important;
    padding: 0 2pt 0 0 !important;
  }

  .hero-input {
    font-size: 10pt !important;
    width: auto !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .hero-hint {
    display: none !important;
  }

  /* ── Make input fields look like plain text ── */
  input,
  select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ── Field layout — compact inline rows ── */
  .field-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2pt 12pt !important;
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .field {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 3pt;
    padding: 2pt 0;
  }

  .field label {
    font-size: 8pt;
    color: #555;
    min-width: 70pt;
    font-weight: 400;
  }

  .field input,
  .field select {
    font-size: 9pt;
    font-weight: 600;
  }

  /* ── Calculation table — compact ── */
  .calc-table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
  }

  .calc-table thead th {
    background: #1a5c2a !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 4pt 6pt;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
  }

  .calc-table tbody td {
    padding: 4pt 6pt;
    border-bottom: 0.5pt solid #ccc;
    font-size: 9pt;
  }

  .calc-table tbody tr.row-highlight {
    background: #e8f5e9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .calc-table tbody tr.row-highlight td {
    font-weight: 700;
    color: #1a5c2a;
  }

  .calc-table tbody tr.row-gold {
    background: #fff8e1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .calc-table tbody tr.row-gold td {
    font-weight: 600;
    color: #7a6400;
  }

  .calc-table tbody tr.row-total {
    background: #1a5c2a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .calc-table tbody tr.row-total td {
    color: white !important;
    font-weight: 700;
    font-size: 10pt;
    border-bottom: none;
  }

  .calc-table tbody td.val {
    background: transparent !important;
  }

  /* ── Summary cards — compact ── */
  .summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6pt;
  }

  .summary-card {
    border: 1pt solid #333;
    padding: 6pt;
    border-radius: 4pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-total {
    background: #e8f5e9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-interim {
    background: #fff8e1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-balance {
    background: #1a5c2a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-label {
    font-size: 7pt;
  }

  .card-value {
    font-size: 12pt;
  }

  /* ── Footer / signatures — compact ── */
  .report-footer {
    margin-top: 8pt;
    padding: 6pt 0 0;
    border-top: 1pt solid #1a5c2a;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8pt;
  }

  .footer-note {
    font-size: 7pt;
    color: #555;
  }

  .sig-line {
    width: 80pt;
    height: 20pt;
    border-bottom: 0.5pt solid black;
    margin-bottom: 2pt;
  }

  .sig-block {
    font-size: 7pt;
  }

  /* ── Watermark ── */
  .watermark {
    opacity: 1;
    color: rgba(0, 0, 0, 0.04) !important;
    font-size: 48pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Disclaimer line at bottom ── */
  .report-footer::after {
    content: "DA Guru — nrb.quantailabs.dev  |  Computer-generated, verify before claiming.";
    display: block;
    position: fixed;
    bottom: 3mm;
    left: 15mm;
    right: 15mm;
    font-size: 7pt;
    color: #999;
    text-align: center;
    border-top: 0.5pt solid #ddd;
    padding-top: 2pt;
  }
}