@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";

.payments {
  width: 100%;
}

/* ==========================================
STATS
========================================== */

.statsGrid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 1.5rem;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.statCard {
  padding: .7rem 1.25rem;

  border-radius: 16px;

  background: rgba(
    255,
    255,
    255,
    0.02
  );

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  h4 {
    font-size: 0.8rem;

    color: #8d96a6;

    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: 1.3rem;

    font-weight: 600;

    color: white;
  }
}

/* ==========================================
HEADER
========================================== */

.header {
  display: flex;

  justify-content: flex-end;

  margin-bottom: 1rem;
}

.addBtn {
  height: 42px;

  padding: 0 1.2rem;

  border-radius: 10px;

  border: none;

  cursor: pointer;

  background: variables.$col-orange;

  color: variables.$col-dark;

  font-size: 0.8rem;

  font-weight: 600;

  transition: 0.25s;

  &:hover {
    transform: translateY(-1px);
  }
}

/* ==========================================
TABLE
========================================== */

.tableCard {
  border-radius: 18px;

  overflow: hidden;

  background: linear-gradient(
    180deg,
    rgba(
      22,
      22,
      24,
      0.98
    ) 0%,
    rgba(
      15,
      15,
      18,
      1
    ) 100%
  );

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.tableWrapper {
  overflow-x: auto;

  &::-webkit-scrollbar {
    height: 6px;
  }
}

.tableHeader {
  display: grid;

  grid-template-columns:
    250px
    180px
    150px
    180px
    250px;

  min-width: 1000px;

  padding: 1rem 1.25rem;

  border-bottom: 1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  div {
    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #8d96a6;

    font-weight: 600;
  }
}

.tableRow {
  display: grid;

  grid-template-columns:
    250px
    180px
    150px
    180px
    250px;

  min-width: 1000px;

  padding: 1rem 1.25rem;

  align-items: center;

  border-bottom: 1px solid
    rgba(
      255,
      255,
      255,
      0.04
    );

  transition: 0.25s;

  &:hover {
    background: rgba(
      255,
      255,
      255,
      0.02
    );
  }

  div {
    color: #d7dbe4;

    font-size: 0.82rem;
  }
}

/* ==========================================
STATUS
========================================== */

.statusEnabled,
.statusDisabled {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.45rem 0.8rem;

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 600;
}

.statusEnabled {
  background: rgba(
    46,
    171,
    91,
    0.12
  );

  color: #2eab5b;
}

.statusDisabled {
  background: rgba(
    244,
    67,
    54,
    0.12
  );

  color: #f44336;
}

/* ==========================================
ACTIONS
========================================== */

.actions {
  display: flex;

  gap: 0.5rem;
}

.editBtn,
.deleteBtn {
  height: 34px;

  padding: 0 0.9rem;

  border-radius: 8px;

  border: none;

  cursor: pointer;

  font-size: 0.75rem;

  font-weight: 600;
}

.editBtn {
  background: rgba(
    46,
    171,
    91,
    0.12
  );

  color: #2eab5b;
}

.deleteBtn {
  background: rgba(
    244,
    67,
    54,
    0.12
  );

  color: #f44336;
}

/* ==========================================
MOBILE
========================================== */

@media (max-width: 1000px) {
  .header {
    justify-content: stretch;
  }

  .addBtn {
    width: 100%;
  }
}