/* v15: owner-only direct leave review, optimized for quick scanning on desktop and mobile. */
#leave-score-panel,
#leave-owner-approval-panel {
  display: none !important;
}

.approval-list {
  border-color: #cfddd4 !important;
  box-shadow: none !important;
}

.approval-head,
.approval-row {
  grid-template-columns: minmax(165px, 1fr) minmax(210px, 1.35fr) minmax(175px, 1.05fr) minmax(130px, .75fr) minmax(190px, 1fr) !important;
  gap: 18px !important;
}

.approval-row {
  padding-block: 18px !important;
}

.approval-type-details > strong,
.approval-type-details > small,
.approval-row .when > span,
.approval-row .when > small {
  display: block;
}

.approval-type-details > small {
  margin-top: 5px;
  color: #385747 !important;
  line-height: 1.6 !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.approval-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  width: 100%;
}

.approval-actions > button {
  min-height: 44px !important;
  width: 100%;
  padding: 9px 12px !important;
  white-space: normal;
  font-weight: 700;
}

.approval-actions > .approve {
  grid-column: 1 / -1;
  min-height: 48px !important;
  font-size: 15px;
}

.approval-row > .pending {
  color: #185c39 !important;
  background: #eef7f0 !important;
  border: 1px solid #b8d0c0;
  line-height: 1.45;
}

.approval-tabs button.active {
  background: #eef7f0 !important;
  color: #185c39 !important;
  border-color: #9ebda8 !important;
}

.approval-tabs button.active b {
  background: #287a4e !important;
}

@media (max-width: 1050px) {
  .approval-head {
    display: none !important;
  }

  .approval-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }

  .approval-row > .approval-type-details,
  .approval-row > .when,
  .approval-row > :is(.pending, .approved, .rejected),
  .approval-row > .approval-actions {
    grid-column: 1 / -1;
  }

  .approval-row > :is(.pending, .approved, .rejected) {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .workspace > .content {
    padding-inline: 14px !important;
  }

  .title-row {
    margin-bottom: 18px !important;
  }

  .title-row .staff-count {
    display: block !important;
    width: 100%;
  }

  .approval-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .approval-row {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px 16px !important;
  }

  .approval-row > * {
    grid-column: 1 !important;
    min-width: 0;
  }

  .approval-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-actions > .approve {
    grid-column: 1 / -1;
  }

  .approval-actions > button {
    min-height: 48px !important;
  }
}