/**
 * Mine Shift Intelligence — Table Styles & Timeline Matrix
 * PT Bina Sarana Sukses
 */

.table-wrap {
  overflow: auto;
  max-height: 620px;
  border: 1px solid #e2e9f1;
  border-radius: 13px;
  background: #ffffff;
  position: relative;
}

.table-wrap.small {
  max-height: 410px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 11px;
  background: #ffffff;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f5f8fb;
  color: #617991;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 11px;
  border-bottom: 1px solid #dfe7ef;
  white-space: nowrap;
  text-align: left;
  font-weight: 850;
}

tbody td {
  padding: 9px 11px;
  border-bottom: 1px solid #edf1f5;
  white-space: nowrap;
  color: #24415e;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: #f8fbfe;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.unitlink {
  font-weight: 850;
  color: #1e67b5;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.unitlink:hover {
  color: #144f90;
  text-decoration: underline;
}

/* 12-Hour Shift Status Timeline Grid */
.timeline {
  display: grid;
  grid-template-columns: repeat(12, 16px);
  gap: 2px;
  align-items: center;
}

.cell {
  height: 16px;
  border-radius: 3px;
  background: #e8edf2;
  transition: transform var(--transition-fast);
}

.cell.clickable:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.cell.W { background: var(--W); }
.cell.S { background: var(--S); }
.cell.D { background: var(--D); }
.cell.BU { background: var(--BU); }
.cell.MS { background: var(--MS); }
.cell.nodata {
  background: repeating-linear-gradient(
    -45deg,
    #2a3040,
    #2a3040 2px,
    #333d50 2px,
    #333d50 4px
  );
  opacity: 0.55;
}

/* Table Pagination / Show More Row */
.table-footer-more {
  padding: 10px;
  text-align: center;
  background: #f9fbfd;
  border-top: 1px solid #edf1f5;
}

.table-footer-more button {
  font-size: 11px;
  padding: 5px 14px;
}