/* =========================================
   CONVERSATION INVOICE
========================================= */

.conversation-invoice-card {
  margin:
    14px 22px;

  padding:
    14px 16px;

  background-color:
    #fffdf9;

  border:
    1px solid
    #ead7b7;

  border-left:
    4px solid
    var(--orange);

  border-radius:
    10px;

  box-shadow:
    0 2px 8px
    rgba(
      24,
      36,
      51,
      0.04
    );
}


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

.conversation-invoice-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}


.conversation-invoice-heading {
  min-width:
    0;
}


.conversation-invoice-label {
  margin:
    0 0 3px;

  color:
    var(--orange-dark);

  font-size:
    0.66rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;
}


.conversation-invoice-number {
  margin:
    0;

  color:
    var(--navy);

  font-size:
    0.98rem;

  font-weight:
    850;

  line-height:
    1.25;

  overflow-wrap:
    anywhere;
}


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

.conversation-invoice-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-shrink:
    0;
}


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

.conversation-invoice-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    0 10px;

  border-radius:
    999px;

  font-size:
    0.68rem;

  font-weight:
    850;

  line-height:
    1;

  text-transform:
    capitalize;

  white-space:
    nowrap;
}


.conversation-invoice-status.sent {
  color:
    #075985;

  background-color:
    #e0f2fe;

  border:
    1px solid
    #bae6fd;
}


.conversation-invoice-status.paid {
  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #bbf7d0;
}


.conversation-invoice-status.cancelled {
  color:
    #991b1b;

  background-color:
    #fee2e2;

  border:
    1px solid
    #fecaca;
}


.conversation-invoice-status.draft {
  color:
    #92400e;

  background-color:
    #fef3c7;

  border:
    1px solid
    #fde68a;
}


/* =========================================
   VIEW BUTTON
========================================= */

.conversation-invoice-view {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    32px;

  padding:
    0 12px;

  color:
    #ffffff;

  background-color:
    var(--blue);

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

  border-radius:
    8px;

  font-size:
    0.71rem;

  font-weight:
    850;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}


.conversation-invoice-view:hover {
  color:
    #ffffff;

  background-color:
    var(--blue-dark);

  border-color:
    var(--blue-dark);

  transform:
    translateY(-1px);
}


/* =========================================
   TABLET
========================================= */

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

  .conversation-invoice-card {
    margin:
      14px 16px;
  }

}


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

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

  .conversation-invoice-card {
    margin:
      12px;

    padding:
      12px;
  }


  .conversation-invoice-header {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      10px;
  }


  .conversation-invoice-header-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

}


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

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

  .conversation-invoice-header-actions {
    flex-wrap:
      wrap;
  }

}

/* =========================================
   DESKTOP INVOICE STRIP POLISH
========================================= */

@media screen and (min-width: 769px) {

  .conversation-invoice-card {
    margin:
      10px 18px;

    padding:
      10px 13px;

    border-radius:
      9px;
  }

  .conversation-invoice-label {
    margin-bottom:
      2px;

    font-size:
      0.58rem;
  }

  .conversation-invoice-number {
    font-size:
      0.9rem;
  }

  .conversation-invoice-status {
    min-height:
      24px;

    padding:
      0 8px;

    font-size:
      0.61rem;
  }

  .conversation-invoice-view {
    min-height:
      28px;

    padding:
      0 10px;

    font-size:
      0.66rem;
  }

}