/* RouteIQ global environment mode UI */

:root {
  --routeiq-test-banner-top: 96px;
}

/* Keep nav/header above the sticky test banner. */
.app-header,
.topbar,
.site-header {
  z-index: 2400 !important;
}

/* Keep account controls above everything in the shell. */
.account-wrapper,
.account-menu {
  z-index: 3200 !important;
}

.routeiq-global-test-banner {
  display: none;
  position: sticky;
  top: var(--routeiq-test-banner-top, 96px);
  z-index: 1200;
  width: min(1360px, calc(100vw - 48px));
  margin: 8px auto 18px;
  padding: 12px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid rgba(249, 115, 22, 0.38);
  color: #9a3412;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(154, 52, 18, 0.12);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.routeiq-global-test-banner.visible {
  display: flex;
}

.routeiq-global-test-banner strong {
  color: #7c2d12;
}

.routeiq-global-test-banner button {
  border-radius: 999px;
  background: #2f246f;
  color: #ffffff;
  border: 1px solid rgba(47, 36, 111, 0.18);
  box-shadow: none;
  font-weight: 950;
  padding: 8px 14px;
}

.routeiq-global-test-banner button:hover {
  background: #251d59;
  color: #ffffff;
}

#routeiqAccountEnvSwitch.routeiq-account-env-switch {
  display: block !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: #fbfbff !important;
}

#routeiqAccountEnvSwitch .routeiq-env-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#routeiqAccountEnvSwitch .routeiq-account-env-label {
  color: #111a52 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 3px !important;
}

#routeiqAccountEnvSwitch .routeiq-account-env-copy {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

#routeiqAccountEnvSwitch .routeiq-ios-env-toggle {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  width: 134px !important;
  min-width: 134px !important;
  height: 36px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(190, 196, 220, 0.95) !important;
  background: #eef2f7 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

#routeiqAccountEnvSwitch .routeiq-ios-env-toggle::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: calc(50% - 3px) !important;
  height: calc(100% - 6px) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14) !important;
  transition: transform 160ms ease !important;
  z-index: 0 !important;
}

#routeiqAccountEnvSwitch .routeiq-ios-env-toggle.mode-test::before {
  transform: translateX(100%) !important;
}

#routeiqAccountEnvSwitch .routeiq-ios-env-toggle.mode-live {
  background: linear-gradient(180deg, #ecfdf5, #dcfce7) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
}

#routeiqAccountEnvSwitch .routeiq-ios-env-toggle.mode-test {
  background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
}

#routeiqAccountEnvSwitch .routeiq-account-env-option {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

#routeiqAccountEnvSwitch .routeiq-account-env-option.active {
  color: #111a52 !important;
}

.routeiq-page-data-mode-control,
.field-row:has(#dataMode),
.inventory-upload-controls label[for="routeiqInventoryEnvironmentMode"],
#routeiqInventoryEnvironmentMode,
#routeiqInventoryEnvironmentBadge {
  display: none !important;
}

/* Anchor Files report date selector to the Reports header */
.reports-shell .reports-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 240px) !important;
  align-items: start !important;
}

.reports-shell .reports-toolbar h2 {
  grid-column: 1 !important;
  align-self: center !important;
}

.reports-shell .reports-toolbar .field-row:has(#reportDays) {
  grid-column: 2 !important;
  justify-self: end !important;
  width: 240px !important;
  max-width: 240px !important;
}

.reports-shell .reports-toolbar .field-row:has(#dataMode) {
  display: none !important;
}

/* Inventory upload card cleanup after global environment control */
.inventory-upload-card {
  align-items: center !important;
}

.inventory-upload-card .inventory-upload-main {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

.inventory-upload-card .latest-upload-title {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

@media (max-width: 760px) {
  .routeiq-global-test-banner {
    width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
  }

  .reports-shell .reports-toolbar {
    grid-template-columns: 1fr !important;
  }

  .reports-shell .reports-toolbar .field-row:has(#reportDays) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}


/* RouteIQ authoritative shared test banner sizing */
body .routeiq-global-test-banner {
  width: min(1360px, calc(100vw - 64px)) !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  body .routeiq-global-test-banner {
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}