/* ========================================
   ADMIN CONTACT REQUESTS
   LOGIN FORM + ADMIN INBOX
======================================== */

/* ========================================
   LOGIN CONTACT FORM
======================================== */

.auth-card:has(
  .auth-contact-header
) {
  min-height:
    700px;
}

.auth-form-panel:has(
  .auth-contact-header
) {
  justify-content:
    flex-start;

  max-height:
    min(
      760px,
      calc(
        100vh -
        84px
      )
    );

  overflow-y:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      148,
      163,
      184,
      0.34
    )
    transparent;
}

.auth-form-panel:has(
  .auth-contact-header
)::-webkit-scrollbar {
  width:
    6px;
}

.auth-form-panel:has(
  .auth-contact-header
)::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(
      148,
      163,
      184,
      0.32
    );
}

.auth-contact-header {
  gap:
    13px;
}

.auth-contact-back {
  justify-content:
    flex-start;

  width:
    fit-content;

  min-height:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  color:
    #93c5fd;

  font-size:
    0.76rem;

  font-weight:
    900;

  box-shadow:
    none;
}

.auth-contact-back:hover {
  transform:
    none;

  background:
    transparent;

  color:
    #dbeafe;

  text-decoration:
    underline;

  text-underline-offset:
    4px;
}

.auth-contact-back:focus-visible {
  outline:
    2px solid
    rgba(
      96,
      165,
      250,
      0.82
    );

  outline-offset:
    5px;
}

.auth-contact-intro {
  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.82
    );

  font-size:
    0.82rem;

  line-height:
    1.55;
}

.auth-contact-fields {
  gap:
    14px;
}

.auth-form-panel
.auth-contact-textarea {
  min-height:
    130px;

  max-height:
    260px;

  padding:
    13px 15px;

  resize:
    vertical;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.19
    );

  border-radius:
    16px;

  background:
    rgba(
      5,
      18,
      32,
      0.28
    );

  color:
    #ffffff;

  font-family:
    inherit;

  font-size:
    0.9rem;

  line-height:
    1.55;

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.auth-form-panel
.auth-contact-textarea::placeholder {
  color:
    rgba(
      148,
      163,
      184,
      0.5
    );
}

.auth-form-panel
.auth-contact-textarea:focus {
  outline:
    none;

  border-color:
    rgba(
      96,
      165,
      250,
      0.76
    );

  background:
    rgba(
      10,
      26,
      45,
      0.52
    );

  box-shadow:
    0 0 0 4px
    rgba(
      37,
      99,
      235,
      0.15
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

/* ========================================
   ADMIN CONTACT REQUEST PAGE
======================================== */

.admin-contact-requests-page {
  width:
    100%;

  gap:
    22px;
}

.admin-contact-requests-page
.sales-dashboard-workspace-header {
  align-items:
    center;
}

#adminContactRequestsList {
  display:
    grid;

  gap:
    18px;

  width:
    100%;
}

.admin-contact-request-card {
  gap:
    20px;

  padding:
    26px;

  border-color:
    rgba(
      255,
      255,
      255,
      0.11
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.085
      ),
      rgba(
        255,
        255,
        255,
        0.04
      )
    );

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.admin-contact-request-card:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    rgba(
      96,
      165,
      250,
      0.28
    );

  box-shadow:
    0 22px 58px
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.admin-contact-request-card.is-new {
  border-color:
    rgba(
      250,
      204,
      21,
      0.3
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        250,
        204,
        21,
        0.1
      ),
      rgba(
        255,
        255,
        255,
        0.04
      )
    );
}

.admin-contact-request-card.is-new::after {
  content:
    "";

  position:
    absolute;

  top:
    24px;

  left:
    0;

  width:
    4px;

  height:
    54px;

  border-radius:
    0 999px 999px 0;

  background:
    #facc15;
}

.admin-contact-request-card
.sales-details-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}

.admin-contact-request-card
.sales-details-header > div {
  display:
    grid;

  gap:
    7px;

  min-width:
    0;
}

.admin-contact-request-card
.sales-details-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.7rem
    );

  font-weight:
    950;

  line-height:
    1.18;

  letter-spacing:
    -0.035em;

  overflow-wrap:
    anywhere;
}

.admin-contact-request-card
.sales-details-header p {
  margin:
    0;

  color:
    #94a3b8;

  font-size:
    0.78rem;
}

.admin-contact-request-card
.sales-dashboard-eyebrow {
  color:
    #93c5fd;
}

.admin-contact-request-card
.sales-details-status {
  flex-shrink:
    0;
}

.admin-contact-request-card
.sales-details-status.is-warning {
  border-color:
    rgba(
      250,
      204,
      21,
      0.32
    );

  background:
    rgba(
      250,
      204,
      21,
      0.11
    );

  color:
    #fef08a;
}

.admin-contact-request-card
.sales-details-status.is-success {
  border-color:
    rgba(
      52,
      211,
      153,
      0.3
    );

  background:
    rgba(
      16,
      185,
      129,
      0.12
    );

  color:
    #bbf7d0;
}

/* ========================================
   CONTACT INFORMATION
======================================== */

.admin-contact-request-card
.sales-details-contact-list {
  display:
    grid;

  gap:
    8px;

  padding:
    15px 17px;

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

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.admin-contact-request-card
.sales-details-contact-list p {
  margin:
    0;

  color:
    #cbd5e1;

  font-size:
    0.86rem;

  line-height:
    1.6;

  overflow-wrap:
    anywhere;
}

.admin-contact-request-card
.sales-details-contact-list strong {
  color:
    #ffffff;
}

.admin-contact-request-card
.sales-details-contact-list a {
  color:
    #93c5fd;

  font-weight:
    800;

  text-decoration:
    none;
}

.admin-contact-request-card
.sales-details-contact-list a:hover {
  color:
    #dbeafe;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}

/* ========================================
   MESSAGE CONTENT
======================================== */

.admin-contact-message {
  gap:
    10px;

  padding:
    18px;

  border-radius:
    19px;

  border-color:
    rgba(
      96,
      165,
      250,
      0.16
    );

  background:
    rgba(
      4,
      13,
      27,
      0.36
    );

  box-shadow:
    none;
}

.admin-contact-message::before {
  display:
    none;
}

.admin-contact-message strong {
  color:
    #bfdbfe;

  font-size:
    0.74rem;

  font-weight:
    950;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}

.admin-contact-message p {
  margin:
    0;

  color:
    #edf5ff;

  font-size:
    0.92rem;

  line-height:
    1.7;

  overflow-wrap:
    anywhere;
}

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

.admin-contact-request-card
.dashboard-actions {
  justify-content:
    flex-end;

  flex-wrap:
    wrap;
}

.admin-contact-request-card
.dashboard-actions button {
  min-width:
    150px;
}

#adminContactRequestsStatus {
  width:
    100%;
}

#adminContactRequestCount {
  white-space:
    nowrap;
}

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

@media (
  max-width:
  900px
) {

  .auth-card:has(
    .auth-contact-header
  ) {
    min-height:
      0;
  }

  .auth-form-panel:has(
    .auth-contact-header
  ) {
    max-height:
      none;

    overflow-y:
      visible;
  }

}

@media (
  max-width:
  760px
) {

  .admin-contact-request-card
  .sales-details-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .admin-contact-request-card
  .sales-details-status {
    width:
      100%;
  }

  .admin-contact-request-card
  .dashboard-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .admin-contact-request-card
  .dashboard-actions button {
    width:
      100%;

    min-width:
      0;
  }

}

@media (
  max-width:
  560px
) {

  .auth-contact-intro {
    font-size:
      0.78rem;
  }

  .auth-form-panel
  .auth-contact-textarea {
    min-height:
      120px;
  }

  .admin-contact-request-card {
    padding:
      21px;
  }

}