@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  }

  body {
    background-color: #F8FAFC;
    color: #0F172A;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  /* Custom scrollbar for clean UI */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
  }
}

@media print {
  /* 1. Sembunyikan SEMUA elemen web secara universal */
  body * {
    visibility: hidden !important;
  }

  /* Sembunyikan elemen non-dokumen dari rendering browser */
  aside,
  header,
  nav,
  footer,
  nextjs-portal,
  [data-nextjs-toast],
  [data-nextjs-dialog-overlay],
  #next-route-announcer,
  .no-print,
  .no-print *,
  .print-hidden,
  .print-hidden *,
  .print\:hidden,
  .print\:hidden *,
  [data-print-hidden="true"],
  [data-print-hidden="true"] *,
  button,
  button * {
    display: none !important;
    visibility: hidden !important;
  }

  /* 2. Tampilkan HANYA kontainer area cetak dokumen resmi */
  .printable-document, 
  .printable-document *,
  .printable-area,
  .printable-area *,
  [id^="print-"],
  [id^="print-"] *,
  [id^="printable-"],
  [id^="printable-"] *,
  [id^="skl-"],
  [id^="skl-"] *,
  .rapor-container,
  .rapor-container *,
  .rapor-sheet,
  .rapor-sheet * {
    visibility: visible !important;
  }

  /* 3. Re-posisi kontainer dokumen ke pojok kiri atas lembar cetak */
  .printable-document,
  .printable-area,
  [id^="print-"],
  [id^="printable-"],
  [id^="skl-"],
  .rapor-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* 4. Reset height & overflow agar tidak blank putih / terpotong */
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #000000 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 5. Pengaturan Standar Resmi Kertas BPI: F4 / Folio (215mm x 330mm) */
  /* Default Portrait F4 (Tegak: 215mm x 330mm) */
  @page {
    size: 215mm 330mm;
    margin: 10mm 12mm 10mm 12mm;
  }

  /* Landscape F4 (Mendatar: 330mm x 215mm) */
  @page landscape-f4 {
    size: 330mm 215mm;
    margin: 10mm 12mm 10mm 12mm;
  }

  @page print-landscape {
    size: 330mm 215mm;
    margin: 10mm 12mm 10mm 12mm;
  }

  @page print-portrait {
    size: 215mm 330mm;
    margin: 10mm 12mm 10mm 12mm;
  }

  .print-landscape,
  .print-landscape-page {
    page: landscape-f4 !important;
  }

  .print-portrait,
  .print-portrait-page {
    page: print-portrait !important;
  }

  /* 6. Mencegah potongan baris tabel & tanda tangan yatim di halaman terpisah */
  tr,
  .signature-block,
  .signature-section,
  .ttd-block,
  .ttd-section,
  .card-break,
  .no-break,
  [data-print-no-break="true"],
  [data-signature-block="true"] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Blok tanda tangan & footer kedinasan tidak boleh terpisah sendirian */
  .signature-block,
  .signature-section,
  .ttd-block,
  .ttd-section,
  [data-signature-block="true"] {
    page-break-before: auto !important;
    break-before: auto !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    margin-top: 16px !important;
  }

  /* Kop Surat BPI Full-width & Konsisten */
  .rapor-kop,
  .leger-kop,
  .bpi-kop,
  .kop-surat-bpi,
  [data-kop-bpi="true"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .rapor-kop img,
  .leger-kop img,
  .bpi-kop img,
  .kop-surat-bpi img,
  img[src*="kop-surat-bpi"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .rapor-sheet {
    page-break-after: always !important;
    break-after: page !important;
    page-break-before: auto !important;
    break-before: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .rapor-sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  table {
    page-break-inside: auto !important;
    break-inside: auto !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }

  .printable-document table,
  .printable-area table,
  [id^="print-"] table,
  [id^="printable-"] table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
    font-size: 8pt !important;
  }

  .printable-document table.table-fixed,
  .printable-area table.table-fixed,
  [id^="print-"] table.table-fixed,
  [id^="printable-"] table.table-fixed,
  table.table-fixed {
    table-layout: fixed !important;
  }

  .printable-document th,
  .printable-document td,
  .printable-area th,
  .printable-area td,
  [id^="print-"] th,
  [id^="print-"] td,
  [id^="printable-"] th,
  [id^="printable-"] td {
    padding: 3px 6px !important;
    font-size: 8.5pt !important;
  }

  /* Sembunyikan elemen web non-dokumen dari flow cetak browser */
  aside,
  header,
  nav,
  footer,
  .no-print,
  .no-print *,
  .print-hidden,
  .print-hidden *,
  .print\:hidden,
  .print\:hidden *,
  [data-print-hidden="true"],
  [data-print-hidden="true"] *,
  button,
  button * {
    display: none !important;
    visibility: hidden !important;
  }

  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
    break-inside: avoid !important;
  }

  thead {
    display: table-header-group !important;
  }

  tfoot {
    display: table-footer-group !important;
  }

  .leger-kop {
    width: 100% !important;
    display: block !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 8px !important;
  }

  .leger-kop .kop-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
}

/* Suppress Next.js development error overlay / dev indicators badge */
nextjs-portal,
[data-nextjs-toast],
[data-nextjs-dialog-overlay],
#next-route-announcer {
  display: none !important;
}

/* Safeguard: Ensure no ghost backdrop overlay traps pointer events or obscures the page */
[role="dialog"][aria-hidden="true"],
.modal-backdrop[aria-hidden="true"],
.modal-backdrop:not(.show) {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}