/* =====================================================
   PAYROLL VIEW
===================================================== */

.payroll-view {
  height: 100%;
}

.payroll-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
}

/* =====================================================
   TOOLBAR
===================================================== */

.payroll-toolbar {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.payroll-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.payroll-info-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.payroll-info-item .label {
  font-weight: 600;
  color: #666;
}

/* =====================================================
   TABLE WRAPPER
===================================================== */

.payroll-table-wrapper {

  flex: 1;

  overflow-x: auto;
  overflow-y: auto;

  position: relative;

  border-top: 1px solid #ddd;
}

/* =====================================================
   TABLE
===================================================== */

.payroll-table {

  border-collapse: collapse;

  min-width: max-content;

  width: max-content;

  background: #fff;
}

/* =====================================================
   HEADER
===================================================== */

.payroll-table thead th {

  position: sticky;

  top: 0;

  z-index: 20;

  background: #f5f5f5;

  border: 1px solid #ddd;

  padding: 8px 10px;

  white-space: nowrap;

  text-align: center;

  font-size: 13px;

  font-weight: 600;
}

/* =====================================================
   BODY
===================================================== */

.payroll-table tbody td {

  border: 1px solid #ddd;

  padding: 6px 10px;

  white-space: nowrap;

  font-size: 13px;

  background: #fff;
}

.payroll-table tbody tr:hover td {
  background: #f8fbff;
}

/* =====================================================
   ALIGN
===================================================== */

.payroll-table td.text-left {
  text-align: left;
}

.payroll-table td.text-center {
  text-align: center;
}

.payroll-table td.text-right {
  text-align: right;
}

/* =====================================================
   STICKY COLUMNS
===================================================== */

/* MA_NV */

.payroll-table .sticky-col-1 {

  position: sticky;

  left: 0;

  z-index: 15;

  background: #fff;

  min-width: 120px;
}

/* HO_TEN */

.payroll-table .sticky-col-2 {

  position: sticky;

  left: 120px;

  z-index: 15;

  background: #fff;

  min-width: 220px;
}

/* HEADER */

.payroll-table thead .sticky-col-1,
.payroll-table thead .sticky-col-2 {

  background: #ececec;

  z-index: 30;
}

/* =====================================================
   NUMBER COLUMNS
===================================================== */

.payroll-table .money {

  text-align: right;

  min-width: 120px;
}

/* =====================================================
   EMPTY STATE
===================================================== */

.payroll-empty {

  padding: 40px;

  text-align: center;

  color: #666;
}

/* =====================================================
   LOADING
===================================================== */

.payroll-loading {

  padding: 40px;

  text-align: center;

  color: #666;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

  .payroll-card {
    height: calc(100vh - 80px);
  }

  .payroll-toolbar {
    padding: 10px;
  }

  .payroll-info {
    flex-direction: column;
    gap: 8px;
  }

  .payroll-table thead th,
  .payroll-table tbody td {

    padding: 6px 8px;

    font-size: 12px;
  }

}


/* =====================================================
   FOOTER TOTAL
===================================================== */

.payroll-table tfoot td {

  position: sticky;

  bottom: 0;

  z-index: 25;

  background: #fff6d6;

  border: 1px solid #ddd;

  padding: 8px 10px;

  white-space: nowrap;

  font-weight: 700;
}

.payroll-table tfoot .sticky-col-1,
.payroll-table tfoot .sticky-col-2 {

  background: #fff1b8;

  z-index: 35;
}