:root{
  --blue:#002060;
  --border:#264d9b;
  --panel:#0A2C8B;
  --ink:#1b1f2a;
  --muted:#6c7380;
  --bg:#f5f7fb;
  --softbar:#e9eefb;
  --softtext:#4c5677;
  --lh:1.32;  /* global line-height to match Company block */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial, Helvetica, sans-serif;color:var(--ink);background:var(--bg);line-height:var(--lh)}
/* ensure colors in print */
*, *::before, *::after{-webkit-print-color-adjust: exact; print-color-adjust: exact;}

/* App layout */
.app{
  display:grid;
  grid-template-columns:420px 1fr; /* wider generator */
  gap:16px;
  padding:16px;
  max-width:1400px;
  margin:0 auto
}
.panel{background:white;border:1px solid #d8deea;border-radius:10px;padding:16px;align-self:start}
.panel h1{margin:0 0 8px 0;font-size:18px}
.panel h2{font-size:13px;color:var(--muted);margin:14px 0 8px 0}
.panel label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.panel input, .panel textarea{border:1px solid #cfd6e4;border-radius:8px;padding:8px;font-size:13px;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:grid;gap:6px}
.row.pay{grid-template-columns:1.3fr .6fr .6fr .8fr auto}
.row.ded{grid-template-columns:1.6fr .8fr auto}
.row.kv{grid-template-columns:1.6fr .8fr auto}
.row .del{border:none;background:transparent;color:#a00;font-weight:700;cursor:pointer}
.row-actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.toggle{display:flex;align-items:center;gap:6px;font-size:12px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{border:1px solid #cfd6e4;background:#fff;border-radius:8px;padding:8px 10px;font-size:13px;cursor:pointer}
.btn.warn{color:#a00;border-color:#e4b3b3}
.file-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfd6e4;border-radius:8px;padding:8px 10px;cursor:pointer}

/* Preview canvas: exact A4 portrait area inside 10mm margins */
.preview{display:flex;align-items:flex-start;justify-content:center}
.payslip{
  width:190mm;                 /* 210 - 2*10mm margins */
  min-height:277mm;            /* portrait height */
  background:#fff;
  border-radius:8px;
  border:1.6px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.pagePad{padding:7mm 2mm 2mm 2mm} /* inner border spacing */

/* Header with “pills” */
.header{
  display:grid;
  grid-template-columns: 26mm 1fr 36mm 40mm;
  gap:2mm;
  background:var(--panel);
  color:#fff;
  padding:3mm;
  border-radius:6px;
}
.hcell{display:flex;flex-direction:column;min-width:0}
.hlabel{font-size:9.6pt;opacity:.9;line-height:var(--lh)}
.hvalue{
  font-weight:700;font-size:10.8pt;line-height:var(--lh);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#fff;color:#000;border-radius:6px;border:1.6px solid var(--border);padding:1.8mm 3mm;
}

/* Content grid: 3 columns - allocate more width to last column */
.content{
  display:grid;
  grid-template-columns: 54mm 58mm 66mm; /* company narrower, last column wider */
  grid-auto-rows:auto;
  gap:3mm;
  padding:3mm 0 0 0;
}
.card{
  background:#fff;border:1.6px solid var(--border);border-radius:8px;padding:0;min-height:60mm;display:flex;flex-direction:column;overflow:hidden
}

/* Placement */
.payments-card{grid-column:1 / span 2}
.deductions-card{grid-column:3}
.company{grid-column:1}
.tper-card{grid-column:2}
.ytd-card{grid-column:3}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.table thead th{
  background:var(--panel);color:#fff;text-align:left;padding:1.8mm 2.4mm;font-size:9.8pt;border-top-left-radius:8px;border-top-right-radius:8px;line-height:var(--lh)
}
.table.tpytd thead th{background:var(--softbar);color:var(--softtext)}
.table tbody td{
  border-top:1px solid #d7def0;
  padding:1.6mm 2.2mm;
  font-size:9.8pt;
  line-height:var(--lh);
}
.table.tpytd tbody td{ border-top:none; } /* compact */
.table td.num,.table th.num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.table td:not(.num){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totals td{border-top:2px solid #b9c5e6;font-weight:700}

/* Company block */
.company{padding:0;min-height:42mm}
.company pre{margin:0;padding:2.2mm;font-family:Arial, Helvetica, sans-serif;font-size:9.8pt;line-height:var(--lh)}

/* Footer boxes aligned to columns */
.leftbox{
  grid-column:1 / span 2;
  border:1.6px solid var(--border);
  border-radius:8px;
  min-height:14mm;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
}
.leftbox-value{padding:2mm 3mm;text-align:center;font-size:11pt;color:#333;font-weight:600}
.netpay{
  grid-column:3;
  display:grid;grid-template-columns:30mm 1fr;
  border-radius:8px;overflow:hidden;border:1.6px solid var(--border);
}
.netpay-label{background:var(--panel);color:#fff;padding:2.2mm;font-weight:700;text-align:center;font-size:10.8pt}
.netpay-value{padding:2.2mm;text-align:center;font-size:15pt;font-weight:800}

/* Print */
@media print{
  @page{size:A4 portrait;margin:10mm}
  body{background:#fff}
  .app{display:block;padding:0}
  .panel{display:none}
  .preview{margin:0}
  .payslip{width:190mm;min-height:277mm;border:none}
}