/* ============================================================
   K3 OFFICIAL DOCUMENT TEMPLATES
   - Uses real K3 letterhead as A4 background
   - Replicates the exact K3 invoice form layout (K3.AC.828)
   - Print-ready, A4, no manual adjustment needed
   ============================================================ */

/* === A4 page that uses the real letterhead as background === */
.k3-doc {
  width: 210mm;
  min-height: 297mm;
  background: white;
  margin: 16px auto;
  box-shadow: 0 8px 24px rgba(16,34,43,.10);
  position: relative;
  /* The official letterhead is layered as background image */
  background-image: url('../assets/k3-letterhead.jpeg');
  background-size: 210mm 297mm;
  background-repeat: no-repeat;
  background-position: top left;
  font-family: 'Inter', sans-serif;
  font-size: 9.5pt;
  color: #000;
}

/* The content sits in the safe area between the letterhead's
   header band (ends ~41mm) and footer band (starts ~265mm),
   with margins to clear the curved teal side band on the left
   (extends ~9mm).                                              */
.k3-doc-body {
  position: absolute;
  top: 42mm;
  bottom: 36mm;
  left: 12mm;
  right: 8mm;
  display: flex;
  flex-direction: column;
}

/* Document title (e.g. "INVOICE", "MAINTENANCE SERVICES REPORT")
   - set as a small badge near the top, since the letterhead
     occupies the header itself */
.k3-doc-title {
  text-align: center;
  font-size: 14pt;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 3mm;
  color: #000;
}

/* === Bilingual header strip (company name in EN + AR) === */
.k3-doc-companies {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2mm;
  font-weight: 600;
  font-size: 10pt;
}
.k3-doc-companies .ar { font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; }

/* === Top meta block (STATEMENT / DATE / DEPARTMENT) === */
.k3-doc-meta {
  display: grid;
  grid-template-columns: 32mm 1fr;
  gap: 0;
  margin-bottom: 2mm;
  border: 1px solid #000;
  font-size: 9pt;
}
.k3-doc-meta > .label,
.k3-doc-meta > .value {
  padding: 1mm 2mm;
  border-bottom: 1px solid #000;
}
.k3-doc-meta > .label {
  font-weight: 700;
  background: #f4f4f4;
  border-right: 1px solid #000;
}
.k3-doc-meta > .value { background: white; }
.k3-doc-meta > :nth-last-child(-n+2) { border-bottom: 0; }
html[dir="rtl"] .k3-doc-meta > .label {
  border-right: 0;
  border-left: 1px solid #000;
}

/* === Customer block (multi-row table) === */
.k3-doc-cust {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2mm;
  font-size: 9pt;
}
.k3-doc-cust td {
  border: 1px solid #000;
  padding: 1mm 1.6mm;
  vertical-align: middle;
}
.k3-doc-cust .label {
  font-weight: 700;
  background: #f4f4f4;
  white-space: nowrap;
  width: 32mm;
}
.k3-doc-cust .label-sm {
  font-weight: 700;
  background: #f4f4f4;
  white-space: nowrap;
  width: 18mm;
  text-align: center;
}
.k3-doc-cust .ar-name {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  font-size: 11pt;
  font-weight: 600;
  text-align: center;
  direction: rtl;
}

/* === Section divider bar === */
.k3-doc-section {
  background: #e8e8e8;
  border: 1px solid #000;
  text-align: center;
  font-weight: 700;
  font-size: 10.5pt;
  padding: 1.4mm;
  letter-spacing: 1px;
  margin: 0;
  border-bottom: 0;
}

/* === Details table (TYPE / DESCRIPTION / DUE DATE / etc.) === */
.k3-doc-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.k3-doc-details td {
  border: 1px solid #000;
  padding: 1.2mm 2mm;
}
.k3-doc-details .label {
  font-weight: 700;
  background: #f4f4f4;
  width: 32mm;
}
.k3-doc-details .value-center {
  text-align: center;
}
.k3-doc-details .value-highlight {
  background: #fff7a8; /* yellow highlight as in original */
  text-align: center;
  font-weight: 600;
}
.k3-doc-details .link-ref {
  text-align: center;
  font-weight: 700;
  text-decoration: underline;
}

/* === Payment / signature footer block === */
.k3-doc-payment {
  margin-top: 1.5mm;
  font-size: 7.5pt;
  line-height: 1.25;
}
.k3-doc-payment .pay-title { font-weight: 600; }
.k3-doc-payment .bank-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  margin: 0.5mm 0;
}
.k3-doc-payment .bank-block .right-col { text-align: end; }
.k3-doc-payment strong { font-weight: 700; }

.k3-doc-payment .acc-mgr {
  text-align: center;
  margin: 1mm 0 0.5mm;
}
.k3-doc-payment .acc-mgr-title { font-weight: 700; font-size: 8.5pt; }

/* === Reminder / attached block (bilingual) === */
.k3-doc-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  margin-top: 1.5mm;
  font-size: 7pt;
  line-height: 1.3;
}
.k3-doc-foot-grid > div > div { margin-bottom: 0.6mm; }
.k3-doc-foot-grid .ar {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  direction: rtl;
  text-align: right;
}
.k3-doc-foot-grid .underline { text-decoration: underline; }
.k3-doc-foot-grid ol { margin: 0; padding-inline-start: 14pt; }
.k3-doc-foot-grid li { margin-bottom: 1mm; }

/* === Print rules === */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body { background: white !important; }
  .topbar, .sidebar, .page-header, .page-actions,
  .modal-backdrop, .toast-container,
  .tabs,
  .k3-doc-viewport > .doc-toolbar { display: none !important; }
  /* The document tab includes a header bar with print button — hide it too */
  [data-doc-toolbar] { display: none !important; }
  .app-shell {
    display: block !important;
    height: auto !important;
  }
  .main {
    padding: 0 !important;
    overflow: visible !important;
  }
  .k3-doc {
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    /* Force the browser to print the background image */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .k3-doc-viewport {
    background: white !important;
    padding: 0 !important;
  }
}

/* When viewing on screen — make the doc visually centred and breathable */
.k3-doc-viewport {
  background: #d4dadd;
  padding: 16px 0;
  min-height: 100%;
}

/* ============================================================
   ADDITIONAL DOCUMENT TEMPLATES
   ============================================================ */

/* === Maintenance Services Report (form 1) === */
.k3-mr-title {
  background: #cfd2d4;
  border: 1px solid #000;
  padding: 1.2mm;
  text-align: center;
  font-weight: 700;
  font-size: 10pt;
  margin-bottom: 1.5mm;
}
.k3-mr-title .sub { font-size: 8.5pt; font-weight: 500; font-style: italic; }
.k3-mr-row {
  display: grid;
  border-bottom: 1px solid #000;
  font-size: 8.5pt;
}
.k3-mr-row .cell {
  padding: 0.8mm 1.6mm;
  border-right: 1px solid #000;
  display: flex;
  align-items: center;
}
.k3-mr-row .cell:last-child { border-right: 0; }
.k3-mr-row .cell .l { font-weight: 700; margin-right: 4mm; }
html[dir="rtl"] .k3-mr-row .cell .l { margin-right: 0; margin-left: 4mm; }

.k3-mr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
}
.k3-mr-table th, .k3-mr-table td {
  border: 1px solid #000;
  padding: 1mm 1.4mm;
  vertical-align: middle;
}
.k3-mr-table th {
  background: #e8e8e8;
  font-weight: 700;
  text-align: center;
  font-size: 8pt;
}
.k3-mr-table .label { background:#f4f4f4; font-weight: 700; }
.k3-mr-table .center { text-align: center; }

.k3-section-bar {
  background: #cfd2d4;
  border: 1px solid #000;
  text-align: center;
  font-weight: 700;
  padding: 1mm;
  font-size: 9pt;
}

.k3-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5mm 3mm;
  font-size: 8pt;
  padding: 1.5mm 2mm;
  border: 1px solid #000;
  border-top: 0;
}
.k3-check {
  display: flex; align-items: center; gap: 1.5mm;
}
.k3-check .box {
  width: 3.2mm; height: 3.2mm;
  border: 1px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8pt;
  font-weight: 700;
}
.k3-check.is-on .box::after { content: "✓"; color:#000; }

.k3-rating {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1mm;
  text-align: center;
  font-size: 8pt;
  padding: 1.5mm;
}
.k3-rating .box-circle {
  width: 5mm; height: 5mm;
  border: 1.2px solid #000;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 0.5mm;
}
.k3-rating .is-on .box-circle { background: #000; }

.k3-sig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #000;
  font-size: 8pt;
}
.k3-sig-grid .col {
  border-right: 1px solid #000;
  padding: 1mm 1.5mm;
  text-align: center;
}
.k3-sig-grid .col:last-child { border-right: 0; }
.k3-sig-grid .col .role { font-weight: 700; margin-bottom: 1mm; }
.k3-sig-grid .col .line { height: 8mm; border-bottom: 1px dotted #888; }

/* === Quotation Contract (form 6) === */
.k3-qt-title {
  text-align: center;
  font-weight: 700;
  font-size: 13pt;
  margin: 0 0 4mm;
  text-decoration: underline;
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}
.k3-qt-meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-bottom: 3mm;
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  direction: rtl;
}
.k3-qt-meta td {
  border: 1px solid #000;
  padding: 1.2mm 2mm;
  vertical-align: middle;
}
.k3-qt-meta .label {
  background:#f4f4f4;
  font-weight: 700;
  width: 24mm;
  white-space: nowrap;
}
.k3-qt-units {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
  margin: 2mm 0 3mm;
  text-align: center;
}
.k3-qt-units th, .k3-qt-units td {
  border: 1px solid #000;
  padding: 1mm 1.6mm;
}
.k3-qt-units th { background: #e8e8e8; }
.k3-qt-checks {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  font-size: 9pt;
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  padding: 1mm 0;
}
.k3-qt-checks .row { display: flex; gap: 2mm; align-items: flex-start; }
.k3-qt-checks .tick { color: #000; font-weight: 700; min-width: 4mm; }
.k3-qt-price {
  background: #fff;
  border: 1.5px solid #000;
  padding: 1.5mm 3mm;
  margin: 2mm 0;
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  font-size: 10pt;
  font-weight: 700;
  direction: rtl;
}
.k3-qt-price .num {
  background: #fff7a8;
  padding: 0 8px;
  font-size: 12pt;
}
.k3-qt-installments {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  direction: rtl;
}
.k3-qt-installments td { border: 1px solid #000; padding: 1.2mm 2mm; }
.k3-qt-installments .label { width: 26mm; font-weight: 700; }

/* === Job Card (installation) === */
.k3-jc-title-bar {
  background: var(--brand-dark);
  color: white;
  text-align: center;
  font-weight: 700;
  letter-spacing: 4px;
  font-size: 14pt;
  padding: 1.5mm;
  margin-bottom: 2mm;
}
.k3-jc-meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}
.k3-jc-meta td {
  border: 1px solid #000;
  padding: 1mm 1.5mm;
}
.k3-jc-meta .label { background:#cfd2d4; font-weight: 700; white-space: nowrap; }

.k3-jc-units {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  margin: 1.5mm 0;
}
.k3-jc-units th, .k3-jc-units td {
  border: 1px solid #000;
  padding: 0.6mm 1mm;
  text-align: center;
}
.k3-jc-units th { background: #cfd2d4; font-weight: 700; }
.k3-jc-units .total-row { background: #cfd2d4; font-weight: 700; }

.k3-jc-stages {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.5pt;
  margin-bottom: 1mm;
}
.k3-jc-stages th, .k3-jc-stages td {
  border: 1px solid #000;
  padding: 0.4mm 0.8mm;
  text-align: center;
  vertical-align: middle;
}
.k3-jc-stages th {
  background: var(--brand-light);
  font-weight: 700;
}
.k3-jc-stages .stage-name {
  background: #f4f4f4;
  font-weight: 700;
  text-align: start;
  padding-inline-start: 1.5mm;
}
.k3-jc-stages .pmt-bar {
  background: var(--brand-dark);
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  font-size: 9pt;
}

/* === Store Issue Voucher === */
.k3-sv-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #000;
  font-size: 9pt;
}
.k3-sv-head > div {
  padding: 1.5mm 2mm;
  border-right: 1px solid #000;
}
.k3-sv-head > div:last-child { border-right: 0; }
.k3-sv-head .label { font-weight: 700; }

.k3-sv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.5pt;
  table-layout: fixed;
}
.k3-sv-table th, .k3-sv-table td {
  border: 1px solid #000;
  padding: 0.6mm 1mm;
  vertical-align: middle;
}
.k3-sv-table thead th {
  background: #fff7a8;
  font-weight: 700;
  text-align: center;
  font-size: 8pt;
}
.k3-sv-table .sn   { width: 5%; background:#fff7a8; font-weight: 700; text-align: center; }
.k3-sv-table .desc { width: 14%; }
.k3-sv-table .size { width: 8%; background: #fce4d6; text-align: center; font-weight: 600; }
.k3-sv-table .qty  { width: 6%; text-align: center; }

.k3-sv-sigs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2.5mm;
  font-size: 9pt;
}
.k3-sv-sigs .col {
  text-align: start;
}
.k3-sv-sigs .col .role {
  font-weight: 700;
  text-decoration: underline;
  margin-bottom: 6mm;
}

/* Maintenance Report — extra compact sizing to fit single page */
.k3-doc[data-doc="maint_report"] .k3-doc-body { font-size: 8pt; }
.k3-doc[data-doc="maint_report"] .k3-mr-row .cell { padding: 0.6mm 1.4mm; font-size: 8pt; }
.k3-doc[data-doc="maint_report"] .k3-mr-table th,
.k3-doc[data-doc="maint_report"] .k3-mr-table td { padding: 0.7mm 1.2mm; font-size: 7.5pt; }
.k3-doc[data-doc="maint_report"] .k3-checks { padding: 1mm 1.5mm; gap: 0.3mm 2mm; font-size: 7.5pt; }
.k3-doc[data-doc="maint_report"] .k3-section-bar { padding: 0.6mm; font-size: 8.5pt; }
.k3-doc[data-doc="maint_report"] .k3-rating { padding: 1mm; font-size: 7.5pt; }
.k3-doc[data-doc="maint_report"] .k3-rating .box-circle { width: 4mm; height: 4mm; }
.k3-doc[data-doc="maint_report"] .k3-mr-title { padding: 0.8mm; font-size: 9pt; }
.k3-doc[data-doc="maint_report"] .k3-mr-title .sub { font-size: 7.5pt; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col { padding: 0.6mm 1mm; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col .line { height: 6mm; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col .role { margin-bottom: 0.5mm; }

/* === Job Card — compact to single page === */
.k3-doc[data-doc="jobcard"] .k3-doc-body { font-size: 8pt; }
.k3-doc[data-doc="jobcard"] .k3-jc-title-bar { padding: 1mm; font-size: 12pt; letter-spacing: 3px; margin-bottom: 1mm; }
.k3-doc[data-doc="jobcard"] .k3-jc-meta td { padding: 0.6mm 1.2mm; font-size: 8pt; }
.k3-doc[data-doc="jobcard"] .k3-jc-units th,
.k3-doc[data-doc="jobcard"] .k3-jc-units td { padding: 0.4mm 0.8mm; font-size: 7pt; }
.k3-doc[data-doc="jobcard"] .k3-jc-stages th,
.k3-doc[data-doc="jobcard"] .k3-jc-stages td { padding: 0.3mm 0.6mm; font-size: 6.8pt; }
.k3-doc[data-doc="jobcard"] .k3-jc-stages .pmt-bar { font-size: 8pt; padding: 0.6mm; }

/* === Quotation page 1 — slightly tighter === */
.k3-doc[data-doc="quotation"] .k3-qt-title { font-size: 12pt; margin: 0 0 2mm; }
.k3-doc[data-doc="quotation"] .k3-qt-meta td { padding: 0.8mm 1.5mm; font-size: 9pt; }
.k3-doc[data-doc="quotation"] .k3-qt-units th,
.k3-doc[data-doc="quotation"] .k3-qt-units td { padding: 0.6mm 1.2mm; font-size: 8.5pt; }
.k3-doc[data-doc="quotation"] .k3-qt-checks { font-size: 8.5pt; line-height: 1.5; }
.k3-doc[data-doc="quotation"] .k3-qt-price { padding: 1mm 2.5mm; margin: 1.5mm 0; font-size: 9.5pt; }
.k3-doc[data-doc="quotation"] .k3-qt-price .num { font-size: 11pt; }
.k3-doc[data-doc="quotation"] .k3-qt-installments td { padding: 0.8mm 1.5mm; font-size: 8.5pt; }

/* === Store Voucher — tighter rows to fit the 54 items + sigs === */
.k3-doc[data-doc="storevoucher"] .k3-doc-body { font-size: 7.5pt; }
.k3-doc[data-doc="storevoucher"] .k3-sv-head > div { padding: 1mm 1.5mm; font-size: 8.5pt; }
.k3-doc[data-doc="storevoucher"] .k3-sv-table th { padding: 0.5mm 0.8mm; font-size: 7.5pt; }
.k3-doc[data-doc="storevoucher"] .k3-sv-table td { padding: 0.35mm 0.8mm; font-size: 7pt; line-height: 1.15; }
.k3-doc[data-doc="storevoucher"] .k3-sv-sigs { margin-top: 1.5mm; font-size: 8pt; }
.k3-doc[data-doc="storevoucher"] .k3-sv-sigs .col .role { margin-bottom: 4mm; }

/* Maintenance Report — make signature row tighter so it doesn't collide */
.k3-doc[data-doc="maint_report"] .k3-sig-grid { font-size: 7pt; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col { padding: 0.5mm 0.8mm; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col .role { margin-bottom: 0.4mm; font-size: 7.5pt; }
.k3-doc[data-doc="maint_report"] .k3-sig-grid .col .line { height: 4mm; }

/* Maintenance Report needs to be very dense to fit all sections */
.k3-doc[data-doc="maint_report"] .k3-doc-body {
  top: 42mm;
  bottom: 28mm;
}

/* Maintenance Report — equipment table tighter rows */
.k3-doc[data-doc="maint_report"] .k3-mr-table tbody td { padding: 0.5mm 1.2mm; line-height: 1.1; }
.k3-doc[data-doc="maint_report"] .k3-mr-table thead th { line-height: 1.1; padding: 0.5mm 1mm; }
/* Tighten the fault description table too */
.k3-doc[data-doc="maint_report"] .k3-mr-table tbody td[style*="height"] {
  height: 16mm !important;
}
/* Tighten the Customer Opinion rating row vertical space */
.k3-doc[data-doc="maint_report"] .k3-rating { padding: 0.6mm 1mm; line-height: 1.1; }
.k3-doc[data-doc="maint_report"] .k3-rating .box-circle { width: 3.5mm; height: 3.5mm; margin-bottom: 0.3mm; }