/* ================== PAYSLIP BASE ================== */

.payslip {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #000;

  /* keep layout wide like the PDF so horizontal scroll works if needed */
  min-width: 1200px;
}

.payslip table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.payslip .border {
  border: 1px solid #000;
}

.payslip td,
.payslip th {
  padding: 3px 4px;
  vertical-align: middle;
}

.payslip .text-center {
  text-align: center;
}

.payslip .text-left {
  text-align: left;
}

.payslip .bold {
  font-weight: bold;
}

/* ================== HEADER ================== */

.payslip-header .header-company {
  width: 60%;
  font-weight: bold;
}

.payslip-header .header-logo {
  width: 20%;
}

.payslip-header .header-period {
  font-size: 11px;
}

.payslip-header .licence,
.payslip-header .registration {
  text-align: right;
  font-size: 11px;
}

/* ================== EMPLOYEE INFO ================== */

.employee-attendance .section-title {
  background: #f5f5f5;
  font-weight: bold;
}

.label-cell {
  width: 18%;
  font-weight: normal;
}

.value-cell {
  width: 15%;
}

/* ================== EARNINGS / DEDUCTIONS ================== */

.earnings-table th {
  background: #f5f5f5;
  font-weight: bold;
}

/* rows for the blank grid area – no borders, just empty space */
.blank-cell {
  height: 18px;
  border: none !important;
}

/* ================== NOTES ================== */

.attendance-note {
  margin-top: 6px;
  font-size: 10px;
  font-style: italic;
}

/* ================== WRAPPER & SCROLL ================== */

/* host component */
:host {
  display: block;
  height: 100%;
}

/* main wrapper: <div class="FormOverView scrollbar"> */
.FormOverView.scrollbar {
  display: block;
  padding: 8px;
  box-sizing: border-box;

  /* allow scrolling whenever content exceeds viewport
     (e.g. when browser zoom is increased) */
  overflow-y: auto;
  overflow-x: auto;

  /* up to full viewport height; if content taller -> vertical scrollbar */
  max-height: 100vh;
}
