:root {
  --territory-ink: #071426;
  --territory-navy: #0a1d31;
  --territory-line: #dce4dc;
  --territory-paper: #fbfcf7;
  --territory-lime: #b8ff2c;
  --territory-lime-dark: #558600;
  --territory-orange: #ff6b35;
}

#mapTab {
  background:
    linear-gradient(rgba(10, 29, 49, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 29, 49, 0.025) 1px, transparent 1px),
    #f4f5ef;
  background-size: 32px 32px;
}

#mapTab .map-tab-wrapper { padding: 18px; }

.territory-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  color: white;
  border: 1px solid rgba(184, 255, 44, 0.18);
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 255, 44, 0.17), transparent 26%),
    linear-gradient(135deg, #071426 0%, #0b2537 100%);
  overflow: hidden;
}

.territory-eyebrow {
  margin-bottom: 7px;
  color: var(--territory-lime);
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.territory-hero h2 { margin: 0; color: white; font-size: clamp(25px, 2.2vw, 36px); letter-spacing: -0.04em; }
.territory-hero p { max-width: 720px; margin: 7px 0 0; color: #b9c6d2; font-size: 13px; line-height: 1.55; }

.territory-hero-stats { display: flex; flex-shrink: 0; gap: 8px; }
.territory-hero-stats div {
  min-width: 106px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
}
.territory-hero-stats strong { display: block; color: var(--territory-lime); font-size: 22px; line-height: 1; }
.territory-hero-stats span { display: block; margin-top: 5px; color: #b9c6d2; font-size: 10px; white-space: nowrap; }

.territory-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--territory-line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(7,20,38,.06);
}

.territory-layer-group, .territory-action-group { display: flex; align-items: center; gap: 6px; }
.territory-layer-group { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.territory-layer-group::-webkit-scrollbar { display: none; }
.territory-command-label { padding: 0 5px; color: #657284; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.territory-layer-button, .territory-action-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d8e0e7;
  border-radius: 9px;
  background: #fff;
  color: #405065;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.territory-layer-button:hover, .territory-action-button:hover { border-color: #8fa274; color: var(--territory-ink); }
.territory-layer-button.active {
  border-color: var(--territory-lime);
  color: var(--territory-ink);
  background: rgba(184,255,44,.22);
  box-shadow: inset 0 0 0 1px rgba(85,134,0,.12);
}
.territory-action-button { color: white; border-color: var(--territory-navy); background: var(--territory-navy); }
.territory-action-button:last-child { color: var(--territory-ink); border-color: var(--territory-lime); background: var(--territory-lime); }

.territory-selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #b9d579;
  border-radius: 12px;
  background: #f4ffe2;
  color: #243613;
}
.territory-selection-bar > div { display: flex; align-items: center; gap: 8px; }
.territory-selection-bar span { font-size: 11px; color: #617448; }
.territory-selection-bar select, .territory-selection-bar button {
  min-height: 32px; border: 1px solid #b9d579; border-radius: 8px; background: white; padding: 0 10px; font-size: 11px; font-weight: 700;
}
.territory-selection-bar button { color: white; background: var(--territory-navy); cursor: pointer; }
.territory-selection-bar .territory-muted-button { color: #55606f; border-color: #d9dfd6; background: white; }

#mapTab #mapHierarchyFilters { border-radius: 12px !important; background: linear-gradient(135deg,#0a1d31,#153f4d) !important; }
#mapTab .map-controls-desktop { padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.9); }
.territory-tools-toggle {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d8e0e7;
  border-radius: 8px;
  background: #fff;
  color: #526174;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.territory-tools-toggle:hover { border-color: #8fa274; color: var(--territory-ink); }
.territory-map-tools { display: flex; align-items: center; gap: 8px; }
.territory-map-tools[hidden] { display: none; }

.territory-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 10px; align-items: stretch; }
#mapTab .prospect-map-container { height: 610px; max-height: 610px; border-radius: 16px; border-color: #cfd9d4; }
#mapTab .cluster-panel-desktop { height: 610px; border-radius: 0 16px 16px 0; }

.territory-insight-rail {
  height: 610px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d4ddd8;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(7,20,38,.07);
}
.territory-rail-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; gap: 4px; border-bottom: 1px solid #e6ebe7; background: #f4f6f1; }
.territory-rail-tabs button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: #6b7683; font-size: 10px; font-weight: 800; cursor: pointer; }
.territory-rail-tabs button.active { color: var(--territory-ink); background: white; box-shadow: 0 2px 8px rgba(7,20,38,.08); }
.territory-rail-heading { display: flex; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
.territory-rail-heading strong, .territory-rail-heading span { display: block; }
.territory-rail-heading strong { color: var(--territory-ink); font-size: 14px; }
.territory-rail-heading span { margin-top: 3px; color: #7d8996; font-size: 10px; }
.territory-rail-heading button { align-self: flex-start; border: 0; background: none; color: var(--territory-lime-dark); font-size: 10px; font-weight: 800; cursor: pointer; }
.territory-insight-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.territory-account-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 11px 8px; border: 0; border-bottom: 1px solid #edf0eb; background: transparent; text-align: left; cursor: pointer; }
.territory-account-row:hover { background: #f7faef; }
.territory-account-dot { width: 8px; height: 8px; border-radius: 50%; }
.territory-account-main { min-width: 0; }
.territory-account-main strong { display: block; overflow: hidden; color: #152236; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.territory-account-main span { display: block; overflow: hidden; margin-top: 3px; color: #788493; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.territory-account-value { color: #3e4b5b; font: 800 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.territory-empty { padding: 35px 18px; color: #7d8996; font-size: 11px; line-height: 1.5; text-align: center; }

.territory-heat-dot { filter: blur(7px); }
.leaflet-container.territory-drawing {
  cursor: crosshair;
  /* Keep a finger drag on the map from scrolling the page while drawing. */
  touch-action: none;
}

@media (max-width: 1180px) {
  .territory-map-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .territory-hero-stats div { min-width: 86px; }
}

@media (max-width: 900px) {
  #mapTab .map-tab-wrapper { padding: 10px; }
  .territory-hero { align-items: flex-start; flex-direction: column; padding: 18px; border-radius: 15px 15px 0 0; }
  .territory-hero-stats { width: 100%; }
  .territory-hero-stats div { flex: 1; min-width: 0; }
  .territory-command-bar { align-items: stretch; flex-direction: column; }
  .territory-action-group button { flex: 1; }
  .territory-selection-bar, .territory-selection-bar > div { align-items: stretch; flex-direction: column; }
  .territory-map-grid { display: flex; flex-direction: column; }
  #mapTab .prospect-map-container { height: 56vh; min-height: 430px; max-height: none; }
  .territory-insight-rail { height: 390px; }
}

@media (max-width: 560px) {
  .territory-hero p { font-size: 12px; }
  .territory-hero-stats strong { font-size: 18px; }
  .territory-hero-stats span { font-size: 8px; white-space: normal; }
  .territory-command-label { display: none; }
  .territory-layer-button { padding: 0 10px; }
}