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

.my-signals {
  width: 100%;
  min-width: 0;

  &--content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1.5rem;
  }
}

/* ===================================================
SUBSCRIPTION CARD
=================================================== */

.subscriptionCard {
  position: relative;

  display: grid;

  grid-template-columns: 1.3fr 1fr auto;

  align-items: center;

  gap: 2rem;

  padding: 1.6rem 1.8rem;

  overflow: hidden;

  border-radius: 22px;

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

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

  box-shadow:
    0 24px 55px rgba(0,0,0,.28);

  &::before{
    content:"";

    position:absolute;

    inset:0;

    background:
      radial-gradient(
        circle at top right,
        rgba(247,147,24,.08),
        transparent 42%
      );

    pointer-events:none;
  }

  @media(max-width:900px){

    grid-template-columns:1fr;

    gap:1.5rem;
  }

  &__left{

    display:flex;

    flex-direction:column;

    gap:.6rem;

    span{

      width:fit-content;

      padding:.45rem .9rem;

      border-radius:999px;

      background:rgba(247,147,24,.08);

      border:1px solid rgba(247,147,24,.14);

      color:$col-orange;

      font-size:.7rem;

      font-weight:600;

      letter-spacing:.08em;

      text-transform:uppercase;
    }

    h2{

      color:#fff;

      font-size:1rem;

      font-weight:600;
    }

    p{

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

      font-size:.82rem;

      line-height:1.8;

      strong{

        color:#fff;

        font-weight:600;
      }
    }
  }

  &__middle{

    display:flex;

    flex-direction:column;

    gap:.45rem;

    span{

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

      font-size:.75rem;

      text-transform:uppercase;

      letter-spacing:.08em;
    }

    h3{

      color:$col-orange;

      font-size:1rem;

      font-weight:700;

      line-height:1;
    }
  }

  &__right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:.55rem;

    @media(max-width:900px){

      align-items:flex-start;
    }

    small{

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

      font-size:.72rem;

      text-transform:uppercase;

      letter-spacing:.08em;
    }

    p{

      color:#fff;

      font-size:.82rem;

      font-weight:600;
    }
  }
}

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

.active,
.expired{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:90px;

  height:34px;

  padding:0 1rem;

  border-radius:999px;

  font-size:.72rem;

  font-weight:700;
}

.active{

  color:#22c55e;

  background:rgba(34,197,94,.08);

  border:1px solid rgba(34,197,94,.15);
}

.expired{

  color:#ef4444;

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

  border:1px solid rgba(239,68,68,.15);
}

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

.tableCard{

  border-radius:22px;

  overflow:hidden;

  background:linear-gradient(
    180deg,
    rgba(22,22,24,.98),
    rgba(15,15,18,1)
  );

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

  box-shadow:
    0 24px 55px rgba(0,0,0,.25);
}

.tableWrapper{

  width:100%;

  min-width:0;

  overflow-x:auto;

  overflow-y:hidden;

  &::-webkit-scrollbar{

    height:7px;
  }

  &::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.12);

    border-radius:999px;
  }
}

.tableHeader,
.tableRow{

  min-width:1120px;

  display:grid;

  grid-template-columns:
    150px
    120px
    120px
    110px
    110px
    110px
    110px
    180px;

  column-gap:1.4rem;

  align-items:center;
}

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

.tableHeader {
  position: sticky;
  top: 0;
  z-index: 5;

  padding: 1rem 1.75rem;

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

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

  backdrop-filter: blur(18px);

  span {
    color: rgba(255, 255, 255, 0.58);

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
  }
}

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

.tableBody {
  display: flex;

  flex-direction: column;
}

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

.tableRow {
  padding: 1rem 1.75rem;

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

  transition: all 0.25s ease;

  &:last-child {
    border-bottom: none;
  }

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

  &:hover {
    background: rgba(255, 255, 255, 0.03);

    transform: translateY(-2px);
  }

  span {
    display: flex;

    align-items: center;

    min-height: 40px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 0.82rem;

    font-weight: 500;

    line-height: 1.5;

    white-space: nowrap;
  }

  span:first-child {
    color: #ffffff;

    font-weight: 700;
  }

  span:nth-child(2) {
    color: $col-orange;

    font-weight: 600;
  }

  span:last-child {
    color: rgba(255, 255, 255, 0.55);

    font-size: 0.78rem;
  }
}

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

.emptyState {
  min-width: 1120px;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 3rem 2rem;
}

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

.summarySkeleton {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 2rem;

  padding: 1.7rem;

  border-radius: 22px;

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

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

  @media (max-width: 900px) {
    flex-direction: column;

    align-items: flex-start;
  }

  &__left,
  &__right {
    display: flex;

    flex-direction: column;

    gap: 0.8rem;
  }

  span,
  h3,
  p {
    border-radius: 999px;

    background: linear-gradient(
      90deg,
      #242424 25%,
      #343434 37%,
      #242424 63%
    );

    background-size: 400px 100%;

    animation: shimmer 1.45s linear infinite;
  }

  span {
    width: 110px;

    height: 26px;
  }

  h3 {
    width: 260px;

    height: 22px;
  }

  p {
    width: 170px;

    height: 16px;
  }
}

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

.tableSkeleton {
  min-width: 1120px;

  padding: 1rem 0;

  &__header,
  &__row {
    display: grid;

    grid-template-columns:
      150px
      120px
      120px
      110px
      110px
      110px
      110px
      180px;

    gap: 1.4rem;

    padding: 0 1.75rem;
  }

  &__header {
    margin-bottom: 1rem;
  }

  &__row {
    margin-bottom: 1rem;
  }

  span {
    height: 14px;

    border-radius: 999px;

    background: linear-gradient(
      90deg,
      #242424 25%,
      #343434 37%,
      #242424 63%
    );

    background-size: 400px 100%;

    animation: shimmer 1.45s linear infinite;
  }
}

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

.pagination {
  display: flex;

  justify-content: flex-end;

  margin-top: 1.5rem;

  width: 100%;
}

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

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

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

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

@media (max-width: 1000px) {
  .subscriptionCard {
    padding: 1.35rem;
  }

  .tableHeader,
  .tableRow,
  .tableSkeleton,
  .emptyState {
    min-width: 1080px;
  }

  .pagination {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .subscriptionCard {
    border-radius: 18px;
  }

  .tableCard {
    border-radius: 18px;
  }

  .tableHeader {
    padding: 0.95rem 1.25rem;
  }

  .tableRow {
    padding: 0.95rem 1.25rem;
  }

  .tableSkeleton {
    &__header,
    &__row {
      padding: 0 1.25rem;
    }
  }
}