/* Tabel, filter, dan ringkasan invoice. */

.invoice-table {
  overflow-x: auto;
  padding-bottom: 12px
}

.invoice-table table {
  min-width: 1050px
}

.invoice-title {
  padding: 0;
  border: 0;
  min-height: 0;
  text-align: left;
  display: block;
  background: transparent;
  font-size: 13px
}

.invoice-table td:first-child {
  min-width: 180px;
  max-width: 260px;
  white-space: normal
}

.invoice-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted)
}

.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center
}

.invoice-actions button {
  font-size: 11px;
  padding: 7px 10px
}

.invoice-actions details {
  position: relative
}

.invoice-actions summary {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  list-style: none
}

.invoice-more {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 130px
}

.invoice-actions details[open] {
  flex-basis: 100%
}

.invoice-mobile {
  display: none
}

.invoice-filters {
  flex-wrap: wrap
}

.invoice-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
  font-size: 11px
}

.invoice-amounts b {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere
}

.invoice-mobile-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px
}

.invoice-metrics .number {
  font-size: 24px
}

.tag.green {
  background: #e1f3e7;
  color: #23643c
}

@media(max-width:700px) {
  #modal-content:has(.display-layout) {
    padding: 20px 16px
  }

  .invoice-table {
    display: none
  }

  .invoice-mobile {
    display: block
  }

  .invoice-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .invoice-metrics .metric {
    padding: 12px
  }

  .invoice-metrics .number {
    font-size: 20px
  }
}

.compact-project-page {
  padding-top: 18px;
  padding-bottom: 130px