.controlButton {
  min-width: 64px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #8f2424;
  border: 1px solid #ff4d4d;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.controlButton.is-on {
  background: #16803c;
  border-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

.controlButton.is-off {
  background: #8f2424;
  border-color: #ff4d4d;
  box-shadow: none;
}

.controlButton.is-live {
  background: #0d6efd;
  border-color: #6ea8fe;
  box-shadow: 0 0 12px rgba(13, 110, 253, 0.55);
  animation: micPttPulse 1s ease-in-out infinite;
}

.controlButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.controlButton:disabled:hover {
  transform: none;
}

button[data-control="mic"] {
  touch-action: none;
  user-select: none;
}

.controlButton.is-ptt-held,
body.control-room .cameraOverlay .tileControlButton.is-ptt-held,
body.control-room-surveillance .cameraOverlay .tileControlButton.is-ptt-held {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  animation: controlRoomRecordPulse 1.2s ease-in-out infinite;
}

.micPttWave {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.controlButton.is-ptt-held .micPttWave {
  opacity: 1;
  visibility: visible;
}

.micPttWaveBar {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom center;
  animation: micPttWaveBar 0.85s ease-in-out infinite;
}

.micPttWaveBar:nth-child(1) {
  animation-delay: 0s;
}

.micPttWaveBar:nth-child(2) {
  animation-delay: 0.12s;
  height: 10px;
}

.micPttWaveBar:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes micPttWaveBar {
  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes micPttPulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.45);
  }

  50% {
    box-shadow: 0 0 16px rgba(13, 110, 253, 0.75);
  }
}

.micPttStatus {
  font-size: 0.85rem;
  opacity: 0.9;
}

.micPttStatus.is-ready {
  color: #8b949e;
}

.micPttStatus.is-connecting {
  color: #d29922;
}

.micPttStatus.is-live {
  color: #58a6ff;
  font-weight: 600;
}

.micPttStatus.is-error {
  color: #f85149;
}

.controlButton:hover {
  transform: translateY(-1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0d1117;
  color: white;
}

.topBar {
  position: relative;
  z-index: 10000;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.topBar h1 {
  margin: 0;
  font-size: 25px;
}

.topBarActions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logoutButton {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #ffffff;
  cursor: pointer;
}

.logoutButton:hover {
  background: #30363d;
}

.systemStatus {
  color: #35d07f;
  font-weight: bold;
}

.appLayout {
  display: flex;
  min-height: calc(100vh - 70px);
}

.sideNav {
  width: 220px;
  flex-shrink: 0;
  padding: 16px 12px;
  background: #161b22;
  border-right: 1px solid #30363d;
}

.sideNavTitle {
  margin: 0 10px 12px;
  color: #8b949e;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navLink {
  display: block;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  color: #c9d1d9;
  text-decoration: none;
  font-size: 14px;
}

.navLink:hover {
  background: #21262d;
  color: #ffffff;
}

.navLink.is-active {
  background: #1f6feb33;
  color: #ffffff;
  border: 1px solid #2f81f7;
}

.navLink[hidden] {
  display: none !important;
}

.pageContent {
  flex: 1;
  min-width: 0;
  padding: 25px;
}

.dashboard {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  padding: 0;
  overflow: hidden;
}

.dashboardFilters {
  padding: 20px 25px 0;
}

.dashboardFilterToolbar {
  margin-bottom: 4px;
}

.dashboardGridNotice {
  margin: 0;
  padding: 8px 25px 0;
  color: #d29922;
  font-size: 13px;
}

.dashboardFilterField {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8b949e;
}

.dashboardFilterField select {
  min-width: 180px;
}

.cameraGrid {
  display: grid;
  grid-template-columns: repeat(var(--wall-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wall-rows, 4), minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: hidden;
}

.dashboard .cameraGrid {
  align-content: stretch;
}

.cameraCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.dashboard .cameraHeader {
  flex-shrink: 0;
  padding: 8px 10px;
}

.dashboard .cameraTitle,
.dashboard .cameraName {
  font-size: 14px;
}

.dashboard .deviceInfo {
  flex-shrink: 0;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
}

.dashboard .cameraScreen {
  flex: 1;
  min-height: 0;
  height: auto;
}

.cameraHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #1c2128;
}

.cameraTitle,
.cameraName {
  font-size: 18px;
  font-weight: bold;
}

.cameraScreen {
  position: relative;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, #202833 0%, #0b0f14 70%);
}

.cameraPlaceholder {
  color: #74808c;
  font-size: 28px;
  letter-spacing: 2px;
  text-align: center;
  padding: 0 16px;
}

.cameraStream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #0b0f14;
}

.cameraOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  background: linear-gradient(
    transparent 45%,
    rgba(0, 0, 0, 0.88)
  );
  transition: opacity 0.25s ease;
}

.cameraScreen:hover .cameraOverlay {
  opacity: 1;
}

.cameraScreen:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.cameraScreen:fullscreen .cameraStream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cameraScreen:fullscreen .cameraOverlay {
  z-index: 10;
}

.loginScreen {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0d1117;
}

.loginScreen:not([hidden]) {
  display: flex;
}

#loginScreen[hidden],
#appShell[hidden] {
  display: none !important;
}

html.auth-boot-pending #loginScreen,
html.auth-boot-pending #appShell,
html.auth-boot-pending #installerLaunchScreen {
  display: none !important;
}

html.auth-boot-pending body {
  background: #0d1117;
  min-height: 100vh;
}

.loginCard {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #161b22;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.loginCard h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.loginCard p {
  margin: 0 0 20px;
  color: #8b949e;
}

.loginCard.changePasswordCard {
  padding: 32px;
  box-sizing: border-box;
}

.loginCard.changePasswordCard h2 {
  margin: 0 0 12px;
  line-height: 1.25;
}

.loginCard.changePasswordCard .changePasswordHint,
.loginCard.changePasswordCard .changePasswordStatus,
.loginCard.changePasswordCard .changePasswordSuccess,
.loginCard.changePasswordCard .changePasswordLoading {
  margin: 0 0 18px;
  line-height: 1.5;
  color: #8b949e;
}

.loginCard.changePasswordCard .changePasswordSuccess {
  color: #3fb950;
}

.loginCard.changePasswordCard .changePasswordForm {
  margin-top: 4px;
}

.loginCard.changePasswordCard .changePasswordFormGroup {
  margin-bottom: 16px;
}

.loginCard.changePasswordCard .changePasswordFormGroup label {
  display: block;
  margin-bottom: 8px;
}

.loginCard.changePasswordCard .changePasswordFormGroup input {
  width: 100%;
  box-sizing: border-box;
}

.loginCard.changePasswordCard .changePasswordForm .formError {
  margin: 0 0 16px;
}

.loginCard.changePasswordCard .changePasswordActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-bottom: 4px;
}

.loginCard.changePasswordCard.is-loading .changePasswordForm,
.loginCard.changePasswordCard.is-loading .changePasswordHint,
.loginCard.changePasswordCard.is-loading .changePasswordStatus,
.loginCard.changePasswordCard.is-loading .changePasswordSuccess {
  display: none !important;
}

.loginField {
  margin-bottom: 16px;
}

.loginField label {
  display: block;
  margin-bottom: 6px;
  color: #8b949e;
  font-size: 14px;
}

.loginField input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #ffffff;
}

.loginSubmit {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid #2f81f7;
  border-radius: 8px;
  background: #238636;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}

.loginSubmit:hover {
  background: #2ea043;
}

.loginSubmit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loginError {
  min-height: 20px;
  margin-top: 12px;
  color: #ff6464;
  font-size: 14px;
}

.statusGreen {
  color: #35d07f;
}

.statusRed {
  color: #ff6464;
}

.deviceInfo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 15px;
  border-top: 1px solid #30363d;
  color: #8b949e;
  font-size: 13px;
}

.dashboardError,
.emptyDashboard,
.panelState {
  padding: 20px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
  color: #8b949e;
  text-align: center;
}

.panelState.is-loading,
.panelState.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
}

.panelState.is-empty {
  color: #8b949e;
  border-style: dashed;
}

.stateSpinner {
  width: 18px;
  height: 18px;
  border: 2px solid #30363d;
  border-top-color: #2f81f7;
  border-radius: 50%;
  animation: adminSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes adminSpin {
  to {
    transform: rotate(360deg);
  }
}

.dashboardError,
.panelState.is-error {
  color: #ff6464;
}

.notifBellButton {
  position: relative;
  min-height: 38px;
  min-width: 42px;
  padding: 0 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #ffffff;
  cursor: pointer;
}

.notifBellButton:hover,
.notifBellButton.is-active {
  background: #30363d;
}

.notifBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #da3633;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
}

.notifBadge[hidden] {
  display: none !important;
}

.notifDrawerBackdrop {
  position: fixed;
  top: 70px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
}

.notifDrawerBackdrop[hidden] {
  display: none !important;
}

.notifDrawer {
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100vw;
  height: calc(100vh - 70px);
  overflow: hidden;
  border-left: 1px solid #30363d;
  background: #161b22;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.notifDrawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.notifDrawerHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #1c2128;
  border-bottom: 1px solid #30363d;
}

.notifDrawerHeader h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.notifDrawerActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notifDrawerBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
}

.notifList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notifItem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
}

.notifItem.is-unread {
  border-color: #2f81f7;
  background: #111821;
}

.notifTitle {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: bold;
}

.notifMeta {
  margin: 0 0 6px;
  color: #8b949e;
  font-size: 12px;
}

.notifMessage {
  margin: 0;
  color: #c9d1d9;
  font-size: 13px;
}

.pageSection {
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #161b22;
  overflow: hidden;
}

.pageSection.installerPageShell {
  width: 100%;
  max-width: min(1600px, 100%);
  overflow: visible;
  box-sizing: border-box;
}

.installerPageShell .panelHeader,
.installerPageShell .installerSitesToolbar,
.installerPageShell .installerContextStrip,
.installerPageShell #siteListSection,
.installerPageShell .panelBody,
.installerPageShell .installerContextPickersRow,
.installerPageShell .installerContextStripLine,
.installerPageShell .workflowActions,
.installerPageShell .installerCreateSitePanel,
.installerPageShell .installerDeviceCard,
.installerPageShell #deviceSummaryPanel,
.installerPageShell #installedDevicesSection {
  padding-left: 24px;
  padding-right: 24px;
}

.installerPageShell .panelHeader {
  padding-top: 16px;
}

.installerPageShell .panelBody {
  padding-bottom: 16px;
}

.installerPageShell .formField input[type="search"],
.installerPageShell #siteSearchInput {
  width: 100%;
  max-width: none;
}

.installerCreateSitePanel {
  margin: 0 24px 20px;
  padding: 16px 20px !important;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 10px;
}

.installerCreateSiteGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.installerCreateSiteGrid .formField-full {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .installerCreateSiteGrid {
    grid-template-columns: 1fr;
  }
}

.pageSection + .pageSection {
  margin-top: 24px;
}

.pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #1c2128;
  border-bottom: 1px solid #30363d;
}

.pageHeader h2 {
  margin: 0;
  font-size: 18px;
}

.pageActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filterToolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.filterToolbar .filterInput {
  flex: 1 1 220px;
}

.filterToolbar select {
  min-width: 140px;
}

.pageToast {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
}

.pageToast.is-success {
  color: #3fb950;
}

.pageToast.is-error {
  color: #ff6464;
}

.controlRoomToast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 20000;
  transform: translateX(-50%);
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  background: rgba(22, 27, 34, 0.96);
  border: 1px solid #30363d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.controlRoomToast.is-success {
  border-color: #3fb950;
  box-shadow: 0 8px 24px rgba(63, 185, 80, 0.25);
}

.controlRoomToast.is-error {
  border-color: #ff7b72;
  box-shadow: 0 8px 24px rgba(255, 123, 114, 0.2);
}

.adminAccessDenied {
  margin-bottom: 16px;
}

.filterInput,
.pageActions select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #ffffff;
  font-size: 13px;
}

.filterInput {
  min-width: 220px;
  flex: 1 1 220px;
}

.detailDrawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0, 0, 0, 0.45);
}

.detailDrawerBackdrop[hidden] {
  display: none !important;
}

.detailDrawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 8600;
  width: min(480px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #30363d;
  background: #0d1117;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.detailDrawer.is-open {
  transform: translateX(0);
}

.detailDrawerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #30363d;
  background: #161b22;
}

.detailDrawerHeader h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.detailDrawerBody {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.detailBlock + .detailBlock {
  margin-top: 20px;
}

.detailBlock h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #c9d1d9;
}

.detailList {
  margin: 0;
  display: grid;
  gap: 10px;
}

.detailList > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 13px;
}

.detailList dt {
  margin: 0;
  color: #8b949e;
}

.detailList dd {
  margin: 0;
  color: #c9d1d9;
  word-break: break-word;
}

.panelButton {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
}

.panelButton:hover {
  background: #30363d;
}

.panelButton:focus-visible,
.navLink:focus-visible,
.filterInput:focus-visible,
.pageActions select:focus-visible,
.formField input:focus-visible,
.formField select:focus-visible,
.formField textarea:focus-visible,
.logoutButton:focus-visible,
.notifBellButton:focus-visible,
.loginSubmit:focus-visible {
  outline: 2px solid #2f81f7;
  outline-offset: 2px;
}

.panelButton:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.panelBody {
  padding: 14px 16px;
}

.adminTableWrap,
.severityTableWrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.adminTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.adminTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.adminTable th,
.adminTable td {
  padding: 11px 12px;
  border-bottom: 1px solid #30363d;
  text-align: left;
  vertical-align: middle;
}

.adminTable td.cell-wrap {
  white-space: normal;
  min-width: 120px;
}

.adminTable th {
  color: #8b949e;
  font-weight: bold;
  background: #0d1117;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.adminTable tbody tr:hover {
  background: #161b2266;
}

.adminTable td {
  color: #c9d1d9;
}

.adminTable .col-actions {
  min-width: 140px;
}

.adminTable .col-status {
  min-width: 92px;
}

.progressCell {
  min-width: 120px;
}

.progressTrack {
  height: 8px;
  border-radius: 999px;
  background: #21262d;
  overflow: hidden;
}

.progressFill {
  height: 100%;
  background: #2f81f7;
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}

.modalBackdrop[hidden] {
  display: none !important;
}

.modalCard {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #161b22;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #30363d;
  background: #1c2128;
}

.modalHeader h2 {
  margin: 0;
  font-size: 18px;
}

.modalBody {
  padding: 16px;
}

.modalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid #30363d;
}

.formGrid[hidden],
.formGrid.is-hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.formField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formField.full {
  grid-column: 1 / -1;
}

.formField label {
  color: #8b949e;
  font-size: 13px;
}

.formField input,
.formField select,
.formField textarea {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #ffffff;
  font-size: 14px;
}

.passwordInputWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.passwordInputWrap input {
  width: 100%;
  padding-right: 34px;
}

.passwordValidCheck {
  position: absolute;
  right: 10px;
  color: #3fb950;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.formField textarea {
  min-height: 80px;
  resize: vertical;
}

.formHint {
  margin: 0;
  color: #8b949e;
  font-size: 12px;
}

.formFieldError {
  color: #ff6464;
  font-size: 0.85rem;
  margin-top: 4px;
}

.formError {
  margin: 0 0 12px;
  color: #ff6464;
  font-size: 13px;
  min-height: 18px;
}

.checkboxList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
}

.checkboxRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c9d1d9;
}

.actionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

.badge.is-active {
  background: #16803c33;
  color: #3fb950;
  border: 1px solid #2ea043;
}

.badge.is-inactive {
  background: #8f242433;
  color: #ff7b72;
  border: 1px solid #f85149;
}

.badge.is-neutral {
  background: #30363d66;
  color: #8b949e;
  border: 1px solid #484f58;
}

.panelButton.danger {
  border-color: #f85149;
  color: #ff7b72;
}

.panelButton.primary {
  border-color: #2f81f7;
  background: #238636;
}

@media (max-width: 720px) {
  .formGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .pageHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .filterToolbar,
  .pageActions {
    width: 100%;
  }

  .adminTable th,
  .adminTable td {
    padding: 10px;
  }
}

/* Control room — camera-first immersive dashboard (index only) */

body.control-room #appShell:not([hidden]) {
  position: relative;
  min-height: 100vh;
  background: #0d1117;
}

body.control-room .controlRoomMain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  transition: left 0.22s ease, width 0.22s ease;
}

body.control-room.control-room-chrome-visible .controlRoomMain {
  padding-top: 56px;
}

body.control-room.control-room-chrome-hidden .controlRoomMain {
  padding-top: 0;
}

body.control-room .controlRoomLayout {
  display: block;
  min-height: 0;
}

body.control-room .appLayout .sideNav {
  position: fixed;
}

.controlRoomToolbarRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px 16px;
  width: 100%;
}

.wallLayoutToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 0 0 auto;
}

body.control-room .controlRoomToolbarRow .dashboardFilterToolbar {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

body.control-room #dashboardDeviceSearch {
  min-width: 180px;
  max-width: 240px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #c9d1d9;
}

body.control-room .controlRoomPagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c9d1d9;
}

body.control-room .controlRoomPageRange {
  color: #8b949e;
  font-size: 12px;
}

body.control-room .controlRoomPagination .panelButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wallLayoutButtons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wallLayoutButton {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 13px;
}

.wallLayoutButton.is-active {
  border-color: #2f81f7;
  background: #1f6feb33;
  color: #ffffff;
}

.wallLayoutLockLabel {
  color: #8b949e;
  font-size: 12px;
}

.wallLayoutCountdown {
  color: #d29922;
  font-size: 12px;
}

body.control-room .dashboardFilters.controlRoomChrome {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
  z-index: 2;
  margin: 0;
}

body.control-room.control-room-chrome-hidden #dashboardFilters {
  display: none;
}

body.control-room .cameraGrid {
  flex: 1;
  min-height: 0;
  padding: 4px;
  gap: 4px;
}

body.control-room .controlRoomChrome {
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

body.control-room.control-room-chrome-hidden .controlRoomChrome {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.control-room.control-room-chrome-visible .controlRoomChrome {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.control-room .topBar.controlRoomChrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  transform: translateY(-102%);
  margin: 0;
}

body.control-room.control-room-chrome-visible .topBar.controlRoomChrome {
  transform: translateY(0);
}

body.control-room .sideNav.controlRoomChrome {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 130;
  width: 220px;
  transform: translateX(-102%);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
}

body.control-room.control-room-sidebar-open .sideNav.controlRoomChrome {
  transform: translateX(0);
}

body.control-room.control-room-sidebar-open .sideNav.controlRoomChrome {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 901px) {
  body.control-room:not(.control-room-sidebar-open) .controlRoomMain {
    left: 0;
    width: 100%;
    right: 0;
  }

  body.control-room.control-room-sidebar-open .controlRoomMain {
    left: 220px;
    width: calc(100% - 220px);
    right: 0;
  }

  body.control-room .topBar.controlRoomChrome {
    transition: transform 0.22s ease, left 0.22s ease, width 0.22s ease;
  }

  body.control-room:not(.control-room-sidebar-open) .topBar.controlRoomChrome {
    left: 0;
    width: 100%;
    right: 0;
  }

  body.control-room.control-room-sidebar-open .topBar.controlRoomChrome {
    left: 220px;
    width: calc(100% - 220px);
    right: 0;
  }
}

body.control-room .dashboardFilters.controlRoomChrome {
  padding: 8px 12px;
  background: rgba(13, 17, 23, 0.92);
  border-bottom: 1px solid #30363d;
  backdrop-filter: blur(6px);
}

body.control-room .dashboardGridNotice.controlRoomChrome {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
  z-index: 2;
  margin: 0;
  padding: 4px 12px;
  background: rgba(13, 17, 23, 0.85);
}

body.control-room.control-room-chrome-hidden #dashboardGridNotice {
  display: none;
}

body.control-room .cameraCard.is-wall-selected {
  box-shadow: 0 0 0 2px #2f81f7;
}

body.control-room .controlRoomSidebarTab {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 140;
  transform: translateY(-50%);
  width: 22px;
  min-height: 56px;
  padding: 0;
  border: 1px solid #30363d;
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: rgba(22, 27, 34, 0.92);
  color: #c9d1d9;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

body.control-room .controlRoomSidebarTab:hover,
body.control-room .controlRoomSidebarTab:focus-visible {
  background: #21262d;
  color: #ffffff;
}

body.control-room .deviceInfo span[id^="ip-"],
body.control-room .deviceInfo span[id^="firmware-"],
body.control-room .deviceInfo .micPttStatus {
  display: none;
}

body.control-room .cameraHeader {
  padding: 6px 8px;
}

body.control-room .cameraTitle {
  font-size: 13px;
}

body.control-room .deviceInfo {
  padding: 4px 8px;
  font-size: 11px;
  gap: 8px;
}

body.control-room .cameraScreen .cameraStream,
body.control-room .cameraScreen .cameraSecureVideo,
body.control-room .cameraScreen .cameraPlaceholder {
  z-index: 1;
}

body.control-room .cameraScreen .cameraStream,
body.control-room .cameraScreen .cameraSecureVideo {
  object-fit: contain;
  object-position: center;
}

body.control-room .cameraOverlay {
  opacity: 0;
  z-index: 6;
}

body.control-room .cameraScreen:hover .cameraOverlay,
body.control-room .cameraScreen:focus-within .cameraOverlay {
  opacity: 1;
  pointer-events: auto;
}

body.control-room .cameraOverlay.cameraOverlayCompact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 6px;
  pointer-events: none;
  background: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.9) 100%
  );
  transition: opacity 0.2s ease;
}

@media (hover: none) {
  body.control-room .cameraScreen:focus-within .cameraOverlay {
    opacity: 1;
    pointer-events: auto;
  }
}

body.control-room .cameraOverlay .tileControlButton {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  background: rgba(22, 27, 34, 0.9);
  border: 1px solid #30363d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

body.control-room .cameraOverlay .tileControlButton:hover {
  background: #21262d;
  border-color: #484f58;
}

body.control-room .cameraOverlay .tileControlButton.is-siren-off {
  background: rgba(22, 27, 34, 0.9);
  border-color: #30363d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.control-room .cameraOverlay .tileControlButton.is-recording {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  animation: controlRoomRecordPulse 1.2s ease-in-out infinite;
}

@keyframes controlRoomRecordPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(63, 185, 80, 0.12);
  }
}

body.control-room .cameraCard.is-device-recording .cameraOverlay,
body.control-room .cameraCard.is-device-recording .cameraOverlay.cameraOverlayCompact {
  opacity: 1;
  pointer-events: auto;
}

body.control-room .cameraScreen .cameraRecordingIndicator {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.82);
  border: 1px solid #3fb950;
  color: #aff5b4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.35);
}

body.control-room .cameraRecordingDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3fb950;
  animation: cameraRecordingDotPulse 1.1s ease-in-out infinite;
}

@keyframes cameraRecordingDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.65;
  }
}

body.control-room .localEvidencePreviewAuto {
  max-width: 220px;
  padding: 8px;
}

body.control-room .autoCaptureStatus {
  font-size: 12px;
  color: #8b949e;
  margin-left: 12px;
  white-space: nowrap;
}

body.control-room .autoCaptureStatus.is-active {
  color: #3fb950;
}

body.control-room .autoCaptureStatus.needs-action {
  color: #d29922;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.control-room .cameraFaceOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

body.control-room .cameraOverlay .tileControlButton.is-snapshot-success {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
}

body.control-room .cameraOverlay .tileControlButton.is-snapshot-error {
  background: #8f2424;
  border-color: #ff7b72;
  color: #ffffff;
}

body.control-room .cameraOverlay .tileControlButton.is-busy {
  opacity: 0.75;
  cursor: wait;
}

body.control-room .cameraOverlay .tileControlButton.is-siren-on {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(63, 185, 80, 0.45);
}

body.control-room .cameraOverlay .tileControlButton.is-live {
  background: #0d6efd;
  border-color: #6ea8fe;
}

body.control-room .wallLayoutLockButton.is-active {
  border-color: #d29922;
  background: #d2992233;
}

/* Surveillance employee — CCTV wall tile layout (filtering/API unchanged) */

body.control-room-surveillance .dashboardFilterToolbar {
  display: none;
}

body.control-room-surveillance.control-room-chrome-visible .controlRoomMain {
  padding-top: 58px;
}

body.control-room-surveillance.control-room-chrome-visible .topBar.controlRoomChrome h1 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
  padding: 10px 16px 8px;
}

body.control-room-surveillance.control-room-chrome-visible .dashboardFilters.controlRoomChrome {
  margin-top: 4px;
  padding: 10px 12px 12px;
}

body.control-room-surveillance.control-room-chrome-visible .controlRoomToolbarRow {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

body.control-room-surveillance .wallLayoutToolbar {
  width: 100%;
}

body.control-room-surveillance .dashboardFilters.controlRoomChrome {
  position: relative;
  top: auto;
  flex-shrink: 0;
  z-index: 2;
}

body.control-room-surveillance .cameraGrid {
  flex: 1;
  min-height: 0;
}

body.control-room-surveillance .cameraCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.control-room-surveillance .cameraScreen {
  position: relative;
  flex: 1 1 auto;
  min-height: 100px;
  overflow: hidden;
}

body.control-room-surveillance .cameraOverlay.cameraOverlayCompact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 6px;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.9) 100%
  );
  transition: opacity 0.2s ease;
}

body.control-room-surveillance .cameraScreen:hover .cameraOverlay,
body.control-room-surveillance .cameraScreen:focus-within .cameraOverlay {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  body.control-room-surveillance .cameraScreen:focus-within .cameraOverlay {
    opacity: 1;
    pointer-events: auto;
  }
}

body.control-room-surveillance .cameraOverlay .tileControlButton,
body.control-room-surveillance .cameraOverlay .controlButton[data-action] {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(22, 27, 34, 0.92);
  border: 1px solid #30363d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

body.control-room-surveillance .cameraOverlay .tileControlButton.is-siren-on {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(63, 185, 80, 0.45);
}

body.control-room-surveillance .cameraOverlay .tileControlButton.is-recording,
body.control-room-surveillance .cameraOverlay .controlButton[data-action].is-recording {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  animation: controlRoomRecordPulse 1.2s ease-in-out infinite;
}

body.control-room-surveillance .cameraGrid[data-wall-mode="4"] .cameraOverlay .tileControlButton,
body.control-room-surveillance .cameraGrid[data-wall-mode="4"] .cameraOverlay .controlButton[data-action],
body.control-room-surveillance .cameraGrid[data-wall-mode="3"] .cameraOverlay .tileControlButton,
body.control-room-surveillance .cameraGrid[data-wall-mode="3"] .cameraOverlay .controlButton[data-action] {
  min-width: 26px;
  width: 26px;
  height: 26px;
  font-size: 12px;
}

body.control-room-surveillance .cameraGrid[data-wall-mode="4"] .cameraOverlay.cameraOverlayCompact,
body.control-room-surveillance .cameraGrid[data-wall-mode="3"] .cameraOverlay.cameraOverlayCompact {
  gap: 4px;
  padding: 6px 4px;
}

body.control-room-surveillance .deviceInfo.surveillanceTileMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  flex-shrink: 0;
  padding: 6px 8px;
  border-top: 1px solid #30363d;
  background: #1c2128;
}

body.control-room-surveillance .surveillanceTileFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11px;
  color: #c9d1d9;
}

body.control-room-surveillance .surveillanceTileLine {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

body.control-room-surveillance .surveillanceTileLine:first-child {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.control-room-surveillance .surveillanceTileSep {
  color: #484f58;
  flex: 0 0 auto;
}

body.control-room-surveillance .surveillanceTileSirenStatus {
  flex: 0 0 auto;
  font-size: 10px;
  margin-left: auto;
}

body.control-room-surveillance .deviceInfo.surveillanceTileMeta > span[hidden] {
  display: none !important;
}

.adminDrillDownBreadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  color: #8b949e;
}

.adminDrillDownBreadcrumb a {
  color: #58a6ff;
  text-decoration: none;
}

.adminDrillDownBreadcrumb a:hover,
.adminDrillDownBreadcrumb a:focus-visible {
  text-decoration: underline;
}

.adminDrillDownBreadcrumb span[aria-current="page"] {
  color: #c9d1d9;
}

.adminDrillDownSep {
  opacity: 0.65;
  user-select: none;
}

.adminDashboardPage {
  padding: 20px 24px 32px;
}

.adminDashboardHero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.adminDashboardHero h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.adminDashboardHero p {
  margin: 0;
  color: #8b949e;
  max-width: 640px;
}

.adminDashboardControlRoomCta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.opsOverviewCardLink {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #58a6ff;
  text-decoration: none;
}

.opsOverviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.opsOverviewCard {
  padding: 14px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
}

.opsOverviewCardDef {
  margin: 0;
}

.opsOverviewCard dt {
  margin: 0 0 6px;
  color: #8b949e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.opsOverviewCard dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.opsOverviewCard a {
  color: #58a6ff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .appLayout {
    flex-direction: column;
  }

  .sideNav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #30363d;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .sideNavTitle {
    width: 100%;
    margin: 0 0 4px;
  }

  .navLink {
    margin-bottom: 0;
  }

  .dashboard {
    min-height: auto;
    overflow: visible;
  }

  .cameraGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    flex: none;
    overflow: visible;
  }

  .dashboard .cameraScreen {
    height: 260px;
    flex: none;
  }
}

@media (max-width: 640px) {
  .cameraGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .notifDrawer {
    width: 100vw;
    border-left: none;
  }

  .notifItem {
    grid-template-columns: 1fr;
  }
}

.wizardDevicePickList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.wizardDevicePickButton {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-subtle, #d8dee8);
  border-radius: 8px;
  background: var(--surface-elevated, #fff);
  padding: 10px 12px;
  cursor: pointer;
}

.wizardDevicePickButton.is-selected {
  border-color: var(--accent, #2563eb);
  box-shadow: inset 0 0 0 1px var(--accent, #2563eb);
}

.wizardDevicePickTitle {
  display: block;
  font-weight: 600;
}

.wizardDevicePickMeta {
  display: block;
  font-size: 0.92rem;
  color: var(--text-muted, #5f6b7a);
}

.installerDevicePresence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.installerDevicePresenceDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.installerDevicePresence.is-online {
  color: #15803d;
}

.installerDevicePresence.is-online .installerDevicePresenceDot {
  background: #22c55e;
}

.installerDevicePresence.is-offline {
  color: #94a3b8;
}

.installerDevicePresence.is-offline .installerDevicePresenceDot {
  background: #ef4444;
}

.workflowSection {
  margin-bottom: 20px;
}

.workflowSiteCard {
  margin-bottom: 16px;
  padding: 16px;
}

.workflowSiteCard.is-confirmed {
  border-left: 4px solid #16803c;
}

.workflowDeviceSubcard {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-muted, #f4f6f8);
  border-radius: 8px;
}

.workflowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.searchablePickerField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.searchablePickerLabel {
  color: #8b949e;
  font-size: 13px;
  font-weight: 600;
}

.searchPicker {
  position: relative;
  width: 100%;
}

.searchPickerControl {
  position: relative;
  display: flex;
  align-items: center;
}

.searchPickerInput {
  width: 100%;
  min-height: 38px;
  padding: 8px 32px 8px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
  font-size: 14px;
}

.searchPickerInput:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: 1px;
}

.searchPickerInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.searchPickerChevron {
  position: absolute;
  right: 10px;
  color: #8b949e;
  pointer-events: none;
  font-size: 14px;
}

.searchPickerDropdown {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 4px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.searchPickerDropdown.is-portal {
  position: fixed;
  z-index: 10150;
  margin-top: 0;
  max-height: min(360px, calc(100vh - 120px));
}

.searchPickerList {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.searchPickerOption {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: #e6edf3;
}

.searchPickerOption:hover,
.searchPickerOption:focus,
.searchPickerOption.is-active {
  background: #1f6feb33;
}

.searchPickerOption.is-selected {
  border: 1px solid #2f81f7;
}

.searchPickerSelectedMark {
  color: #3fb950;
  font-weight: 700;
}

body.installerModalOpen {
  overflow: hidden;
}

.installerToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 18px;
}

.installerCustomersToolbar {
  margin-bottom: 22px;
}

.pageSection.installerCustomersPage {
  padding: 26px 24px 20px;
  overflow: visible;
}

.installerCustomersPage .installerCustomersPanelHeader h2 {
  margin: 0 0 22px;
  font-size: 18px;
}

.installerCustomersPage .installerCustomersToolbar {
  margin-bottom: 24px;
}

.installerCustomersPage .panelBody {
  padding: 0;
}

.installerCustomersPage #customersPanel {
  padding: 0;
}

.installerDevicesPage.installerPageShell,
.installerPageShell.installerDevicesPage {
  padding-top: 4px;
}

.installerDevicesToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 24px 16px;
  padding: 0;
}

.installerDevicesToolbar #deviceCustomerPickerHost,
.installerDevicesToolbar #deviceSitePickerHost {
  flex: 1 1 280px;
  min-width: 0;
}

.installerDeviceContextCard {
  margin-top: 22px;
}

.installerDeviceDetailHost {
  margin: 0 24px 20px;
  padding: 0;
}

.installerDevicesHeader {
  padding-top: 22px !important;
  padding-bottom: 8px !important;
}

.installerDevicesHeader h2 {
  margin: 0 0 16px;
}

.installerToolbarSelect {
  min-width: 240px;
  max-width: 300px;
  width: 100%;
  flex: 1 1 240px;
  height: 38px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b949e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #e6edf3;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}

.installerToolbarSelect:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.installerViewModalHelper {
  margin-top: 14px;
  color: #8b949e;
  line-height: 1.5;
}

.installerCustomerContextPanel {
  margin: 0 24px 26px;
  padding: 20px 24px;
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #1c2128;
}

.installerSelectedCustomerCard {
  margin: 0 24px 16px;
  padding: 22px 24px;
}

.installerSelectedCustomerCardGrid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 24px;
}

.installerSelectedCustomerCardLeft {
  flex: 1 1 220px;
  min-width: 0;
}

.installerSelectedCustomerCardRight {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.installerExistingSitesCount {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8b949e;
  text-transform: uppercase;
}

.installerSiteCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
}

.installerSiteCardActions .installerToolbarSelect {
  flex: 1 1 200px;
  max-width: none;
}

.installerCompactEmptyHint {
  margin: 0 24px 12px;
  padding: 0;
  color: #8b949e;
  font-size: 0.95rem;
  line-height: 1.45;
}

.installerCustomerContextPanel .installerContextStripLabel {
  margin: 0 0 10px;
}

.installerCustomerContextPanel .installerContextStripPrimary {
  margin: 0 0 6px;
  font-size: 1.08rem;
  line-height: 1.45;
}

.installerCustomerContextPanel .installerContextStripMeta {
  margin: 0;
  line-height: 1.5;
}

.installerSitesSubsection {
  margin: 0 24px 12px;
}

.installerModalContextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 16px;
}

.installerModalContextGrid .formField-full {
  grid-column: 1 / -1;
}

.installerModalReadonlyValue {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
}

.searchPickerTitle {
  display: block;
  font-weight: 600;
  color: #e6edf3;
}

.searchPickerMeta {
  display: block;
  font-size: 0.92rem;
  color: #8b949e;
}

.searchPickerEmpty {
  padding: 12px;
  margin: 0;
  color: #8b949e;
}

.installerSitesToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 24px 16px;
}

.installerSitesCustomerPicker {
  flex: 1 1 320px;
  min-width: 0;
  max-width: none;
}

.installerSitesCustomerPicker .searchPickerInput {
  max-width: none;
}

.installerSitesToolbarActions {
  flex: 0 0 auto;
  align-items: center;
}

.installerContextStrip {
  margin: 0 0 16px;
  padding: 10px 0 14px;
  border-bottom: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 0.95rem;
}

.installerContextStripLabel {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b949e;
}

.installerContextStripPrimary {
  margin: 0 0 2px;
  font-weight: 700;
  color: #e6edf3;
}

.installerContextStripMeta {
  margin: 0;
  color: #8b949e;
}

.installerContextStripLine {
  margin: 0;
  color: #c9d1d9;
}

.installerContextPickersRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .installerContextPickersRow {
    grid-template-columns: 1fr;
  }
}

.installerDeviceFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.installerDeviceFormGrid .formField-full {
  grid-column: 1 / -1;
}

.installerDeviceFormActions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #30363d;
}

@media (max-width: 720px) {
  .installerDeviceFormGrid {
    grid-template-columns: 1fr;
  }
}

.installerContextCard {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-color, #d6dde6);
  border-radius: 10px;
  background: var(--surface-muted, #f8fafc);
  max-width: 520px;
}

.installerContextLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted, #5f6b7a);
  margin: 0 0 8px;
}

.installerContextTitle {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.installerContextMeta {
  margin: 0 0 4px;
  color: var(--text-muted, #5f6b7a);
}

.installerContextBadge {
  margin: 10px 0 12px;
  font-weight: 600;
  color: var(--success-text, #0d7a4a);
}

.installerSectionHeading {
  margin: 20px 0 8px;
  font-size: 1rem;
}

.installerDeviceSummaryList {
  margin: 12px 0;
}

.installerCopyRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.installerCopyRow code {
  word-break: break-all;
}

.installerWifiSteps {
  margin: 16px 0;
  padding-left: 20px;
}

.installerWifiSteps li {
  margin-bottom: 14px;
}

.installerWifiSuccess {
  color: var(--success, #3fb950);
  font-weight: 600;
  margin: 0 0 8px;
}

.workflowSiteSummaryRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflowCustomerSummaryTitle {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

#workflowReviewHint:not(:empty) {
  color: #b42318;
}

#workflowDraftHost {
  max-width: 52rem;
}

.installerPageNarrow,
.installerPageWork {
  width: 100%;
  max-width: min(1600px, 100%);
  overflow: visible;
}

#workflowDraftHost .workflowSummaryRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
}

#workflowDraftHost .workflowCustomerForm .formField,
#workflowDraftHost .workflowDeviceSection .formField {
  max-width: 28rem;
}

.installerDeviceFormHeading {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #e6edf3;
}

.installerDeviceSummaryTitle {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e6edf3;
  font-size: 1.05rem;
  line-height: 1.35;
}

.installerDeviceSummaryMeta {
  margin: 0 0 7px;
  color: #8b949e;
  font-size: 0.94rem;
  line-height: 1.5;
}

.installerDeviceCard {
  background: #1b2430;
  color: #e8eef5;
  border: 1px solid #2f3d4f;
  border-radius: 12px;
}

.installerPageShell .installerContextPickersRow {
  margin-bottom: 24px;
}

.installerPageShell > .workflowActions {
  margin: 0 24px 28px;
  gap: 10px;
}

.installerPageShell .panelButton {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
}

.installerPageShell #installedDevicesSection {
  margin-top: 8px;
  margin-bottom: 28px;
}

.installerPageShell #installedDevicesSection .installerSectionHeading {
  margin: 0 0 14px;
}

.installerPageShell #installedDevicesHost {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.installerPageShell .workflowDeviceSummary.installerDeviceCard {
  padding: 24px 26px;
  margin: 0;
  box-sizing: border-box;
}

.installerPageShell .workflowDeviceSummary.installerDeviceCard .installerDeviceSummaryMeta:last-of-type {
  margin-bottom: 0;
}

.installerPageShell .workflowDeviceSummary .workflowActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #30363d;
}

.installerPageShell .installerSitesSubsection {
  margin-bottom: 22px;
}

.installerPageShell .installerSitesToolbar {
  margin-bottom: 22px;
}

.installerDeviceCard .formHint,
.installerDeviceCardMeta dt {
  color: #a9b6c7;
}

.installerDeviceCardMeta dd {
  color: #f3f7fb;
}

.installerDraftCameraCard .cameraScreen {
  min-height: 220px;
  background: #0f141b;
  border-radius: 8px;
}

@media (max-width: 520px) {
  .pageContent {
    padding: 12px;
  }

  .cameraScreen {
    height: 260px;
  }

  .topBar {
    padding: 0 15px;
  }

  .topBar h1 {
    font-size: 19px;
  }
}

.localEvidencePreview {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.localEvidencePreview img {
  max-width: 100%;
  max-height: calc(100% - 56px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.localEvidencePreviewTitle {
  margin: 0;
  color: #3fb950;
  font-weight: 600;
}

.localEvidencePreviewFilename {
  margin: 0;
  color: #c9d1d9;
  font-size: 12px;
  text-align: center;
  word-break: break-all;
}

.evidencePageMain {
  padding: 16px 20px 28px;
}

.evidencePageHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.evidenceFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.evidenceGallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.evidenceCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
}

.evidenceCardThumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: #0d1117;
}

.evidenceCardThumbVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9d1d9;
  font-size: 28px;
}

.evidenceCardBadge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c9d1d9;
  background: #21262d;
  border: 1px solid #30363d;
}

.evidenceCardBody h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.evidenceModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.65);
}

.evidenceModal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 12001;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #161b22;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.evidenceModalHeader,
.evidenceModalActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #30363d;
}

.evidenceModalActions {
  border-bottom: 0;
  border-top: 1px solid #30363d;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.evidenceModalBody {
  padding: 16px;
}

.evidenceModalMeta {
  padding: 0 16px 12px;
  color: #8b949e;
  font-size: 13px;
}

.evidenceModalImage,
.evidenceModalVideo {
  display: block;
  width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 8px;
  background: #0d1117;
}


/* CAMERA VIDEO VIEWPORT FIX: single/fullscreen + video-only zoom */
.cameraScreen {
  --camera-video-zoom: 1;
}

.cameraScreen .cameraStream,
.cameraScreen .cameraSecureVideo {
  transform: scale(var(--camera-video-zoom, 1));
  transform-origin: center center;
  transition: transform 120ms ease-out;
  will-change: transform;
}

/*
 * 1x1 monitoring view must use the whole camera viewport.
 * User preference: no large side bars; controlled width stretch is acceptable.
 * Multi-camera walls keep contain so tiles do not crop unexpectedly.
 */
body.control-room .cameraGrid[data-wall-mode="1"] .cameraScreen .cameraStream,
body.control-room .cameraGrid[data-wall-mode="1"] .cameraScreen .cameraSecureVideo,
body.control-room-surveillance .cameraGrid[data-wall-mode="1"] .cameraScreen .cameraStream,
body.control-room-surveillance .cameraGrid[data-wall-mode="1"] .cameraScreen .cameraSecureVideo {
  object-fit: fill !important;
  object-position: center;
}

/* Fullscreen always fills the display instead of letterboxing. */
.cameraScreen:fullscreen .cameraStream,
.cameraScreen:fullscreen .cameraSecureVideo {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center;
}

/* Zoom applies only to the video media layer; controls remain unchanged. */
.cameraScreen.is-camera-zoomed {
  cursor: zoom-out;
}

.cameraScreen:not(.is-camera-zoomed) {
  cursor: zoom-in;
}

.cameraScreen .cameraOverlay {
  transform: none !important;
}


/* CCTV MATRIX 1X1-6X6 REFERENCE LAYOUT */
body.control-room .cameraGrid,
body.control-room-surveillance .cameraGrid {
  grid-template-columns:
    repeat(var(--wall-cols, 4), minmax(0, 1fr));
  grid-template-rows:
    repeat(var(--wall-rows, 4), minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
}

body.control-room .cameraCard,
body.control-room-surveillance .cameraCard {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #05080b;
}

/*
 * Camera video occupies the WHOLE CCTV cell.
 * Header/footer become overlays instead of consuming video height.
 */
body.control-room .cameraCard .cameraScreen,
body.control-room-surveillance .cameraCard .cameraScreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #05080b;
}

body.control-room .cameraCard .cameraStream,
body.control-room .cameraCard .cameraSecureVideo,
body.control-room-surveillance .cameraCard .cameraStream,
body.control-room-surveillance .cameraCard .cameraSecureVideo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform:
    translate3d(
      var(--camera-video-pan-x, 0px),
      var(--camera-video-pan-y, 0px),
      0
    )
    scale(var(--camera-video-zoom, 1)) !important;
  transform-origin: center center !important;
  will-change: transform;
}

/* CCTV-style top title strip overlay */
body.control-room .cameraCard .cameraHeader,
body.control-room-surveillance .cameraCard .cameraHeader {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px 8px;
  min-height: 28px;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 16, 0.92),
    rgba(7, 11, 16, 0.58),
    transparent
  );
  pointer-events: none;
}

/* CCTV-style bottom information strip overlay */
body.control-room .cameraCard .deviceInfo,
body.control-room-surveillance .cameraCard .deviceInfo {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 24px;
  padding: 4px 7px;
  border: 0;
  background: linear-gradient(
    0deg,
    rgba(7, 11, 16, 0.92),
    rgba(7, 11, 16, 0.55),
    transparent
  );
  pointer-events: none;
}

body.control-room .cameraCard .cameraOverlay,
body.control-room-surveillance .cameraCard .cameraOverlay {
  z-index: 40;
}

/* Compact labels as grid becomes denser */
body.control-room .cameraGrid[data-wall-mode="4"] .cameraHeader,
body.control-room .cameraGrid[data-wall-mode="5"] .cameraHeader,
body.control-room .cameraGrid[data-wall-mode="6"] .cameraHeader,
body.control-room-surveillance .cameraGrid[data-wall-mode="4"] .cameraHeader,
body.control-room-surveillance .cameraGrid[data-wall-mode="5"] .cameraHeader,
body.control-room-surveillance .cameraGrid[data-wall-mode="6"] .cameraHeader {
  font-size: 11px;
  min-height: 22px;
  padding: 3px 5px;
}

body.control-room .cameraGrid[data-wall-mode="5"] .deviceInfo,
body.control-room .cameraGrid[data-wall-mode="6"] .deviceInfo,
body.control-room-surveillance .cameraGrid[data-wall-mode="5"] .deviceInfo,
body.control-room-surveillance .cameraGrid[data-wall-mode="6"] .deviceInfo {
  font-size: 9px;
  padding: 2px 4px;
  min-height: 18px;
}

/* Fullscreen: complete live picture + pan/zoom */
.cameraScreen:fullscreen .cameraStream,
.cameraScreen:fullscreen .cameraSecureVideo {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

.cameraScreen.is-camera-zoomed {
  cursor: grab;
  touch-action: none;
}

.cameraScreen.is-camera-panning {
  cursor: grabbing;
}


/* CONTROL ROOM FAST RETURN + HIGH-VISIBILITY CCTV LABELS */
body.control-room .cameraReturnPreview,
body.control-room-surveillance .cameraReturnPreview {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #05080b;
  pointer-events: none;
}

body.control-room .cameraGrid[data-wall-mode="1"] .cameraReturnPreview,
body.control-room-surveillance .cameraGrid[data-wall-mode="1"] .cameraReturnPreview {
  object-fit: fill;
}

body.control-room .cameraTitle,
body.control-room-surveillance .cameraTitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
}

body.control-room .cameraSiteName,
body.control-room-surveillance .cameraSiteName {
  color: #39ff14;
  text-shadow:
    0 0 4px rgba(57, 255, 20, 0.9),
    0 0 10px rgba(57, 255, 20, 0.45);
}

body.control-room .cameraTitlePipe,
body.control-room-surveillance .cameraTitlePipe {
  color: #ffffff;
  opacity: 0.9;
}

body.control-room .cameraDeviceIdTop,
body.control-room-surveillance .cameraDeviceIdTop {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid rgba(0, 229, 255, 0.95);
  border-radius: 5px;
  background: rgba(0, 229, 255, 0.18);
  color: #00e5ff;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-shadow: 0 0 7px rgba(0, 229, 255, 0.85);
}

body.control-room .cameraClientHighlight,
body.control-room-surveillance .cameraClientHighlight {
  color: #ff4fd8 !important;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 79, 216, 0.75);
}

body.control-room .cameraPhoneHighlight,
body.control-room-surveillance .cameraPhoneHighlight {
  color: #ffe600 !important;
  font-weight: 900;
  text-decoration: none !important;
  text-shadow: 0 0 6px rgba(255, 230, 0, 0.65);
}


/* CONTROL ROOM FINAL CLEAN UI OVERRIDES */

/* Keep CCTV tile at its selected wall size from first render. */
body.control-room .cameraCard,
body.control-room-surveillance .cameraCard {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

body.control-room .cameraCard .cameraScreen,
body.control-room-surveillance .cameraCard .cameraScreen {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.control-room .cameraReturnPreview,
body.control-room .cameraSecureVideo,
body.control-room .cameraStream,
body.control-room-surveillance .cameraReturnPreview,
body.control-room-surveillance .cameraSecureVideo,
body.control-room-surveillance .cameraStream {
  width: 100% !important;
  height: 100% !important;
}

/* One clean CCTV accent. No glow, no heavy bold, no rangoli. */
body.control-room .cameraTitle,
body.control-room-surveillance .cameraTitle {
  font-weight: 500 !important;
  text-shadow: none !important;
}

body.control-room .cameraSiteName,
body.control-room .cameraTitlePipe,
body.control-room .cameraDeviceIdTop,
body.control-room .cameraClientHighlight,
body.control-room .cameraPhoneHighlight,
body.control-room-surveillance .cameraSiteName,
body.control-room-surveillance .cameraTitlePipe,
body.control-room-surveillance .cameraDeviceIdTop,
body.control-room-surveillance .cameraClientHighlight,
body.control-room-surveillance .cameraPhoneHighlight {
  color: #5bd6e8 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Device ID should look like normal CCTV text, not a glowing badge. */
body.control-room .cameraDeviceIdTop,
body.control-room-surveillance .cameraDeviceIdTop {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  letter-spacing: normal !important;
}

body.control-room .cameraPhoneHighlight,
body.control-room-surveillance .cameraPhoneHighlight {
  text-decoration: none !important;
}