.rr-summary-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.rr-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}

.rr-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--bs-body-color);
}

.rr-sub {
  color: var(--s-column-header);
  margin-top: 4px;
}

.rr-month-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

  .rr-month-wrap label {
    font-weight: 600;
    color: var(--s-column-header);
  }

  .rr-month-wrap select {
    padding: 8px 12px;
    border: 1px solid var(--s-cell-border);
    border-radius: 10px;
  }

.rr-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 18px;
}

.rr-card {
  background: rgba(var(--bs-primary-rgb), .08);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.rr-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

  .rr-ico.pending {
    background: #E9F0FF;
    color: #3B82F6;
  }

  .rr-ico.overdue {
    background: #FEF3F2;
    color: #DC2626;
  }

  .rr-ico.approved {
    background: #E6F4EA;
    color: #16A34A;
  }

  .rr-ico.rejected {
    background: #FFF4E5;
    color: #F59E0B;
  }

.rr-card .title {
  color: #6B7280;
  font-weight: 600;
}

.rr-card .val {
  font-size: 30px;
  font-weight: 800;
  margin-top: 6px;
}

/* Overdue card escalates to a warning treatment only when there is at least one. */
.rr-card.overdue.has-overdue {
  background: #FEF3F2;
  border-color: #FCA5A5;
}

  .rr-card.overdue.has-overdue .val {
    color: #DC2626;
  }

/* Tablet */
@media (max-width: 1100px) {
  .rr-cards {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

@media (max-width: 640px) {
  .rr-cards {
    grid-template-columns: 1fr;
  }
}