.asa-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.asa-icon-button {
  align-items: center;
  gap: 7px;
}

.top-actions .asa-icon-button,
.warranty-primary.asa-icon-button,
#upload-button.asa-icon-button,
.actions .asa-icon-button {
  display: inline-flex;
  justify-content: center;
}

.sidebar nav button .asa-nav-icon,
.sidebar > a[href="/materials.html"] .asa-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
}

.sidebar nav button .asa-icon,
.sidebar > a[href="/materials.html"] .asa-icon {
  width: 18px;
  height: 18px;
}

.sidebar nav .nav-active .asa-nav-icon {
  color: #fff;
  background: linear-gradient(135deg, #171717, #bd171e);
  box-shadow: 0 4px 11px rgb(174 17 24 / 22%);
}

.metric-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 11px;
  box-shadow: 0 5px 14px rgb(38 24 22 / 8%);
}

.metric-icon .asa-icon {
  width: 18px;
  height: 18px;
}

.metric-icon.blue {
  color: #365e78;
  background: linear-gradient(145deg, #f3f8fb, #dfeaf1);
}

.metric-icon.red {
  color: #b01920;
  background: linear-gradient(145deg, #fff4f4, #f4dede);
}

.metric-icon.amber {
  color: #8a671c;
  background: linear-gradient(145deg, #fffaf0, #eee0bb);
}

.metric-icon.green {
  color: #9f151a;
  background: linear-gradient(145deg, #fff5f4, #ecd9d7);
}

.metric-grid article,
.warranty-metric,
.table-card,
.drawer-section,
.card {
  border-color: #e7e0dc;
}

.metric-grid article,
.warranty-metric {
  background: linear-gradient(160deg, #fff 0%, #fdfbf9 100%);
}

.top-actions button,
.action-row button,
.timeline-actions button,
.research-actions button,
.form-actions button,
.actions button {
  border-radius: 10px;
}

@media (max-width: 760px) {
  .sidebar .asa-icon-button {
    gap: 3px;
  }

  .sidebar .asa-icon-button > .asa-icon {
    width: 21px;
    height: 21px;
  }

  .sidebar nav button .asa-nav-icon {
    width: 29px;
    height: 29px;
  }

  .asa-mobile-more-button {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  .asa-mobile-more-button .asa-icon {
    width: 21px;
    height: 21px;
  }

  .asa-mobile-menu-items button {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .asa-mobile-menu-items .asa-icon {
    color: #a81219;
    width: 20px;
    height: 20px;
  }

  .top-actions .asa-icon,
  .action-row .asa-icon,
  .actions .asa-icon {
    width: 17px;
    height: 17px;
  }
}