.shift-summary-card,
.salary-summary-card {
  display: grid;
  gap: 8px;
}

.shift-summary-card h3,
.salary-summary-card h3 {
  margin: 0;
  font-size: 17px;
}

.shift-summary-card p,
.salary-summary-card p,
.earnings-total-card p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  color: #b5cdf0;
  font-size: 14px;
}

.shift-summary-card strong,
.salary-summary-card strong,
.earnings-total-card strong {
  color: #f4fbff;
  font-size: 15px;
}

.salary-summary-note {
  margin-top: 2px;
  justify-content: flex-start;
  color: #93aed7;
  font-size: 12px;
}

.report-actions {
  display: grid;
  gap: 8px;
}

.report-earnings-btn {
  background: linear-gradient(180deg, #3f628f, #2f4f7b);
}

.earnings-head-card h2 {
  margin: 0;
  font-size: 22px;
}

.earnings-head-card p {
  margin: 6px 0 0;
  color: #a9c3eb;
  font-size: 13px;
}

.earnings-month-switch {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.earnings-month-btn {
  border: 1px solid rgba(125, 171, 236, 0.42);
  border-radius: 10px;
  min-height: 34px;
  background: linear-gradient(180deg, rgba(33, 61, 101, 0.9), rgba(24, 47, 84, 0.92));
  color: #c7dcfb;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

.earnings-month-btn.is-active {
  border-color: rgba(248, 210, 143, 0.62);
  background: linear-gradient(180deg, rgba(130, 86, 30, 0.88), rgba(101, 66, 23, 0.9));
  color: #ffeec9;
}

.earnings-month-title {
  margin-top: 8px;
  color: #dbe9ff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}

.earnings-main {
  min-height: 0;
  overflow: hidden;
  gap: 10px;
}

.earnings-reset-note {
  margin: 0;
  border: 1px solid rgba(236, 188, 96, 0.54);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(120, 82, 31, 0.48), rgba(94, 62, 20, 0.5));
  color: #ffe7b9;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 7px 9px;
}

.earnings-table-wrap {
  border: 1px solid rgba(118, 165, 226, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 38, 75, 0.86), rgba(13, 31, 63, 0.9));
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.earnings-table-head,
.earnings-list li {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
}

.earnings-table-head {
  border-bottom: 1px solid rgba(118, 165, 226, 0.25);
  color: #a9c4ea;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.earnings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.earnings-scroll-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.earnings-list li {
  border-bottom: 1px solid rgba(118, 165, 226, 0.18);
  color: #c9ddfb;
  font-size: 12px;
}

.earnings-list li:last-child {
  border-bottom: none;
}

.earnings-list strong {
  color: #f5d8a0;
}

.earnings-date {
  color: #e7f0ff;
}

.earnings-empty {
  display: block;
  padding: 10px;
  color: #9ab6df;
  font-size: 13px;
}

.earnings-total-card {
  display: grid;
  gap: 6px;
}

.earnings-grand {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(118, 165, 226, 0.24);
}