/* Product-plan alignment: multi-disaster, air-space-ground resources and dual-link status. */
.brand {
  min-width: 770px;
}

.brand h1 {
  font-size: 29px;
}

.level-button {
  min-width: 136px;
}

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

.metric-content > small {
  margin-top: 5px;
  color: #8ca4b8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.link-health-card {
  padding-right: 13px;
}

.link-health-card .metric-icon {
  flex-basis: 54px;
  height: 54px;
  margin-right: 11px;
}

.link-health-card .metric-content {
  flex: 1 1 124px;
  min-width: 124px;
}

.link-health-card__route {
  flex: 0 0 76px;
  align-self: stretch;
  display: flex;
  min-width: 76px;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  font-family: var(--numeric-font);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.link-health-card__route i,
.link-health-card__route b {
  position: relative;
  display: block;
  padding-right: 14px;
  color: #b8c8d5;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.link-health-card__route i::after,
.link-health-card__route b::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.link-health-card__route i::after {
  background: #3cd8ad;
  box-shadow: 0 0 8px rgba(60, 216, 173, .8);
}

.link-health-card__route b::after {
  background: #39a9ff;
  box-shadow: 0 0 8px rgba(57, 169, 255, .8);
}

.map-title {
  max-width: 260px;
}

.space-ground-strip {
  position: absolute;
  left: 18px;
  top: 61px;
  z-index: 4;
  display: flex;
  height: 54px;
  align-items: stretch;
  padding: 5px 10px;
  border: 1px solid rgba(36, 157, 219, .44);
  border-radius: 5px;
  background: rgba(3, 20, 34, .82);
  box-shadow: inset 0 0 18px rgba(13, 111, 171, .12), 0 4px 18px rgba(0, 0, 0, .22);
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.space-ground-strip > div {
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: 22px 18px;
  min-width: 160px;
  align-items: center;
}

.space-ground-strip > div:last-child {
  min-width: 206px;
}

.space-ground-strip > div > span {
  grid-row: 1 / 3;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(48, 185, 241, .62);
  border-radius: 50%;
  color: #48cfff;
  background: rgba(0, 106, 169, .16);
  font-size: 11px;
  font-weight: 700;
}

.space-ground-strip strong {
  color: #e9f5fc;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.space-ground-strip small {
  color: #88a5b9;
  font-size: 11px;
  white-space: nowrap;
}

.space-ground-strip small i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #35d8ac;
  box-shadow: 0 0 7px rgba(53, 216, 172, .85);
}

.space-ground-strip > b {
  position: relative;
  width: 34px;
  flex: 0 0 34px;
}

.space-ground-strip > b::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(45, 189, 241, .08), rgba(45, 189, 241, .75), rgba(45, 189, 241, .08));
}

.map-tools {
  display: grid;
  grid-template-columns: repeat(5, 128px);
  left: auto;
  right: 78px;
  gap: 6px;
}

.tool-button {
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.tool-button img {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.tool-button span {
  min-width: max-content;
  margin-left: 7px;
  white-space: nowrap;
}

.layer-button {
  right: 15px;
  flex: 0 0 50px;
}

.incident-summary h2 {
  font-size: 22px;
}

.incident-summary p {
  font-size: 14px;
}

.alarm-row > div {
  min-width: 0;
}

.alarm-row strong,
.alarm-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-row {
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.alarm-row:hover,
.alarm-row:focus-visible {
  border-color: rgba(40, 177, 237, .72);
  background: rgba(10, 48, 76, .92);
  outline: none;
}

.alarm-row.is-selected {
  border-color: rgba(47, 189, 247, .82);
  background: linear-gradient(90deg, rgba(12, 78, 118, .86), rgba(8, 38, 62, .88));
  box-shadow: inset 3px 0 0 var(--alarm-accent, #28caff), inset 0 0 18px rgba(31, 150, 213, .12);
}

.alarm-row[data-event-level="1"] { --alarm-accent: #ff5057; }
.alarm-row[data-event-level="2"] { --alarm-accent: #ffc029; }
.alarm-row[data-event-level="3"] { --alarm-accent: #28bfff; }

.incident-card[data-event-level="1"] .incident-level strong {
  color: #fff;
  background: #d94149;
}

.incident-card[data-event-level="2"] .incident-level strong {
  color: #171004;
  background: #f6b910;
}

.incident-card[data-event-level="3"] .incident-level strong {
  color: #001622;
  background: #2dbcf1;
}

.panel-heading #alarmMoreButton {
  padding: 6px 4px 6px 12px;
  cursor: pointer;
}

.panel-heading #alarmMoreButton:hover,
.panel-heading #alarmMoreButton:focus-visible {
  color: #eaf8ff;
  outline: none;
}

.alarm-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

.alarm-dialog-layer.is-open {
  visibility: visible;
  opacity: 1;
}

.alarm-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 7, 14, .74);
  backdrop-filter: blur(5px);
}

.alarm-dialog {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(43, 176, 235, .76);
  border-radius: 8px;
  color: #e7f4fc;
  background: linear-gradient(145deg, rgba(5, 31, 51, .99), rgba(2, 15, 27, .995));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 0 32px rgba(22, 133, 191, .08);
}

.alarm-dialog__header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px 22px;
  border-bottom: 1px solid rgba(38, 105, 148, .48);
}

.alarm-dialog__header h2,
.alarm-dialog__header p {
  margin: 0;
}

.alarm-dialog__header h2 {
  font-size: 21px;
}

.alarm-dialog__header p {
  margin-top: 5px;
  color: #8fa9bb;
  font-size: 13px;
}

.alarm-dialog__close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(62, 137, 183, .48);
  border-radius: 5px;
  color: #b9cfdd;
  background: rgba(8, 38, 60, .75);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.alarm-filters {
  display: flex;
  gap: 8px;
  padding: 14px 22px 10px;
}

.alarm-filter {
  min-width: 72px;
  height: 34px;
  border: 1px solid rgba(49, 115, 158, .58);
  border-radius: 4px;
  color: #a7bdcb;
  background: rgba(7, 32, 51, .8);
  cursor: pointer;
}

.alarm-filter.is-active {
  border-color: #27bdf6;
  color: #effaff;
  background: rgba(18, 114, 165, .55);
  box-shadow: inset 0 0 12px rgba(33, 180, 240, .15);
}

.alarm-catalog-list {
  display: grid;
  gap: 7px;
  max-height: 520px;
  overflow-y: auto;
  padding: 4px 22px 22px;
}

.alarm-catalog-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 92px 52px;
  min-height: 70px;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border: 1px solid rgba(37, 88, 123, .6);
  border-radius: 6px;
  color: #dceaf3;
  background: rgba(7, 31, 49, .78);
  text-align: left;
  cursor: pointer;
}

.alarm-catalog-row:hover,
.alarm-catalog-row:focus-visible,
.alarm-catalog-row.is-current {
  border-color: rgba(45, 184, 239, .82);
  background: rgba(11, 62, 93, .84);
  outline: none;
}

.alarm-catalog-row__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--event-accent);
  background: color-mix(in srgb, var(--event-accent) 17%, transparent);
  font-size: 23px;
}

.alarm-catalog-row__content strong,
.alarm-catalog-row__content small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-catalog-row__content strong { font-size: 16px; }
.alarm-catalog-row__content small { margin-top: 5px; color: #8fa7b8; font-size: 13px; }
.alarm-catalog-row__level { color: var(--event-accent); font-size: 14px; font-weight: 700; text-align: center; }
.alarm-catalog-row time { color: #aab9c5; font-family: var(--numeric-font); font-size: 14px; text-align: right; }
.alarm-catalog-row[data-level="1"] { --event-accent: #ff5057; }
.alarm-catalog-row[data-level="2"] { --event-accent: #ffc029; }
.alarm-catalog-row[data-level="3"] { --event-accent: #28bfff; }

.warning-map-marker,
.warning-map-label {
  pointer-events: auto;
  cursor: pointer;
}

.warning-map-marker {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.warning-map-marker:hover,
.warning-map-marker:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 8px rgba(91, 211, 255, .9));
}

.warning-map-label:hover,
.warning-map-label:focus-visible {
  border-color: #67d8ff;
  outline: none;
  box-shadow: 0 0 18px rgba(21, 179, 242, .38), inset 0 1px rgba(164, 225, 255, .12);
}

.map-level-status {
  position: absolute;
  left: 50%;
  top: 70px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(46, 175, 231, .64);
  border-radius: 5px;
  color: #dff5ff;
  background: rgba(3, 25, 42, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26), inset 0 0 14px rgba(23, 145, 202, .1);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .2s ease;
}

.map-level-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #2bd2ff;
  box-shadow: 0 0 8px rgba(43, 210, 255, .88);
}

.map-level-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.map-detail-card {
  --detail-accent: #2ac8ff;
  position: absolute;
  left: 18px;
  bottom: 50px;
  z-index: 10;
  display: none;
  width: 350px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 70%, #1f5672);
  border-radius: 7px;
  color: #e8f6fd;
  background: linear-gradient(145deg, rgba(4, 32, 51, .97), rgba(2, 17, 29, .98));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .46), inset 3px 0 0 var(--detail-accent);
  backdrop-filter: blur(8px);
}

.map-detail-card.is-open { display: block; }

.map-detail-card__header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 13px 13px 11px 15px;
  border-bottom: 1px solid rgba(46, 102, 137, .42);
}

.map-detail-card__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--detail-accent);
  background: color-mix(in srgb, var(--detail-accent) 17%, transparent);
  font-size: 21px;
}

.map-detail-card__header strong,
.map-detail-card__header small { display: block; }
.map-detail-card__header strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.map-detail-card__header small { margin-top: 4px; color: #8fa9ba; font-size: 11px; }

.map-detail-card__close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(57, 122, 163, .48);
  border-radius: 4px;
  color: #a9c0cf;
  background: rgba(8, 43, 65, .72);
  font-size: 20px;
  cursor: pointer;
}

.map-detail-card__body { padding: 12px 15px 14px; }
.map-detail-card__body > p { margin: 0 0 11px; color: #a8bdca; font-size: 12px; line-height: 1.6; }

.map-detail-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid rgba(40, 91, 123, .46);
  border-radius: 5px;
}

.map-detail-card__facts div { min-width: 0; padding: 9px 8px; border-right: 1px solid rgba(40, 91, 123, .46); }
.map-detail-card__facts div:last-child { border-right: 0; }
.map-detail-card__facts dt { color: #7695aa; font-size: 10px; }
.map-detail-card__facts dd { overflow: hidden; margin: 5px 0 0; color: #edf8fd; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.map-detail-card__actions { display: grid; grid-template-columns: 96px 1fr; gap: 8px; margin-top: 12px; }
.map-detail-card__actions button { height: 36px; border-radius: 4px; cursor: pointer; }
.map-detail-card__focus { border: 1px solid rgba(47, 130, 178, .62); color: #b8d8e9; background: rgba(8, 47, 72, .78); }
.map-detail-card__primary { border: 1px solid var(--detail-accent); color: #effbff; background: color-mix(in srgb, var(--detail-accent) 42%, #064373); box-shadow: inset 0 0 14px rgba(78, 194, 255, .12); }

.topology-panel .table-row {
  grid-template-columns: 180px 255px 250px 230px 200px 1fr 150px;
}

.topology-panel .table-row > span:nth-child(2),
.topology-panel .table-row > span:nth-child(6) {
  justify-content: flex-start;
  padding-left: 20px;
}

.topology-panel .table-row > span:nth-child(5) {
  justify-content: center;
  padding-left: 0;
}

.topology-panel .table-row:not(.table-header):hover {
  background: rgba(15, 91, 137, .16);
}

@media (max-width: 1500px) {
  .brand {
    min-width: 720px;
  }
}