sfp_front_vue_serprati_digital/src/css/table.scss

@use "sass:map";
@use "src/css/quasar.variables.scss";

// ─── Tabela principal ─────────────────────────────────────────────────────────
.softpar-table {
  background: $surface !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;

  // Sem overflow hidden para não cortar bordas arredondadas das linhas
  .q-table__middle {
    overflow: visible;
    background: $surface;
  }

  // Espaçamento vertical entre linhas (necessário para o efeito de "linhas separadas")
  .q-table {
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    background: $surface;
  }

  // ── Cabeçalho ───────────────────────────────────────────────────────────────
  .q-table thead tr th {
    background-color: $surface !important;
    color: $violet-normal;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.1px;
    position: sticky;
    z-index: 1;
    top: 0;
    border-top: 1.5px solid $violet-normal !important;
    border-bottom: 1.5px solid $violet-normal !important;
    border-left: none !important;
    border-right: none !important;
  }

  .q-table thead tr th:first-child {
    border-left: 1.5px solid $violet-normal !important;
    border-radius: 8px 0 0 8px;
  }

  .q-table thead tr th:last-child {
    border-right: 1.5px solid $violet-normal !important;
    border-radius: 0 8px 8px 0;
  }

  // Ajuste de sticky quando a barra de loading aparece
  .q-table.q-table--loading thead tr:last-child th {
    top: 48px;
  }

  // ── Linhas do body ───────────────────────────────────────────────────────────
  .q-table tbody tr td {
    background-color: $surface !important;
    border-top: 1.5px solid $violet-normal !important;
    border-bottom: 1.5px solid $violet-normal !important;
    border-left: none !important;
    border-right: none !important;
  }

  .q-table tbody tr td:first-child {
    border-left: 1.5px solid $violet-normal !important;
    border-radius: 8px 0 0 8px;
  }

  .q-table tbody tr td:last-child {
    border-right: 1.5px solid $violet-normal !important;
    border-radius: 0 8px 8px 0;
  }

  .q-table tbody tr:hover td {
    background-color: $violet-light !important;
  }

  // ── Topo e rodapé (search + paginação) ──────────────────────────────────────
  .q-table__top {
    padding: 16px 0;
    background: $surface;
  }

  .q-table__bottom {
    border-top: none;
    background: $surface;
  }
}

// ─── Cards (modo grid / mobile) ───────────────────────────────────────────────
.q-table__grid-item-card {
  background: $surface;
}

// ─── Status badges (outlined) ─────────────────────────────────────────────────
%badge-base {
  display: flex;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 24px;
  border: 1.5px solid;
  width: fit-content;
  margin: 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  background: transparent;
}

.ativo {
  @extend %badge-base;
  color: #{map.get($colors, "success-light")};
  border-color: #{map.get($colors, "success-light")};
}

.inativo {
  @extend %badge-base;
  color: #{map.get($colors, "error-light")};
  border-color: #{map.get($colors, "error-light")};
}

.rejeitado {
  @extend %badge-base;
  color: #{map.get($colors, "error-light")};
  border-color: #{map.get($colors, "error-light")};
}

.gerado {
  @extend %badge-base;
  color: #{map.get($colors, "info-light")};
  border-color: #{map.get($colors, "info-light")};
}

.pendente {
  @extend %badge-base;
  color: #ca8a04;
  border-color: #ca8a04;
}