/* =========================================
   ADMIN CONTACT MESSAGES
========================================= */

.admin-contact-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


.admin-contact-card {
  padding:
    20px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;
}


.admin-contact-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    14px;
}


.admin-contact-header h3 {
  margin-bottom:
    3px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.admin-contact-person {
  color:
    var(--light-muted);

  font-size:
    0.82rem;
}


.admin-contact-status {
  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    0.72rem;

  font-weight:
    800;

  text-transform:
    capitalize;
}


.admin-contact-status-new {
  color:
    #9a3412;

  background-color:
    #ffedd5;
}


.admin-contact-status-read {
  color:
    #1d4ed8;

  background-color:
    #dbeafe;
}


.admin-contact-status-resolved {
  color:
    #166534;

  background-color:
    #dcfce7;
}


.admin-contact-message {
  padding:
    14px;

  background-color:
    var(--surface-soft);

  border-radius:
    10px;
}


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

  white-space:
    pre-wrap;

  line-height:
    1.6;
}


.admin-contact-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-top:
    14px;
}


.admin-contact-date {
  color:
    var(--light-muted);

  font-size:
    0.76rem;
}


.admin-contact-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.admin-contact-actions form {
  margin:
    0;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 700px) {

  .admin-contact-header {
    flex-direction:
      column;
  }


  .admin-contact-footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .admin-contact-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .admin-contact-actions .button {
    width:
      100%;
  }

}