.tender-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px;
  margin-bottom: 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(120deg, #082f57, #075faf 62%, #20a4d8);
  box-shadow: 0 12px 30px #075faf25
}

.tender-hero small {
  letter-spacing: 2px;
  opacity: .76
}

.tender-hero h2 {
  font-size: 28px;
  margin: 7px 0 5px
}

.tender-hero p {
  margin: 0;
  opacity: .86
}

.tender-add-button {
  border: 1px solid #ffffff55;
  border-radius: 9px;
  background: #fff;
  color: #075faf;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap
}

.tender-add-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #001b3a30
}

.tender-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px
}

.tender-stats article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value" "icon note";
  column-gap: 14px;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 15px #17345d0a
}

.tender-stats small {
  grid-area: label;
  color: #68778e
}

.tender-stats strong {
  grid-area: value;
  font-size: 27px;
  margin: 5px 0;
  color: #172033
}

.tender-stats em {
  grid-area: note;
  font-size: 11px;
  color: #8a95a5;
  font-style: normal
}

.tender-stat-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  font-weight: 900
}

.tender-stat-icon.active {
  background: #e8f2ff;
  color: #075faf
}

.tender-stat-icon.apply {
  background: #fff0df;
  color: #d46a00
}

.tender-stat-icon.applied {
  background: #e4f8ef;
  color: #11845d
}

.tender-stat-icon.closing {
  background: #fff0f0;
  color: #d53d45
}

.tender-stat-icon.evaluation {
  background: #eee9ff;
  color: #6d4bc5
}

.tender-stat-icon.won {
  background: #fff8d9;
  color: #a87900
}

.tender-panel .panel-head {
  align-items: flex-end
}

.tender-filters {
  display: flex;
  gap: 10px
}

.tender-filters input,
.tender-filters select {
  margin: 0;
  min-width: 200px
}

.tender-table-wrap {
  overflow: auto
}

.tender-table-wrap table {
  min-width: 1020px
}

.tender-title-cell strong,
.tender-title-cell small {
  display: block
}

.tender-title-cell small {
  color: #7b8798;
  margin-top: 4px
}

.tender-status {
  display: inline-block;
  border-radius: 18px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap
}

.tender-status.to-apply {
  background: #fff0df;
  color: #b75b00
}

.tender-status.applied {
  background: #e7f1ff;
  color: #075faf
}

.tender-status.under-evaluation {
  background: #eee9ff;
  color: #6243bb
}

.tender-status.won {
  background: #e4f8ef;
  color: #087d56
}

.tender-status.lost,
.tender-status.closed {
  background: #f0f1f4;
  color: #687080
}

.tender-deadline {
  font-weight: 700
}

.tender-deadline.urgent {
  color: #d53d45
}

.tender-actions {
  white-space: nowrap
}

.tender-actions button {
  border: 0;
  background: transparent;
  color: #075faf;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px
}

.tender-actions .delete {
  color: #c83d45
}

.tender-empty {
  text-align: center;
  padding: 42px 20px;
  color: #738096;
  border: 1px dashed #ccd7e6;
  border-radius: 12px;
  background: #fbfdff
}

.tender-dialog {
  width: min(780px, 94vw)
}

.tender-dialog form {
  max-width: none
}

.tender-dialog .panel-head {
  align-items: flex-start
}

.tender-dialog .panel-head h2 {
  margin-bottom: 3px
}

@media(max-width:1050px) {
  .tender-stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:720px) {

  .tender-hero,
  .tender-panel .panel-head {
    align-items: stretch;
    flex-direction: column
  }

  .tender-filters {
    flex-direction: column
  }

  .tender-filters input,
  .tender-filters select {
    min-width: 0
  }

  .tender-stats {
    grid-template-columns: 1fr
  }
}