#vihFloatingSensors .vih-module {
  width: clamp(250px, 20vw, 310px) !important;
  height: clamp(118px, 10.6vw, 168px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: 0 12px 28px rgba(13, 39, 105, .13) !important;
  overflow: hidden;
}

#vihFloatingSensors .vih-module > * { visibility: hidden !important; }
#vihFloatingSensors .vih-module[data-workspace="rail-surface"] { background-image: url("assets/workspace-panels/rail-surface.png") !important; }
#vihFloatingSensors .vih-module[data-workspace="cctv"] { background-image: url("assets/workspace-panels/intrusion-perimeter.png") !important; }
#vihFloatingSensors .vih-module[data-workspace="vibration"] { background-image: url("assets/workspace-panels/vibration.png") !important; }
#vihFloatingSensors .vih-module[data-workspace="slope-tilt"] { background-image: url("assets/workspace-panels/slope-tilt.png") !important; }
#vihFloatingSensors .vih-module[data-workspace="water-drainage"] { background-image: url("assets/workspace-panels/water-drainage.png") !important; }
#vihFloatingSensors .vih-module[data-workspace="signalling"] { background-image: url("assets/workspace-panels/signalling.png") !important; }

#dashboard .hero-row > div:first-child,
#vih > .page-heading > div:first-child,
#workorders .mi-heading > div:first-child,
#mission-board .mission-board-heading > div:first-child {
  position: relative;
  padding-right: 88px;
}

#dashboard .hero-row > div:first-child::after,
#vih > .page-heading > div:first-child::after,
#workorders .mi-heading > div:first-child::after,
#mission-board .mission-board-heading > div:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 8px 20px rgba(13, 39, 105, .1);
}

#dashboard .hero-row > div:first-child::after {
  background-image: url("assets/page-symbols/operations-intelligence.png");
}

#vih > .page-heading > div:first-child::after {
  background-image: url("assets/page-symbols/visual-intelligence-hub.png");
}

#workorders .mi-heading > div:first-child::after {
  background-image: url("assets/page-symbols/data-intelligence.png");
}

#mission-board .mission-board-heading > div:first-child::after {
  background-image: url("assets/page-symbols/mission-board.png");
}

.workspace-design-banner {
  display: none;
  width: 50%;
  aspect-ratio: 1.84 / 1;
  max-height: 170px;
  margin: -8px 0 18px;
  border-radius: 18px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

#workspace-detail[data-workspace] .workspace-design-banner { display: block; }
#workspace-detail[data-workspace="rail-surface"] .workspace-design-banner { background-image: url("assets/workspace-panels/rail-surface.png"); }
#workspace-detail[data-workspace="cctv"] .workspace-design-banner { background-image: url("assets/workspace-panels/intrusion-perimeter.png"); }
#workspace-detail[data-workspace="vibration"] .workspace-design-banner { background-image: url("assets/workspace-panels/vibration.png"); }
#workspace-detail[data-workspace="slope-tilt"] .workspace-design-banner { background-image: url("assets/workspace-panels/slope-tilt.png"); }
#workspace-detail[data-workspace="water-drainage"] .workspace-design-banner { background-image: url("assets/workspace-panels/water-drainage.png"); }
#workspace-detail[data-workspace="signalling"] .workspace-design-banner { background-image: url("assets/workspace-panels/signalling.png"); }
#sensors .ue360-design-banner {
  display: block;
  width: 75%;
  aspect-ratio: 4.18 / 1;
  max-height: none;
  overflow: hidden;
  border-radius: 18px;
  background-image: url("assets/workspace-panels/ue-360-revised.png");
  background-position: center 49.6%;
  background-size: 107.4% auto;
}

.ue360-header-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 90px;
  margin-bottom: 8px;
}

#sensors .ue360-header-row .ue360-design-banner {
  order: 1;
  position: relative;
  flex: 0 0 190px;
  width: 190px;
  height: 90px;
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.ue360-header-row .ue360-design-banner::before {
  content: "360";
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 52px;
  border: 1px solid rgba(98,164,237,.2);
  border-radius: 10px;
  background: rgba(226,240,255,.7);
  color: #1263df;
  font: 800 26px Manrope, sans-serif;
  transform: translateY(-50%);
}

.ue360-header-row .ue360-design-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 76px;
  width: 90px;
  height: 90px;
  background: url("assets/workspace-panels/ue-360.png") -70px -80px / 455px auto no-repeat;
  mix-blend-mode: multiply;
  transform: translateY(-50%);
}

.ue360-header-title {
  order: 2;
  margin-left: 4px;
  color: #071f42;
  font: 600 18px Manrope, sans-serif;
  line-height: 1.25;
  white-space: nowrap;
}

.ue360-header-row .ue360-survey-picker {
  order: 3;
  margin-left: auto;
}

.ue360-header-row .page-heading {
  display: none !important;
}

.ue360-header-row .page-heading .subtitle {
  line-height: 1.55;
}

.ue360-header-row .hero-actions {
  display: none;
}

.sensor-header-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.sensor-header-row .workspace-design-banner {
  grid-column: 1;
  grid-row: 1;
  width: 66.666%;
  margin: 0;
}

.sensor-header-row .page-heading {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0 !important;
  align-items: flex-start;
  flex-direction: column;
  gap: 14px;
}

.sensor-header-row .page-heading .subtitle {
  line-height: 1.55;
}

.sensor-header-row .page-heading > button {
  align-self: flex-start;
}

#workspace-detail[data-workspace="cctv"] .sensor-header-row .workspace-design-banner,
#workspace-detail[data-workspace="slope-tilt"] .sensor-header-row .workspace-design-banner,
#workspace-detail[data-workspace="water-drainage"] .sensor-header-row .workspace-design-banner {
  width: 225%;
  margin-right: -125%;
}

#workspace-detail .page-heading .eyebrow,
#workspace-detail .page-heading h1,
#sensors > .page-heading .eyebrow,
#sensors > .page-heading h1,
.ue360-header-row .page-heading .eyebrow,
.ue360-header-row .page-heading h1 {
  display: none;
}

#workspace-detail .page-heading,
#sensors > .page-heading {
  margin-bottom: 14px;
}

#workspace-detail .page-heading .subtitle,
#sensors > .page-heading .subtitle {
  margin-top: 0;
  max-width: 850px;
}

@media (max-width: 1100px) {
  #vihFloatingSensors .vih-module { width: 230px !important; height: 125px !important; }
  .workspace-design-banner { width: 70%; }
  #sensors .ue360-design-banner { width: 90%; }
  .ue360-header-row { align-items: flex-start; }
  .ue360-header-row .ue360-design-banner { flex-basis: calc(23.8% - 12px); }
  .sensor-header-row { grid-template-columns: minmax(0, 2.1fr) minmax(220px, 1fr); }
  .sensor-header-row .workspace-design-banner { width: 85%; }
  #workspace-detail[data-workspace="cctv"] .sensor-header-row .workspace-design-banner,
  #workspace-detail[data-workspace="slope-tilt"] .sensor-header-row .workspace-design-banner,
  #workspace-detail[data-workspace="water-drainage"] .sensor-header-row .workspace-design-banner {
    width: 225%;
    margin-right: -125%;
  }
}

@media (max-width: 700px) {
  #dashboard .hero-row > div:first-child,
  #vih > .page-heading > div:first-child,
  #workorders .mi-heading > div:first-child,
  #mission-board .mission-board-heading > div:first-child {
    padding-right: 62px;
  }

  #dashboard .hero-row > div:first-child::after,
  #vih > .page-heading > div:first-child::after,
  #workorders .mi-heading > div:first-child::after,
  #mission-board .mission-board-heading > div:first-child::after {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  .workspace-design-banner { width: 100%; max-height: 150px; }
  #sensors .ue360-design-banner { width: 100%; max-height: none; }
  .ue360-header-row { flex-direction: column; gap: 12px; }
  .ue360-header-row .ue360-design-banner { width: 35%; flex-basis: auto; }
  .ue360-header-title { margin-left: 0; white-space: normal; }
  .ue360-header-row .ue360-survey-picker { margin-left: 0; }
  .ue360-header-row .page-heading { width: 100%; flex-basis: auto; }
  .sensor-header-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .sensor-header-row .workspace-design-banner { width: 100%; }
  #workspace-detail[data-workspace="cctv"] .sensor-header-row .workspace-design-banner,
  #workspace-detail[data-workspace="slope-tilt"] .sensor-header-row .workspace-design-banner,
  #workspace-detail[data-workspace="water-drainage"] .sensor-header-row .workspace-design-banner {
    width: 100%;
    margin-right: 0;
  }
}
.sensor-placeholder-detail{--placeholder-color:#1263df;display:grid;justify-items:center;max-width:820px;margin:28px auto;padding:52px 46px;text-align:center;background:linear-gradient(180deg,#fff,#f7faff);border-color:color-mix(in srgb,var(--placeholder-color) 24%,#dce6f2);box-shadow:0 18px 45px rgba(15,49,88,.1)}.sensor-placeholder-detail[hidden]{display:none}.sensor-placeholder-symbol{display:grid;place-items:center;width:72px;height:72px;margin-bottom:20px;border:1px solid color-mix(in srgb,var(--placeholder-color) 35%,#d9e4f0);border-radius:22px;background:color-mix(in srgb,var(--placeholder-color) 10%,#fff);color:var(--placeholder-color);font:800 22px Manrope,sans-serif;box-shadow:0 12px 28px color-mix(in srgb,var(--placeholder-color) 18%,transparent)}.sensor-placeholder-detail h2{margin:2px 0 10px;color:#12345f;font:800 25px Manrope,sans-serif}.sensor-placeholder-detail>p:not(.eyebrow){max-width:610px;margin:0;color:#667b93;font:500 11px/1.7 Inter,sans-serif}.sensor-placeholder-readiness{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:30px 0 24px}.sensor-placeholder-readiness span{padding:15px;border:1px solid #e0e8f2;border-radius:10px;background:#fff;text-align:left}.sensor-placeholder-readiness small,.sensor-placeholder-readiness strong{display:block}.sensor-placeholder-readiness small{margin-bottom:7px;color:#8a9aae;font:700 7px Inter,sans-serif;letter-spacing:.08em}.sensor-placeholder-readiness strong{color:#274a73;font:800 10px Inter,sans-serif}@media(max-width:700px){.sensor-placeholder-detail{padding:34px 20px}.sensor-placeholder-readiness{grid-template-columns:1fr}}
