/* Shared A4 layout: screen preview and printed output use the same rules. */
/* report */
.print-report .report { max-width: none; width: 100%; padding: 0; border-radius: 0; }
.print-report .r-head { flex-direction: row !important; text-align: right !important; padding: 8px 12px; }
.print-report .r-head .r-title { text-align: left !important; }
.print-report .rep-logo { height: 52px !important; }
.print-report .r-head h2 { font-size: 18px; }
.print-report .who { grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 8px 0; font-size: 11px; }
.print-report .who div { padding: 5px 8px; }
.print-report table.rt { table-layout: fixed; font-size: 10.5px; border-spacing: 0 3px; }
.print-report table.rt th:first-child, .print-report table.rt td:first-child { width: 30%; min-width: 0; }
.print-report table.rt td { padding: 5px 4px; }
.print-report .chart-box { height: auto !important; margin: 6px auto 0; width: 100%; }
.print-report .pimg { display: block; max-width: 100%; max-height: 58mm; width: auto; height: auto; margin: 0 auto; }
.print-report .sum { gap: 5px; margin-top: 8px; }
.print-report .sum div { padding: 6px 10px; font-size: 11px; }
.print-report .sig { margin-top: 14px; font-size: 10.5px; }
.print-report .sig div { padding-top: 26px; }
/* dashboard */
.print-dash .p-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #02a055; padding-bottom: 6px; margin-bottom: 8px; }
.print-dash .p-head img { height: 46px; }
.print-dash .p-head h2 { font-size: 17px; color: #1f6f45; }
.print-dash .grid { display: grid; grid-template-columns: repeat(12, 1fr) !important; gap: 8px; }
.print-dash .kpis { grid-column: span 12; grid-template-columns: repeat(6, 1fr) !important; gap: 6px; }
.print-dash .kpi { padding: 6px; border: 1px solid #e3eaf2; }
.print-dash .kpi .v { font-size: 20px; }
.print-dash .kpi .lb, .print-dash .kpi .s { font-size: 9px; }
.print-dash .gauges { grid-column: span 12; grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
.print-dash .gauge { padding: 6px; border: 1px solid #e3eaf2; }
.print-dash .gauge .ring { max-width: 90px; }
.print-dash .gauge .ring .pimg { position: absolute; inset: 0; width: 100%; height: 100%; }
.print-dash .gauge .center { font-size: 17px; }
.print-dash .card { border: 1px solid #e3eaf2; }
.print-dash .card > .hd { padding: 5px 9px; font-size: 12px; }
.print-dash .card > .bd { padding: 6px 9px; }
.print-dash .card > .ft { padding: 3px 8px 6px; font-size: 9px; }
.print-dash .c4 { grid-column: span 4 !important; } .print-dash .c6 { grid-column: span 6 !important; }
.print-dash .chart-box { height: auto !important; }
.print-dash .chart-box .pimg { display: block; width: 100%; height: auto; max-height: 52mm; object-fit: contain; }
.print-dash .gender .pimg { width: 100%; height: auto; }
.print-dash .gender > div[style] { height: auto !important; }
.print-dash .gender .face { font-size: 28px; } .print-dash .gender .num { font-size: 18px; }
.print-dash table.heat { font-size: 9.5px; } .print-dash table.heat td { padding: 4px 2px; }
.print-dash .alerts li, .print-dash .rank li { padding: 4px 0; font-size: 10px; }
.print-dash .rank .bar { width: 80px !important; }

#printHost { color: #222; font-size: 11px; background: #fff; }
#printHost *, #printHost *::before { box-shadow: none !important; }
#printHost .card, #printHost .kpi, #printHost .gauge, #printHost tr, #printHost .sum div, #printHost .sig { break-inside: avoid; page-break-inside: avoid; }
#printHost .supervisor { font-size: 9px; padding-top: 8px; letter-spacing: normal; }
#printHost table.heat thead th { font-size: 8px; white-space: nowrap; }
#printHost table.heat.trans thead th:first-child { font-size: 9px; white-space: normal; overflow-wrap: normal; }
#printHost .report-table, #printHost [style*="overflow"], #printHost .table-wrap { overflow: visible !important; max-height: none !important; }
#printHost table { max-width: 100%; table-layout: fixed; }
#printHost thead { display: table-header-group; }
#printHost th, #printHost td { overflow-wrap: anywhere; white-space: normal; position: static; min-width: 0; }
#printHost th { color: #455367; }
#printHost .p-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #02a055; padding-bottom: 6px; margin-bottom: 8px; }
#printHost .p-head img { height: 46px; }
#printHost .p-head h2 { font-size: 17px; color: #1f6f45; }
#printHost .pimg { max-width: 100%; }
#printHost .report .r-head { break-inside: avoid; }
#printHost .report .tag { font-size: 10px !important; padding: 2px 5px; }
#printHost .report .r-head .muted { font-size: 11px; }
#printHost .report .sig { color: #455367; }
#printHost .report-phone { min-height: 0; color: inherit; text-decoration: none; }
#printHost .gender .g-ring { aspect-ratio: auto; height: auto; overflow: visible; }
#printHost .gender .g-ring img { position: static; width: 100%; }
#printHost .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#printHost .scard { break-inside: avoid; border: 1px solid #ddd; padding: 10px; }
#printHost .subj-inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#printHost .print-value { display: inline-block; padding: 4px; font-weight: 700; }
.print-preview-open { overflow: hidden; }
#printPreview { position: fixed; inset: 0; z-index: 150; background: #e7edf3; display: flex; flex-direction: column; }
.print-tools { background: #fff; padding: 12px max(12px, env(safe-area-inset-right)) 8px; box-shadow: 0 1px 6px #0002; z-index: 1; flex: none; }
.print-tools h2 { font-size: 19px; margin-bottom: 8px; }
.print-tools .filters { gap: 6px; }
.print-tools .btn { min-height: 44px; }
.print-tools p { margin: 8px 0 0; }
.print-tools { max-height: 55vh; overflow-y: auto; }
.print-tools [hidden] { display: none !important; }
.pdf-actions { margin-top: 8px; }
.pdf-render-frame { position: fixed; top: 0; left: -10000px; width: 900px; height: 1200px; border: 0; pointer-events: none; }
#printScroll { overflow: auto; flex: 1; min-height: 0; padding: 16px 12px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
#printSheet { position: relative; margin: 0 auto; }
#printPreview #printHost { display: block; position: absolute; top: 0; right: 0; width: 190mm; padding: 0; transform-origin: top right; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body.print-ready > #app, .toast, .modal-bg, .print-tools, .pdf-render-frame { display: none !important; }
  body:not(.print-ready) .sidenav, body:not(.print-ready) .tabbar, body:not(.print-ready) .topbar { display: none !important; }
  body:not(.print-ready) .shell { padding: 0; }
  #printPreview, #printScroll, #printSheet { display: block !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: #fff; }
  #printHost, #printPreview #printHost { display: block !important; position: static !important; transform: none !important; width: 100% !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; }
}

/* Fixed, pre-rendered A4 pages are shared by preview, PDF and native print. */
@font-face { font-family: KGPrint; src: url('../vendor/fonts/Tajawal-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: KGPrint; src: url('../vendor/fonts/Tajawal-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }
#printHost.print-readable { font: 16px/1.7 KGPrint, Arial, sans-serif; }
.readable-print header { border-bottom: 2px solid #249579; margin-bottom: 20px; padding-bottom: 12px; }
.readable-print header img { float: left; width: 90px; height: auto; }
.readable-print h1 { font-size: 24px; }
.readable-print h2 { font-size: 20px; }
.readable-print h3 { font-size: 19px; background: #e8f3ef; padding: 8px; margin: 18px 0 10px; break-after: avoid; }
.readable-print p { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.readable-print table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; }
#printHost .readable-print th, #printHost .readable-print td { border: 1px solid #d5e0e6; padding: 8px; line-height: 1.7; text-align: right; font-size: 15px; white-space: pre-wrap; }
.readable-print th { background: #e9f2f7; }
.readable-print th:first-child { width: 34%; }
.readable-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.readable-signatures { display: flex; justify-content: space-around; margin-top: 50px; }
.print-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.print-preview-open > #app { display: none; }
.print-title-row h2 { margin: 0; }
.print-main-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.print-main-actions .btn { flex: 1 1 auto; text-decoration: none; font-size: 14px; }
#printPages { max-width: 840px; margin: 0 auto; }
#printPages.print-zoom { width: 840px; max-width: none; }
.print-page { margin: 0 0 16px; background: #fff; box-shadow: 0 2px 8px #22334420; }
.print-page img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.print-zoom .print-page img { cursor: zoom-out; }
#printPreview #printHost.print-transcript { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; transform: none !important; }
@media (max-width: 500px) {
  .print-tools { padding-top: max(8px, env(safe-area-inset-top)); }
  .print-title-row h2 { font-size: 18px; }
  #printScroll { padding: 10px 8px calc(16px + env(safe-area-inset-bottom)); }
}
@media print {
  @page { size: A4 portrait; margin: 0; }
  #printPreview #printHost.print-transcript { display: none !important; }
  #printPages, #printPages.print-zoom { display: block !important; max-width: none !important; width: 210mm !important; margin: 0 !important; }
  .print-page { margin: 0 !important; width: 210mm !important; height: 297mm !important; break-after: page; break-inside: avoid; page-break-after: always; overflow: hidden; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page img { width: 210mm !important; height: 297mm !important; }
  @page readable { size: A4 portrait; margin: 10mm; }
  /* Printing from the browser menu uses the same values in readable text tables. */
  #printHost.print-readable { page: readable; padding: 0 !important; }
  /* The browser menu fires synchronously; use an installed font with no loading delay. */
  #printHost.print-report { page: readable; font-family: Arial, sans-serif; }
}