@use "../../../../styles/abstracts/variables" as *;

/* ==========================================================
   ROOT
========================================================== */

.signals {
  width: 100%;

  &__content {
    padding: 1.5rem;
    border: 1px solid $col-border-lining;
    border-radius: 18px;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,.008)
    );
    overflow: hidden;

    @media (max-width:1000px){
      padding:1rem;
    }
  }
}

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

.signals__stats{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  margin-bottom:2rem;
  padding-bottom:.25rem;

  &::-webkit-scrollbar{
    display:none;
  }

  @media(max-width:1000px){
    gap:.85rem;
  }
}

.statCard{
  flex:0 0 240px;

  display:flex;
  align-items:center;
  gap:1rem;

  padding:1.1rem;

  border-radius:18px;

  background:linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
  );

  border:1px solid rgba(255,255,255,.05);

  transition:.25s ease;

  &:hover{
      border-color:rgba($col-orange,.22);

      box-shadow:
      0 14px 30px rgba(0,0,0,.22);
  }

  h2{
      margin-top:.45rem;

      font-size:1.3rem;

      color:$col-white;

      font-weight:600;
  }

  span{
      display:block;

      font-size:.73rem;

      color:rgba(255,255,255,.6);

      letter-spacing:.03em;
  }

  &__icon{

      width:44px;
      height:44px;

      flex-shrink:0;

      display:flex;
      align-items:center;
      justify-content:center;

      border-radius:16px;

      background:rgba($col-orange,.12);

      border:1px solid rgba($col-orange,.18);

      color:$col-orange;

      font-size:1rem;

      font-weight:600;
  }
}

.buy{
  color:#22c55e;
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.2);
}

.sell{
  color:#ef4444;
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.2);
}

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

.signals__tableWrapper{
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.05);

  border-radius:16px;

  background:#18191d;

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

  &::-webkit-scrollbar-thumb{
      background:rgba(255,255,255,.08);
      border-radius:50px;
  }
}

.signals__table,
.signalRow{

  min-width:1420px;
  width: 100% !important;
  display:grid;

  grid-template-columns:
      150px
      150px
      140px
      120px
      130px
      130px
      120px
      180px
      150px;

  gap:1rem;

  align-items:center;

  padding:1rem 1.5rem;
}

.signals__table{

  position:sticky;

  top:0;

  z-index:5;

  background:#202126;

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

  font-size:.78rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.04em;

  color:rgba(255,255,255,.65);
}

.signals__rows{
  width:100%;
}

.signalRow{

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

  font-size:.83rem;

  transition:.25s ease;

  color:rgba(255,255,255,.92);

  &:nth-child(even){
      background:rgba(255,255,255,.015);
  }

  &:hover{

      background:rgba($col-orange,.045);

      transform:translateX(3px);
  }

  span{

      display:flex;

      align-items:center;

      min-height:34px;
  }
}

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

.actions{
  display:flex;
  align-items:center;
}

.deleteBtn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:.45rem;

  height:38px;

  padding:0 .95rem;

  border:none;

  border-radius:10px;

  background:rgba(239,68,68,.12);

  color:#ef4444;

  font-size:.78rem;

  font-weight:600;

  cursor:pointer;

  transition:.25s ease;

  svg{
      font-size:1rem;
  }

  &:hover{

      background:#ef4444;

      color:#fff;

      transform:translateY(-2px);
  }
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.emptyState{

  min-width:1320px;

  padding:4rem 2rem;

  display:flex;

  justify-content:center;

  align-items:center;
}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin-top: 1.5rem;

  @media (max-width: 768px) {
    justify-content: center;
  }
}

/* ==========================================================
   SKELETON
========================================================== */

.statsSkeleton {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  margin-bottom: 2rem;

  &::-webkit-scrollbar {
    display: none;
  }
}

.statCardSkeleton {
  flex: 0 0 240px;

  height: 92px;

  border-radius: 18px;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .03) 25%,
    rgba(255, 255, 255, .07) 50%,
    rgba(255, 255, 255, .03) 75%
  );

  background-size: 400px 100%;

  animation: shimmer 1.35s linear infinite;
}

/* ========================= */

.tableSkeleton {
  overflow-x: auto;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.05);

  background: #18191d;

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

  &::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.08);
    border-radius: 50px;
  }
}

.tableHeaderSkeleton,
.tableRowSkeleton {
  min-width: 1320px;

  display: grid;

  grid-template-columns:
    150px
    150px
    140px
    120px
    130px
    130px
    120px
    180px
    150px;

  gap: 1rem;

  padding: 1rem 1.5rem;
}

.tableHeaderSkeleton {
  background: #202126;

  border-bottom: 1px solid rgba(255,255,255,.05);
}

.tableRowSkeleton {
  border-bottom: 1px solid rgba(255,255,255,.04);

  &:nth-child(even) {
    background: rgba(255,255,255,.015);
  }
}

.tableHeaderSkeleton span,
.tableRowSkeleton span {
  height: 14px;

  border-radius: 8px;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.03) 75%
  );

  background-size: 400px 100%;

  animation: shimmer 1.35s linear infinite;
}

/* ==========================================================
   SHIMMER
========================================================== */

@keyframes shimmer {

  0% {
    background-position: -450px 0;
  }

  100% {
    background-position: 450px 0;
  }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

  .signals__content {
    padding: 1.2rem;
  }

  .signals__stats {
    gap: .9rem;
  }

  .statCard {
    flex: 0 0 220px;
  }
}

@media (max-width: 1000px) {

  .signals__content {
    padding: 1rem;
  }

  .signals__stats {
    margin-bottom: 1.5rem;
  }

  .statCard {
    flex: 0 0 210px;

    padding: 1rem;

    h2 {
      font-size: 1.25rem;
    }

    span {
      font-size: .72rem;
    }

    &__icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      font-size: 1.1rem;
    }
  }

  .signals__table,
  .signalRow {

    min-width: 1420px;

    padding: .95rem 1rem;
  }

  .tableHeaderSkeleton,
  .tableRowSkeleton {

    min-width: 1320px;

    padding: .95rem 1rem;
  }
}

@media (max-width: 768px) {

  .signals__content {
    padding: .85rem;
  }

  .signals__stats {
    gap: .75rem;
  }

  .statCard {
    flex: 0 0 190px;
  }

  .deleteBtn {

    width: 100%;

    height: 36px;

    padding: 0 .8rem;

    font-size: .75rem;

    svg {
      font-size: .9rem;
    }
  }

  .emptyState {
    padding: 3rem 1rem;
  }
}

/* ==========================================================
   SCROLLBAR
========================================================== */

.signals__tableWrapper::-webkit-scrollbar,
.tableSkeleton::-webkit-scrollbar {
  height: 8px;
}

.signals__tableWrapper::-webkit-scrollbar-track,
.tableSkeleton::-webkit-scrollbar-track {
  background: transparent;
}

.signals__tableWrapper::-webkit-scrollbar-thumb,
.tableSkeleton::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.signals__tableWrapper::-webkit-scrollbar-thumb:hover,
.tableSkeleton::-webkit-scrollbar-thumb:hover {
  background: rgba($col-orange, .35);
}