/* Building list, filters and user-facing operating metrics. */
.city-building-overview {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  padding: 15px 16px 12px;
  border: 1px solid rgba(105,184,239,.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(6,17,30,.96), rgba(4,12,22,.97));
  box-shadow: var(--inner-glow);
}

.city-building-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 14px;
}

.city-building-overview-head h2 {
  margin: 5px 0 5px;
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1.05;
}

.city-building-overview-head p {
  margin: 0;
  max-width: 980px;
  color: #9db1c2;
  font-size: 13px;
  line-height: 1.45;
}

.building-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 14px;
}

.building-filter {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(105,184,239,.16);
  border-radius: 9px;
  background: rgba(7,20,34,.76);
  color: #a9bdcd;
  font-size: 11px;
  cursor: pointer;
}

.building-filter b {
  margin-left: 6px;
  color: #e4f3ff;
}

.building-filter:hover,
.building-filter.active {
  border-color: rgba(94,203,255,.48);
  background: rgba(24,66,94,.54);
  color: #f0f9ff;
}

.city-building-table {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(94,203,255,.45) rgba(4,12,22,.35);
  overscroll-behavior: contain;
}

.city-building-table:focus-visible {
  box-shadow: 0 0 0 2px rgba(94,203,255,.28);
  border-radius: 10px;
}

.city-building-table::-webkit-scrollbar {
  width: 9px;
}

.city-building-table::-webkit-scrollbar-track {
  background: rgba(4,12,22,.35);
  border-radius: 99px;
}

.city-building-table::-webkit-scrollbar-thumb {
  background: rgba(94,203,255,.36);
  border-radius: 99px;
}

.city-building-row {
  flex: 0 0 auto;
  display: block;
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid rgba(105,184,239,.12);
  border-radius: 11px;
  background: rgba(10,24,40,.72);
  transition: border-color var(--fast), background var(--fast);
}

.city-building-row:hover {
  border-color: rgba(94,203,255,.34);
  background: rgba(12,31,50,.84);
}

.city-building-row.selected {
  border-color: rgba(244,189,88,.68);
  box-shadow: inset 4px 0 0 var(--amber);
  background: linear-gradient(90deg, rgba(54,41,17,.48), rgba(10,24,40,.8));
}

.city-building-row.inactive {
  opacity: .72;
}

.city-building-row-top {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(150px, .85fr) 130px 130px;
  gap: 14px;
  align-items: center;
}

.city-building-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.city-building-thumb {
  width: 76px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(105,184,239,.16);
  border-radius: 8px;
  background: #06101c;
}

.city-building-thumb picture,
.city-building-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.city-building-identity strong,
.city-building-identity small {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.city-building-identity strong {
  font-size: 16px;
}

.city-building-identity small {
  margin-top: 5px;
  color: #91a7ba;
  font-size: 11px;
}

.city-building-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.city-building-flags span {
  padding: 5px 8px;
  border: 1px solid rgba(105,184,239,.14);
  border-radius: 999px;
  color: #95abba;
  font-size: 10px;
  white-space: nowrap;
}

.city-building-flags .warning {
  color: #f0c777;
  border-color: rgba(244,189,88,.32);
  background: rgba(244,189,88,.08);
}

.city-building-flags .danger {
  color: #ff8e9b;
  border-color: rgba(255,97,112,.32);
  background: rgba(255,97,112,.08);
}

.city-building-flags .info {
  color: #72d8ff;
  border-color: rgba(94,203,255,.3);
  background: rgba(94,203,255,.08);
}

.city-building-operation small {
  display: block;
  margin-bottom: 5px;
  color: #7892a8;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.city-building-operation select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(94,203,255,.22);
  border-radius: 9px;
  background: #081522;
  color: #e7f3fc;
  font-size: 12px;
}

.city-building-row-actions .ref-secondary-button {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 11px;
}

.city-building-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(105,184,239,.1);
}

.city-building-metrics > div {
  min-width: 0;
  min-height: 96px;
  padding: 13px 14px;
  border: 1px solid rgba(105,184,239,.06);
  border-radius: 10px;
  background: rgba(3,12,22,.55);
}

.city-building-metrics small {
  display: block !important;
  margin-bottom: 9px;
  color: #83a0b7;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.city-building-rates,
.city-building-workforce,
.city-building-supply,
.city-building-condition,
.city-building-risk {
  min-width: 0;
}

.city-rate-line {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 2px 0;
  color: #c2d3e0;
  font-size: 14px;
  line-height: 1.35;
}

.city-rate-line b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a6bacb;
  font-weight: 650;
}

.city-rate-line em {
  flex: 0 0 auto;
  color: inherit;
  font-style: normal;
  font-weight: 760;
}

.city-building-rates.output .city-rate-line {
  color: #64dfa9;
}

.city-building-rates.input .city-rate-line,
.city-building-rates.maintenance .city-rate-line {
  color: #f0bd6a;
}

.city-building-rates.net .city-rate-line {
  color: #d9ebf8;
}

.city-rate-empty {
  display: block;
  color: #70869a;
  font-size: 14px;
}

.city-building-workforce strong,
.city-building-supply strong,
.city-building-condition strong,
.city-building-risk strong {
  display: block;
  font-size: 20px;
  line-height: 1.15;
}

.city-building-workforce span,
.city-building-supply span,
.city-building-condition span,
.city-building-risk span {
  display: block;
  margin-top: 6px;
  color: #8da2b4;
  font-size: 13px;
  line-height: 1.4;
}

.city-building-condition i {
  display: block;
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
}

.city-building-condition i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber) 45%, var(--green));
}

.city-building-risk .danger-text {
  color: #ff8b99;
}

.city-building-overview-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 8px;
  color: #8198aa;
  font-size: 10px;
}

.city-building-overview-footer span {
  color: #b6cad9;
  font-size: 12px;
  font-weight: 700;
}

.building-filter-empty {
  padding: 32px;
  border: 1px dashed rgba(105,184,239,.17);
  border-radius: 12px;
  color: #8ea3b4;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1550px) and (min-width: 1101px) {
  .city-building-row-top {
    grid-template-columns: minmax(230px, 1fr) minmax(120px, .8fr) 115px 115px;
  }

  .city-building-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .city-building-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .city-building-overview {
    overflow: visible;
  }

  .city-building-table {
    overflow: visible;
    padding-right: 0;
  }

  .city-building-row-top {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, .8fr) 110px 110px;
  }

  .city-building-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .city-building-overview-head {
    display: block;
  }

  .city-building-overview-head .ref-rail-actions {
    margin-top: 10px;
  }

  .city-building-row-top {
    grid-template-columns: 1fr;
  }

  .city-building-metrics {
    grid-template-columns: 1fr;
  }
}