/* ==========================================================
   DANCEHIRES TEAM MANAGEMENT V1
========================================================== */

#dh-team-page {
  padding:
    34px
    38px
    80px;
}

.dh-team-shell {
  max-width: 1480px;
  margin: 0 auto;
}

.dh-team-hero {
  position: relative;

  display: flex;
  min-height: 168px;

  align-items: flex-end;
  justify-content: space-between;

  overflow: hidden;

  padding:
    34px
    34px
    30px;

  border:
    1px solid #e5dff0;

  border-radius: 25px;

  background:
    linear-gradient(
      110deg,
      #fff 0%,
      #fff 45%,
      color-mix(
        in srgb,
        var(
          --competition-primary,
          #7027ff
        ) 13%,
        white
      ) 100%
    );

  box-shadow:
    0 18px 50px
    rgba(42,25,70,.06);
}

.dh-team-hero::after {
  content: "";

  position: absolute;

  width: 440px;
  height: 76px;

  right: -50px;
  top: 35px;

  transform:
    rotate(-15deg);

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #251636,
      var(
        --competition-primary,
        #7027ff
      ),
      var(
        --competition-secondary,
        #d528ff
      )
    );

  opacity: .94;
}

.dh-team-hero-copy {
  position: relative;
  z-index: 2;
}

.dh-team-eyebrow {
  display: block;

  margin-bottom: 10px;

  color:
    var(
      --competition-primary,
      #7027ff
    );

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.dh-team-hero h1 {
  margin: 0;

  color: #151120;

  font-size: 42px;
  line-height: 1;

  font-weight: 900;
}

.dh-team-hero p {
  margin:
    10px
    0
    0;

  color: #777080;

  font-size: 14px;
}

.dh-team-add {
  position: relative;
  z-index: 3;

  min-height: 46px;

  padding:
    0
    19px;

  border: 0;
  border-radius: 14px;

  background: #111018;
  color: #fff;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 12px 26px
    rgba(0,0,0,.16);
}

.dh-team-stats {
  display: grid;

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

  gap: 14px;

  margin-top: 17px;
}

.dh-team-stat {
  padding:
    21px
    22px;

  border:
    1px solid #e7e2ee;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 10px 30px
    rgba(44,28,65,.04);
}

.dh-team-stat span {
  display: block;

  margin-bottom: 8px;

  color: #8d8696;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.dh-team-stat strong {
  color: #17131f;

  font-size: 27px;
  font-weight: 900;
}

.dh-team-panel {
  margin-top: 18px;

  overflow: hidden;

  border:
    1px solid #e5e0eb;

  border-radius: 22px;

  background: #fff;

  box-shadow:
    0 15px 45px
    rgba(48,32,70,.05);
}

.dh-team-panel-head {
  display: flex;

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

  gap: 18px;

  padding:
    22px
    24px;

  border-bottom:
    1px solid #eeeaf3;
}

.dh-team-panel-head strong {
  display: block;

  color: #17131f;

  font-size: 17px;
  font-weight: 900;
}

.dh-team-panel-head span {
  display: block;

  margin-top: 4px;

  color: #8b8493;

  font-size: 12px;
}

.dh-team-search {
  width: min(320px,100%);
  height: 42px;

  box-sizing: border-box;

  padding:
    0
    14px;

  border:
    1px solid #ded8e7;

  border-radius: 12px;

  outline: none;

  color: #17131f;

  font: inherit;
  font-size: 13px;
}

.dh-team-table-wrap {
  overflow-x: auto;
}

.dh-team-table {
  width: 100%;

  border-collapse: collapse;
}

.dh-team-table th {
  padding:
    14px
    18px;

  color: #8c8497;

  background: #fbfafd;

  border-bottom:
    1px solid #ebe7ef;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .12em;

  text-align: left;

  text-transform: uppercase;
}

.dh-team-table td {
  padding:
    17px
    18px;

  border-bottom:
    1px solid #f0edf3;

  color: #26202e;

  font-size: 12px;

  vertical-align: middle;
}

.dh-team-table tr:last-child td {
  border-bottom: 0;
}

.dh-team-person {
  display: flex;

  align-items: center;

  gap: 12px;
}

.dh-team-avatar {
  display: grid;

  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(
        --competition-primary,
        #7027ff
      ),
      var(
        --competition-secondary,
        #d528ff
      )
    );

  color: #fff;

  font-size: 11px;
  font-weight: 900;
}

.dh-team-person strong {
  display: block;

  color: #17131f;

  font-size: 13px;
  font-weight: 900;
}

.dh-team-person span {
  display: block;

  margin-top: 3px;

  color: #91899b;

  font-size: 10px;
}

.dh-team-role {
  display: inline-flex;

  padding:
    6px
    9px;

  border-radius: 999px;

  background: #f1edf6;

  color: #594f65;

  font-size: 9px;
  font-weight: 900;

  text-transform: uppercase;
}

.dh-team-role.owner {
  background: #fff7d9;
  color: #8a6515;
}

.dh-team-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    6px
    9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;

  text-transform: uppercase;
}

.dh-team-status.active {
  background: #eaf8ef;
  color: #198349;
}

.dh-team-status.disabled {
  background: #f6edef;
  color: #a83f52;
}

.dh-team-status.pending {
  background: #f1ecff;
  color: #6d32c5;
}

.dh-team-actions {
  display: flex;
  gap: 7px;
}

.dh-team-action {
  min-height: 34px;

  padding:
    0
    10px;

  border:
    1px solid #ded8e7;

  border-radius: 9px;

  background: #fff;

  color: #31293a;

  font: inherit;
  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}

.dh-team-action:hover {
  border-color:
    var(
      --competition-primary,
      #7027ff
    );

  color:
    var(
      --competition-primary,
      #7027ff
    );
}

.dh-team-action.danger {
  color: #b8384d;
}

.dh-team-empty {
  padding: 60px 30px;

  color: #8d8598;

  text-align: center;

  font-size: 13px;
}


/* Modal */

.dh-team-overlay {
  position: fixed;

  z-index: 99996;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(8,5,14,.63);

  backdrop-filter:
    blur(14px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .17s ease,
    visibility .17s ease;
}

.dh-team-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.dh-team-modal {
  width:
    min(520px,100%);

  overflow: hidden;

  border-radius: 25px;

  background: #fff;

  box-shadow:
    0 40px 110px
    rgba(0,0,0,.38);
}

.dh-team-modal-head {
  position: relative;

  padding:
    27px
    28px;

  overflow: hidden;

  background:
    linear-gradient(
      125deg,
      var(
        --competition-primary,
        #7027ff
      ),
      var(
        --competition-secondary,
        #d528ff
      )
    );

  color: #fff;
}

.dh-team-modal-head small {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .14em;

  text-transform: uppercase;

  opacity: .78;
}

.dh-team-modal-head h2 {
  margin: 0;

  color: #fff;

  font-size: 25px;
  font-weight: 900;
}

.dh-team-modal-close {
  position: absolute;

  right: 18px;
  top: 18px;

  width: 34px;
  height: 34px;

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

  border-radius: 11px;

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

  color: #fff;

  font-size: 18px;

  cursor: pointer;
}

.dh-team-modal-body {
  padding:
    26px
    28px
    29px;
}

.dh-team-fields {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;
}

.dh-team-field.full {
  grid-column:
    1 / -1;
}

.dh-team-field label {
  display: block;

  margin-bottom: 7px;

  color: #302936;

  font-size: 10px;
  font-weight: 900;
}

.dh-team-field input {
  width: 100%;
  height: 46px;

  box-sizing: border-box;

  padding:
    0
    13px;

  border:
    1px solid #ded9e7;

  border-radius: 12px;

  outline: none;

  color: #18131f;

  font: inherit;
  font-size: 13px;
}

.dh-team-field input:focus {
  border-color:
    var(
      --competition-primary,
      #7027ff
    );
}

.dh-team-error {
  display: none;

  margin-bottom: 15px;

  padding: 11px 13px;

  border:
    1px solid #ffd2da;

  border-radius: 11px;

  background: #fff2f4;

  color: #a62f43;

  font-size: 11px;
  font-weight: 700;
}

.dh-team-error.visible {
  display: block;
}

.dh-team-submit {
  width: 100%;
  height: 48px;

  margin-top: 20px;

  border: 0;
  border-radius: 13px;

  background:
    linear-gradient(
      105deg,
      var(
        --competition-primary,
        #7027ff
      ),
      var(
        --competition-secondary,
        #d528ff
      )
    );

  color: #fff;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

.dh-team-submit:disabled {
  opacity: .55;
}


/* Credentials */

.dh-team-credentials {
  padding:
    18px;

  border:
    1px solid #e7e0ef;

  border-radius: 15px;

  background: #faf8fd;
}

.dh-team-credentials-row {
  margin-bottom: 15px;
}

.dh-team-credentials-row:last-child {
  margin-bottom: 0;
}

.dh-team-credentials-row span {
  display: block;

  margin-bottom: 5px;

  color: #92899d;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.dh-team-credentials-row strong {
  display: block;

  color: #17131f;

  font-size: 14px;

  word-break: break-word;
}

.dh-team-copy {
  width: 100%;
  height: 45px;

  margin-top: 17px;

  border: 0;
  border-radius: 12px;

  background: #17131f;

  color: #fff;

  font: inherit;
  font-size: 11px;
  font-weight: 900;

  cursor: pointer;
}


@media (
  max-width: 900px
) {

  .dh-team-stats {
    grid-template-columns:
      1fr 1fr;
  }

  .dh-team-hero {
    min-height: 210px;
  }

}


@media (
  max-width: 600px
) {

  #dh-team-page {
    padding:
      22px
      16px
      70px;
  }

  .dh-team-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .dh-team-hero h1 {
    font-size: 34px;
  }

  .dh-team-stats {
    grid-template-columns:
      1fr;
  }

  .dh-team-fields {
    grid-template-columns:
      1fr;
  }

  .dh-team-field.full {
    grid-column: auto;
  }

}