/*
 * SAMP v4.10.133 — Command Center layout/performance and environmental analytics.
 * This file is intentionally scoped to #command-center-view and loaded last.
 * It provides one authoritative spacing/grid layer without changing other views.
 */
body:not(.auth-locked) #command-center-view {
  --cc-gap-xs: 6px;
  --cc-gap-sm: 8px;
  --cc-gap-md: clamp(10px, .8vw, 12px);
  --cc-gap-lg: clamp(12px, 1vw, 16px);
  --cc-card-padding: clamp(10px, .85vw, 13px);
  --cc-section-gap: clamp(12px, 1.1vw, 17px);
  --cc-card-radius: 12px;
  --cc-map-height: clamp(330px, 36vh, 440px);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body:not(.auth-locked) #command-center-view,
body:not(.auth-locked) #command-center-view * {
  box-sizing: border-box;
}

body:not(.auth-locked) #command-center-view .panel,
body:not(.auth-locked) #command-center-view .cc-zone,
body:not(.auth-locked) #command-center-view .cc-kpi,
body:not(.auth-locked) #command-center-view .cc-chart-card,
body:not(.auth-locked) #command-center-view .reports940-overview-host,
body:not(.auth-locked) #command-center-view .dashboard-spatial-sector-grid,
body:not(.auth-locked) #command-center-view .dashboard-locality-grid {
  min-width: 0;
  max-width: 100%;
}

/* The dashboard uses one spacing rhythm. */
body:not(.auth-locked) #command-center-view .cc-hero-compact {
  margin-bottom: var(--cc-gap-sm) !important;
}
body:not(.auth-locked) #command-center-view .cc-filter-dock {
  margin-block: 0 var(--cc-gap-md) !important;
  padding: var(--cc-gap-sm) var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
}
body:not(.auth-locked) #command-center-view .cc-filter-content,
body:not(.auth-locked) #command-center-view .cc-filter-grid,
body:not(.auth-locked) #command-center-view .cc-filter-actions {
  gap: var(--cc-gap-sm) !important;
}
body:not(.auth-locked) #command-center-view .cc-zone {
  margin-block: var(--cc-section-gap) !important;
  padding: var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
}
body:not(.auth-locked) #command-center-view .cc-zone-header {
  margin-bottom: var(--cc-gap-sm) !important;
}

/* KPI cards: 4 → 3 → 2 → 1, equal-height and overflow-safe. */
body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-primary-kpis.cc-kpi-grid,
body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-scouting-kpis.cc-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  align-items: stretch !important;
  gap: var(--cc-gap-md) !important;
  margin: 0 !important;
}
body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-primary-kpis.cc-kpi-grid > .cc-kpi,
body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-scouting-kpis.cc-kpi-grid > .cc-kpi {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: clamp(76px, 6.4vw, 96px) !important;
  height: 100% !important;
  margin: 0 !important;
  padding: var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
  overflow: hidden;
}
body:not(.auth-locked) #command-center-view .cc-kpi > *,
body:not(.auth-locked) #command-center-view .cc-kpi div,
body:not(.auth-locked) #command-center-view .cc-kpi span,
body:not(.auth-locked) #command-center-view .cc-kpi small {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Report/locality grids keep matched card edges and predictable gaps. */
body:not(.auth-locked) #command-center-view .reports940-overview-host .dashboard-spatial-sector-grid,
body:not(.auth-locked) #command-center-view .reports940-overview-host .dashboard-locality-grid,
body:not(.auth-locked) #command-center-view .cc-report-analytics-grid,
body:not(.auth-locked) #command-center-view .cc-field-analytics-grid,
body:not(.auth-locked) #command-center-view .cc-map-pair {
  gap: var(--cc-gap-lg) !important;
}
body:not(.auth-locked) #command-center-view .reports940-overview-host .dashboard-spatial-sector-grid,
body:not(.auth-locked) #command-center-view .reports940-overview-host .dashboard-locality-grid {
  margin-block: 0 var(--cc-section-gap) !important;
}

body:not(.auth-locked) #command-center-view .cc-report-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}
body:not(.auth-locked) #command-center-view .cc-report-analytics-grid > .cc-chart-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
}
body:not(.auth-locked) #command-center-view .cc-report-trend-card { grid-column: span 8 !important; }
body:not(.auth-locked) #command-center-view .cc-report-mix-card { grid-column: span 4 !important; }
body:not(.auth-locked) #command-center-view .cc-hourly-card { grid-column: span 8 !important; }
body:not(.auth-locked) #command-center-view .cc-period-comparison-card { grid-column: span 4 !important; }

/* Field cards: sector analysis full width, remaining cards form balanced pairs. */
body:not(.auth-locked) #command-center-view .cc-field-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  margin-top: var(--cc-gap-md) !important;
}
body:not(.auth-locked) #command-center-view .cc-field-analytics-grid > .cc-chart-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
}
body:not(.auth-locked) #command-center-view .cc-field-sector-card { grid-column: 1 / -1 !important; }
body:not(.auth-locked) #command-center-view .cc-control-outcomes-card,
body:not(.auth-locked) #command-center-view .cc-observed-card,
body:not(.auth-locked) #command-center-view .cc-impact-indicator-card,
body:not(.auth-locked) #command-center-view .cc-field-summary-card { grid-column: span 6 !important; }

body:not(.auth-locked) #command-center-view .cc-chart-head,
body:not(.auth-locked) #command-center-view .panel-title,
body:not(.auth-locked) #command-center-view .cc-section-title {
  min-width: 0;
  align-items: flex-start !important;
  gap: var(--cc-gap-sm) !important;
  margin-bottom: var(--cc-gap-sm) !important;
}
body:not(.auth-locked) #command-center-view .cc-chart-head > div:first-child,
body:not(.auth-locked) #command-center-view .panel-title > div:first-child,
body:not(.auth-locked) #command-center-view .cc-section-title > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
body:not(.auth-locked) #command-center-view .cc-chart-head h3,
body:not(.auth-locked) #command-center-view .panel-title h2,
body:not(.auth-locked) #command-center-view .cc-section-title h3 {
  overflow-wrap: anywhere;
}

/* Maps remain equal-height and preserve the v4.10.130 HeatLayer canvas fix. */
body:not(.auth-locked) #command-center-view .cc-map-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  margin-top: var(--cc-section-gap) !important;
}
body:not(.auth-locked) #command-center-view .cc-map-pair > .panel {
  display: flex;
  flex-direction: column;
  min-width: 0 !important;
  height: 100%;
  margin: 0 !important;
  padding: var(--cc-card-padding) !important;
  border-radius: var(--cc-card-radius) !important;
}
body:not(.auth-locked) #command-center-view .cc-release-map-stage,
body:not(.auth-locked) #command-center-view .cc-control-map-stage {
  flex: 1 1 auto;
  min-height: var(--cc-map-height) !important;
  height: var(--cc-map-height) !important;
}
body:not(.auth-locked) #command-center-view #cc-release-map,
body:not(.auth-locked) #command-center-view #cc-control-map {
  width: 100% !important;
  height: 100% !important;
  min-height: var(--cc-map-height) !important;
}
body:not(.auth-locked) #command-center-view #cc-control-map .leaflet-pane > canvas,
body:not(.auth-locked) #command-center-view #cc-control-map .leaflet-heatmap-layer {
  max-width: none !important;
  max-height: none !important;
}

/* Native sticky is the primary implementation. JS pinning is fallback-only. */
@media (min-width: 760px) {
  body:not(.auth-locked) #command-center-view .cc-filter-dock,
  body:not(.auth-locked) #command-center-view .cc-filter-dock.is-viewport-fixed {
    position: sticky !important;
    top: calc(var(--portal-header-height, 0px) - 1px) !important;
    inset-inline: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 950 !important;
  }
}

@media (max-width: 1399px) {
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-primary-kpis.cc-kpi-grid,
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-scouting-kpis.cc-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body:not(.auth-locked) #command-center-view .cc-report-trend-card,
  body:not(.auth-locked) #command-center-view .cc-report-mix-card,
  body:not(.auth-locked) #command-center-view .cc-hourly-card,
  body:not(.auth-locked) #command-center-view .cc-period-comparison-card {
    grid-column: span 6 !important;
  }
}

@media (max-width: 1099px) {
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-primary-kpis.cc-kpi-grid,
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-scouting-kpis.cc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body:not(.auth-locked) #command-center-view .cc-map-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.auth-locked) #command-center-view .cc-field-analytics-grid > .cc-chart-card,
  body:not(.auth-locked) #command-center-view .cc-report-analytics-grid > .cc-chart-card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 759px) {
  body:not(.auth-locked) #command-center-view {
    --cc-card-padding: 10px;
    --cc-section-gap: 12px;
    --cc-map-height: 320px;
    overflow-x: hidden;
  }
  body:not(.auth-locked) #command-center-view .cc-filter-dock,
  body:not(.auth-locked) #command-center-view .cc-filter-dock.is-viewport-fixed {
    position: static !important;
    inset: auto !important;
  }
  body:not(.auth-locked) #command-center-view .cc-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 519px) {
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-primary-kpis.cc-kpi-grid,
  body:not(.auth-locked) #command-center-view.cc-dashboard-2026 #cc-scouting-kpis.cc-kpi-grid,
  body:not(.auth-locked) #command-center-view .cc-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.auth-locked) #command-center-view .cc-chart-head,
  body:not(.auth-locked) #command-center-view .panel-title,
  body:not(.auth-locked) #command-center-view .cc-section-title,
  body:not(.auth-locked) #command-center-view .cc-release-map-head,
  body:not(.auth-locked) #command-center-view .cc-control-map-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* v4.10.133 — executive Field Scouting environmental analytics. */
body:not(.auth-locked) #command-center-view .cc-environment-section {
  margin-top: var(--cc-section-gap);
  min-width: 0;
  padding: var(--cc-card-padding);
  border: 1px solid #dce8e5;
  border-radius: var(--cc-card-radius);
  background: linear-gradient(180deg, #fbfdfd 0%, #f6faf9 100%);
}
body:not(.auth-locked) #command-center-view .cc-environment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cc-gap-lg);
  margin-bottom: var(--cc-gap-md);
}
body:not(.auth-locked) #command-center-view .cc-environment-head > div:first-child { min-width: 0; }
body:not(.auth-locked) #command-center-view .cc-environment-head small { color: #688078; font-size: 11px; }
body:not(.auth-locked) #command-center-view .cc-environment-head h3 { margin: 2px 0 3px; color: #17473f; font-size: clamp(16px, 1.25vw, 20px); }
body:not(.auth-locked) #command-center-view .cc-environment-head p { margin: 0; color: #6f817d; font-size: 12px; }
body:not(.auth-locked) #command-center-view .cc-env-metric-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid #d7e6e2;
  border-radius: 10px;
  background: #fff;
}
body:not(.auth-locked) #command-center-view .cc-env-metric-control > span { padding-inline: 6px 4px; color: #627872; font-size: 11px; font-weight: 700; }
body:not(.auth-locked) #command-center-view .cc-env-metric-control button {
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #536c66;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
body:not(.auth-locked) #command-center-view .cc-env-metric-control button.active { background: #0b8d77; color: #fff; box-shadow: 0 2px 7px rgba(11,141,119,.16); }
body:not(.auth-locked) #command-center-view .cc-env-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-gap-lg);
  align-items: stretch;
}
body:not(.auth-locked) #command-center-view .cc-env-card {
  min-width: 0;
  height: 100%;
  padding: var(--cc-card-padding);
  margin: 0;
  border-radius: var(--cc-card-radius);
  box-shadow: 0 4px 14px rgba(28,67,58,.045);
}
body:not(.auth-locked) #command-center-view .cc-env-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cc-gap-sm);
  padding-bottom: var(--cc-gap-sm);
  border-bottom: 1px solid #edf3f1;
}
body:not(.auth-locked) #command-center-view .cc-env-card-head > div { min-width: 0; }
body:not(.auth-locked) #command-center-view .cc-env-card-head small { color: #70847e; font-size: 10px; }
body:not(.auth-locked) #command-center-view .cc-env-card-head h4 { margin: 2px 0; color: #123f37; font-size: 15px; overflow-wrap: anywhere; }
body:not(.auth-locked) #command-center-view .cc-env-card-head p { margin: 0; color: #667b75; font-size: 11px; }
body:not(.auth-locked) #command-center-view .cc-env-concentration {
  display: grid;
  gap: 2px;
  min-width: 100px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f1f8f6;
  text-align: center;
}
body:not(.auth-locked) #command-center-view .cc-env-concentration b { color: #087f6b; font-size: 11px; }
body:not(.auth-locked) #command-center-view .cc-env-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  margin: 8px 0;
}
body:not(.auth-locked) #command-center-view .cc-env-summary-strip > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid #e5efec;
  border-radius: 8px;
  background: #fbfdfc;
}
body:not(.auth-locked) #command-center-view .cc-env-summary-strip small { color: #70837d; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
body:not(.auth-locked) #command-center-view .cc-env-summary-strip b { color: #15483f; font-size: 14px; }
body:not(.auth-locked) #command-center-view .cc-env-list { display: grid; gap: 4px; }
body:not(.auth-locked) #command-center-view .cc-env-rank-row {
  appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) minmax(88px, auto);
  align-items: center;
  gap: 7px;
  padding: 6px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
body:not(.auth-locked) #command-center-view .cc-env-rank-row:hover,
body:not(.auth-locked) #command-center-view .cc-env-rank-row:focus-visible { border-color: #cde5df; background: #f6fbfa; outline: none; }
body:not(.auth-locked) #command-center-view .cc-env-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eaf5f2; color: #087f6b; font-size: 10px; font-weight: 800; }
body:not(.auth-locked) #command-center-view .cc-env-rank-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
body:not(.auth-locked) #command-center-view .cc-env-rank-label { min-width: 0; color: #284b43; font-size: 11px; font-weight: 800; white-space: normal; overflow-wrap: anywhere; }
body:not(.auth-locked) #command-center-view .cc-env-bar { position: relative; width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #eaf0ee; }
body:not(.auth-locked) #command-center-view .cc-env-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1aa58d,#087f6b); }
body:not(.auth-locked) #command-center-view .cc-env-card--habitat .cc-env-bar i { background: linear-gradient(90deg,#2d9b8a,#166a7b); }
body:not(.auth-locked) #command-center-view .cc-env-rank-main small { color: #81918d; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-rank-value { min-width: 0; display: grid; justify-items: end; gap: 0; }
body:not(.auth-locked) #command-center-view .cc-env-rank-value b { color: #0f4439; font-size: 13px; }
body:not(.auth-locked) #command-center-view .cc-env-rank-value small { color: #6d827b; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-rank-value em { color: #83948f; font-size: 8px; font-style: normal; line-height: 1.25; text-align: end; }
body:not(.auth-locked) #command-center-view .cc-env-rank-row.unknown { opacity: .74; }
body:not(.auth-locked) #command-center-view .cc-env-rank-row.unknown .cc-env-rank { background: #edf0ef; color: #7b8a86; }
body:not(.auth-locked) #command-center-view .cc-env-rank-row.unknown .cc-env-bar i { background: #96a49f; }
body:not(.auth-locked) #command-center-view .cc-env-pairing {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-gap-md);
  margin-top: var(--cc-gap-md);
  padding: 9px 11px;
  border: 1px solid #cfe5df;
  border-radius: 10px;
  background: linear-gradient(135deg,#f6fbf9,#eef8f5);
  color: #214b42;
  text-align: inherit;
  cursor: pointer;
}
body:not(.auth-locked) #command-center-view .cc-env-pairing > span { min-width: 0; display: grid; gap: 2px; }
body:not(.auth-locked) #command-center-view .cc-env-pairing > span:last-child { flex: 0 0 auto; justify-items: end; }
body:not(.auth-locked) #command-center-view .cc-env-pairing small { color: #688078; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-pairing b { font-size: 12px; overflow-wrap: anywhere; }
body:not(.auth-locked) #command-center-view .cc-env-pairing strong { color: #087f6b; font-size: 17px; }
body:not(.auth-locked) #command-center-view .cc-env-pairing em { color: #71857e; font-size: 9px; font-style: normal; }
body:not(.auth-locked) #command-center-view .cc-env-inline-note { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: #fff9ed; color: #8b641b; font-size: 10px; }
body:not(.auth-locked) #command-center-view .cc-env-detail {
  margin-top: var(--cc-gap-md);
  padding: 10px;
  border: 1px solid #d7e8e3;
  border-radius: 10px;
  background: #fff;
}
body:not(.auth-locked) #command-center-view .cc-env-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body:not(.auth-locked) #command-center-view .cc-env-detail-head small { color: #72847f; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-detail-head h4 { margin: 1px 0 0; color: #184b41; font-size: 13px; }
body:not(.auth-locked) #command-center-view .cc-env-detail-head button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: #f1f5f4; color: #526b65; cursor: pointer; }
body:not(.auth-locked) #command-center-view .cc-env-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
body:not(.auth-locked) #command-center-view .cc-env-detail-grid > span { min-width: 0; padding: 7px; border-radius: 7px; background: #f7faf9; }
body:not(.auth-locked) #command-center-view .cc-env-detail-grid small { display: block; color: #748681; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-detail-grid b { display: block; margin-top: 2px; color: #244a42; font-size: 11px; overflow-wrap: anywhere; }
body:not(.auth-locked) #command-center-view .cc-env-quality { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 8px; color: #71837e; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-quality > span { font-weight: 800; color: #526e67; }
body:not(.auth-locked) #command-center-view .cc-env-quality > b { padding: 3px 6px; border-radius: 999px; background: #eef6f4; color: #41685e; font-size: 9px; }
body:not(.auth-locked) #command-center-view .cc-env-quality > small { flex: 1 1 300px; color: #879792; }

@media (max-width: 1099px) {
  body:not(.auth-locked) #command-center-view .cc-env-cards { grid-template-columns: minmax(0,1fr); }
  body:not(.auth-locked) #command-center-view .cc-env-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 759px) {
  body:not(.auth-locked) #command-center-view .cc-environment-head { flex-direction: column; align-items: stretch; }
  body:not(.auth-locked) #command-center-view .cc-env-metric-control { width: 100%; flex-wrap: wrap; }
  body:not(.auth-locked) #command-center-view .cc-env-metric-control button { flex: 1 1 auto; }
}
@media (max-width: 519px) {
  body:not(.auth-locked) #command-center-view .cc-env-summary-strip { grid-template-columns: 1fr; }
  body:not(.auth-locked) #command-center-view .cc-env-rank-row { grid-template-columns: 22px minmax(0,1fr); }
  body:not(.auth-locked) #command-center-view .cc-env-rank-value { grid-column: 2; justify-items: start; grid-template-columns: auto auto; gap: 5px; align-items: baseline; }
  body:not(.auth-locked) #command-center-view .cc-env-rank-value em { grid-column: 1 / -1; text-align: start; }
  body:not(.auth-locked) #command-center-view .cc-env-pairing { align-items: flex-start; flex-direction: column; }
  body:not(.auth-locked) #command-center-view .cc-env-pairing > span:last-child { justify-items: start; }
  body:not(.auth-locked) #command-center-view .cc-env-detail-grid { grid-template-columns: 1fr; }
}