*,
*::before,
*::after {
  box-sizing: border-box;
}


:root {
  --black: #000000;
  --black_hover: #999999;
  --white: #ffffff;
  --grey: #515151;
  --calcite-color-foreground-1: #ffffff;
  --calcite-action-text-color-pressed: #1a1a1a;
  --calcite-action-background-color-hover: #999999;
  --calcite-color-foreground-2: #2e2e2e;
}

calcite-action {
  --calcite-action-background-color-hover: var(--white);
  --calcite-action-background-color-press: var(--white);
  --calcite-action-background-color: var(--white);
  --calcite-action-indicator-color: var(--black_hover);
  --calcite-action-text-color-press: var(--black);
  --calcite-action-text-color: var(--black);
}

calcite-action-bar {
  --calcite-action-bar-background-color: var(--white);
  --calcite-action-text-color: var(--black);
  --calcite-icon-color: #1a1a1a;
}

calcite-action-group {
  --calcite-action-background-color: var(--white);
  --calcite-action-group-border-color: var(--black);
}

calcite-button {
  --calcite-button-background-color: var(--white);
  --calcite-button-border-color: var(--black_hover);
  --calcite-button-corner-radius: 0;
  --calcite-button-icon-color: var(--black);
  --calcite-button-loader-color: var(--black);
  --calcite-button-shadow-color: var(--white);
  --calcite-button-text-color: var(--black);
}

calcite-icon {
  --calcite-icon-color: var(--black);
}

calcite-shell-panel {
  --calcite-shell-panel-background-color: #ffffff;
  --calcite-shell-panel-border-color: #cdcdcd;
  --calcite-shell-panel-resize-icon-color: var(--black);
  --calcite-shell-panel-text-color: var(--black);
  --calcite-shell-panel-width: 280px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#side-panel[collapsed] {
  display: none !important;
}

/* Responsive legend: hide desktop legend panel when JS marks it inactive */
#legend-side-panel[hidden] {
  display: none !important;
}

calcite-panel {
  --calcite-color-background: #ffffff;
  --calcite-color-text-1: #151515;
  --calcite-color-text-2: #151515;
  --calcite-color-text-3: #666666;
  --calcite-color-foreground-1: #ffffff;
}

calcite-panel::part(content) {
  color: #1a1a1a;
  background: #ffffff;
}

calcite-panel::part(header) {
  color: #1a1a1a;
  background: #ffffff;
}

calcite-panel::part(heading) {
  color: #1a1a1a;
}

arcgis-features,
arcgis-map {
  height: 100%;
}

#side-panel arcgis-features,
arcgis-features {
  --calcite-color-background: #ffffff !important;
  --calcite-color-foreground-1: #ffffff !important;
  --calcite-color-foreground-2: #f4f4f4 !important;
  --calcite-color-foreground-3: #e8e8e8 !important;
  --calcite-color-text-1: #1a1a1a !important;
  --calcite-color-text-2: #4a4a4a !important;
  --calcite-color-text-3: #666666 !important;
  --calcite-color-border-1: #e0e0e0 !important;
  --calcite-color-border-2: #ebebeb !important;
  --calcite-action-background-color: #ffffff !important;
  --calcite-action-background-color-hover: #f4f4f4 !important;
  --calcite-action-text-color: #1a1a1a !important;
  --calcite-action-bar-background-color: #ffffff !important;
  --calcite-icon-color: #1a1a1a !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
}

arcgis-features::part(content),
arcgis-features::part(content-container),
arcgis-features::part(container),
arcgis-features::part(panel) {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

arcgis-features::part(header),
arcgis-features::part(header-content),
arcgis-features::part(toolbar) {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

arcgis-features::part(footer),
arcgis-features::part(pagination) {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

#map_shell {
  position: relative;
  display: grid;
  grid-template: "content" 100% / auto;
  height:45rem !important;
  max-height: 45rem !important;
  margin-bottom: 1rem;
  border: 1px solid #cdcdcd;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout style;
  transform: translate3d(0, 0, 0);
}

.info-item {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.info-label {
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.4;
}

.panel-content {
  padding: 0;
}

.rate-zone-id {
  font-weight: 600;
}

.rate-type {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #444444;
}

#layer-toggle-section {
  padding: 10px 28px 14px 16px;
  border-top: 1px solid #e0e0e0;
}

#layer-toggle-section-mobile {
  padding: 10px 28px 14px 16px;
  border-top: 1px solid #e0e0e0;
}

.toggle-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.toggle-row calcite-label {
  --calcite-label-text-color: #1a1a1a;
  font-size: 13px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.toggle-row calcite-switch {
  flex: 0 0 auto;
  margin-right: 2px;
}

.toggle-row+.toggle-row {
  margin-top: 8px;
}

/* Keep calcite-sheet confined within the map shell, not the viewport */
#map_shell calcite-sheet,
calcite-sheet#legend-sheet {
  position: absolute !important;
  inset: 0 !important;
}

calcite-sheet#legend-sheet {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  z-index: 1100 !important;
  --calcite-sheet-width: 300px;
  --calcite-scrim-background: rgba(0, 0, 0, 0.05);
  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.05);
}

#legend-sheet::part(content-wrapper) {
  max-width: 300px;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

#legend-sheet::part(scrim) {
  background: rgba(0, 0, 0, 0.05) !important;
}

#legend-panel {
  --calcite-panel-background-color: #ffffff;
  --calcite-panel-header-background-color: #ffffff;
  --calcite-panel-heading-text-color: #1a1a1a;
  --calcite-panel-description-text-color: #666666;
  --calcite-panel-header-action-background-color: transparent;
  --calcite-panel-header-action-background-color-hover: #f0f0f0;
  --calcite-panel-header-action-text-color: #1a1a1a;
  height: 100%;
}



#legend-button {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  --calcite-button-padding-x: 0;
  --calcite-button-padding-y: 0;
  --calcite-button-border-color: #cfcfcf;
  --calcite-button-background-color: #ffffff;
  --calcite-button-background-color-hover: #f3f3f3;
  --calcite-button-background-color-press: #ebebeb;
  --calcite-button-text-color: #333333;
  --calcite-button-corner-radius: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

/* Responsive legend: desktop keeps the left legend panel visible and hides the mobile controls */
@media (min-width: 641px) {
  #legend-side-panel {
    display: block;
    --calcite-shell-panel-width: 300px;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #legend-side-panel::part(container),
  #legend-side-panel::part(content) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  #legend-side-panel::part(content),
  #legend-side-panel calcite-panel::part(content) {
    min-height: 0;
    overflow-y: auto;
  }

  #legend-side-panel calcite-panel,
  #legend-side-panel arcgis-legend {
    max-height: none;
  }

  #legend-button,
  #legend-sheet {
    display: none !important;
  }
}

/* Responsive legend: mobile hides the permanent left legend panel */
@media (max-width: 640px) {
  #legend-side-panel {
    display: none !important;
  }
}



arcgis-legend {
  overflow-y: auto;
}

.arcgis-search__form {
  margin-bottom: 0 !important;
}

.esri-popup {
  --calcite-color-background: #ffffff;
  --calcite-color-text-1: #1a1a1a;
  --calcite-color-text-2: #1a1a1a;
  --calcite-color-text-3: #1a1a1a;
}

.esri-popup__header {
  background-color: #ffffff;
  color: #1a1a1a;
}

.esri-popup__header-title {
  color: #1a1a1a;
}

.esri-popup__content {
  background-color: #ffffff;
  color: #1a1a1a;
}

@media (min-width: 641px) {
  .esri-popup {
    display: none !important;
    visibility: hidden !important;
  }
}