html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

#premises-menu-list {
  max-height: 300px;
  overflow-y: auto;
}

:root {
  --us-nav-height: 0px;
}

nav.navbar,
ul.us_menu,
ul.us_menu.horizontal {
  position: relative;
  z-index: 6000 !important;
}

#viewDiv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--us-nav-height);
  z-index: 1;
  --esri-view-outline: none;
}

#viewDiv .esri-view,
#viewDiv .esri-view-root,
#viewDiv .esri-view-surface {
  --esri-view-outline: none;
}

/* Remove intrusive focus ring when the map view receives focus on click. */
#viewDiv:focus,
#viewDiv:focus-visible,
#viewDiv .esri-view:focus,
#viewDiv .esri-view:focus-visible,
#viewDiv .esri-view-root:focus,
#viewDiv .esri-view-root:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ArcGIS 4.x draws an inset focus indicator on the view surface using this class. */
#viewDiv .esri-view-surface--inset-outline,
#viewDiv .esri-view-surface--inset-outline:focus,
#viewDiv .esri-view-surface--inset-outline:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#viewDiv .esri-view-surface--inset-outline::after,
#viewDiv .esri-view-surface--inset-outline:focus::after,
#viewDiv .esri-view-surface--inset-outline:focus-visible::after {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Catch ArcGIS runtime class variants that include inset-outline naming. */
#viewDiv [class*="inset-outline"],
#viewDiv [class*="inset-outline"]:focus,
#viewDiv [class*="inset-outline"]:focus-visible,
#viewDiv [class*="inset-outline"]:focus-within,
#viewDiv [class*="inset-outline"]::before,
#viewDiv [class*="inset-outline"]::after,
#viewDiv [class*="inset-outline"]:focus::before,
#viewDiv [class*="inset-outline"]:focus::after,
#viewDiv [class*="inset-outline"]:focus-visible::before,
#viewDiv [class*="inset-outline"]:focus-visible::after {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Final hard-stop for focus ring artifacts on the map surface itself. */
#viewDiv .esri-view,
#viewDiv .esri-view-root,
#viewDiv .esri-view-surface,
#viewDiv .esri-view-surface:focus,
#viewDiv .esri-view-surface:focus-visible,
#viewDiv .esri-view-surface:focus-within,
#viewDiv canvas,
#viewDiv canvas:focus,
#viewDiv canvas:focus-visible {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep ArcGIS map controls below the UserSpice top nav. */
.esri-ui-top-left,
.esri-ui-top-right {
  /* top: calc(var(--us-nav-height) + 0.5rem) !important; */
}

/* Offcanvas map steps should start below nav and never overlay it. */
#mapSidebar.offcanvas {
  top: var(--us-nav-height);
  height: calc(100% - var(--us-nav-height));
  z-index: 2500;
}

/* Semi-transparent left offcanvas so map is visible behind (light theme) */
#mapSidebar.offcanvas.text-bg-light {
  --bs-bg-opacity: 0.95;
}

/* Left toggle button for Bootstrap offcanvas sidebar */
#accordionToggle {
  position: absolute;
  top: calc(var(--us-nav-height) + 0.75rem);
  left: 0.75rem;
  z-index: 2400;
}

#ui-overlay {
  position: absolute;
  bottom: 6rem;
  right: 1rem;
  left: auto;
  z-index: 10;
}

#ui-card {
  /* Light card-like background over the map */
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
  padding: 0.5rem 0.75rem;
  color: #212529;
  border: 1px solid rgba(0,0,0,0.06);
}

#ui-card {
  width: 280px;
}

.zoom-buttons button {
  flex: 1 1 0;
}

.line-color-row {
  gap: 0.5rem;
}

.line-color-picker {
  width: 2.5rem;
  height: 1rem;
  padding: 0;
  border-radius: 100px;
}

/* Muted text in light UI */
#ui-overlay .text-muted {
  color: #6c757d !important;
}

/* Make search widget fill its container width without distorting layout */
#searchLocator {
    width: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    font-size: 1rem;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Space injected style buttons vertically inside the accordion */
#mapAccordion [data-style-id] {
  margin-bottom: 0.5rem;
}

/* Make injected style buttons show active state consistent with style picker */
#mapAccordion [data-style-id].active {
  color: #fff !important;
  background-color: #555555 !important;
  border-color: #000000 !important;
}

/* Compass inside tool panel, scaled 2x and centered */
#compassContainer .esri-compass {
  transform: scale(2);
  transform-origin: center;
}


#ui-overlay, .esri-sketch__panel{
  display: none;
}

/* Fade overlay over the map for lowering imagery contrast. */
#mapFadeOverlay {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.5; /* default opacity, can be changed via JS */
  pointer-events: none; /* allow interaction with the map beneath */
  z-index: 4; /* below UI controls (which use z-index 10+), above map canvas */
  transition: opacity 200ms ease;
}

/* Visible options panel (compact controls for users) — positioned beside dock */
#optionsPanel {
  /* Position the options panel fixed at the same bottom offset as the dock
     and to the left of the dock column so it appears flush with the dock. */
  position: fixed;
  bottom: var(--dock-bottom-offset, 3.5rem);
  /* place to the left of the dock buttons with a small gap */
  right: calc(var(--dock-right-offset, 1rem) + var(--dock-button-size, 44px) + var(--dock-gap, 0.5rem));
  z-index: 4100; /* above the dock so it visually overlaps correctly */
  width: 220px;
  border-radius: 0.5rem;
  background-color: rgba(255,255,255,0.95);
  color: #212529;
  border: 1px solid rgba(0,0,0,0.06);
}

#optionsPanel.collapsed {
  transform: translateX(8px) translateY(-8px) scale(0.98);
  opacity: 0.85;
}

/* Distinct draggable title bar for the small options panel */
#optionsPanel .options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
  color: #fff;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  cursor: move; /* indicates draggable */
  user-select: none;
}

#optionsPanel .options-header .options-title { font-weight: 600; }

#optionsPanel .options-header .btn-close {
  filter: invert(100%); /* ensure white icon */
  opacity: 0.95;
}

/* When the panel is moved we keep subtle box shadow and ensure it remains draggable */
#optionsPanel[style] { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08); }

/* Dock column: vertically stacked dock buttons placed above the map attribution/footer */
.dock-column {
  position: fixed;
  right: var(--dock-right-offset, 1rem);
  /* anchor at bottom-right by default; adjust with CSS variable */
  bottom: var(--dock-bottom-offset, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap, 0.5rem);
  align-items: flex-end;
  z-index: 4000; /* above map controls and Esri footer */
}

.options-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffffff,#f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12);
  cursor: pointer;
  color: #0d6efd;
  border: 1px solid rgba(0,0,0,0.06);
  transition: none;
}
.options-dock-btn:focus { outline: 3px solid rgba(13,110,253,0.15); }
.options-dock-btn:hover { transform: none; }
.options-dock-btn i, .help-dock-btn i { font-size: 18px; line-height: 1; }

.help-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffffff,#f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12);
  cursor: pointer;
  color: #0d6efd;
  border: 1px solid rgba(0,0,0,0.06);
  transition: none;
}
.help-dock-btn:focus { outline: 3px solid rgba(13,110,253,0.15); }
.help-dock-btn:hover { transform: none; }
.help-dock-btn i { font-size: 18px; line-height: 1; }

/* Print dock button matches other dock styles */
.print-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffffff,#f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12);
  cursor: pointer;
  color: #0d6efd;
  border: 1px solid rgba(0,0,0,0.06);
  transition: none;
}
.print-dock-btn:focus { outline: 3px solid rgba(13,110,253,0.15); }
.print-dock-btn:hover { transform: none; }
.print-dock-btn i { font-size: 18px; line-height: 1; }

/* Hide the original Esri print toggle button (we provide a docked replacement) */
button[title="Print map"], .esri-widget-button[title="Print map"] { display: none !important; }

/* Hide legacy HTML zoom buttons when using native ArcGIS Zoom widget */
#zoomInBtn, #zoomOutBtn { display: none !important; }

/* Customizable modal backdrop + dock layout variables */
:root {
  /* default opacity for modal backdrop; can be changed at runtime via
     window.setModalBackdropOpacity(v) or by updating this variable with JS/CSS */
  --modal-backdrop-opacity: 0.6;
  /* Dock layout defaults */
  --dock-right-offset: 1rem; /* distance from right edge to dock */
  --dock-bottom-offset: 3.5rem; /* distance from bottom to first dock button */
  --dock-button-size: 44px; /* width/height of dock buttons */
  --dock-gap: 0.5rem; /* gap between dock and options panel */
}

/* Modal backdrop should respect the CSS variable rather than hard‑coding a value. */
.modal-backdrop.show {
  background-color: rgba(0,0,0,var(--modal-backdrop-opacity)) !important;
  opacity: var(--modal-backdrop-opacity) !important;
}


p.help-image {
  margin: 1em auto;
  text-align: center;
}

p.help-image img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Video inside the welcome/help steps (styled here rather than inline) */
.welcome-steps .help-image video,
.help-image video.help-video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
  margin: 0 auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Step indicator dots in the welcome modal footer */
.welcome-steps-dots {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
}
.welcome-steps-dots button {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  opacity: 0.6;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.welcome-steps-dots button.active {
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(13,110,253,0.08) inset;
}
.welcome-steps-dots button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(13,110,253,0.15);
}

/* Ensure the modal controls align well on small screens */
.welcome-step-controls { gap: 0.5rem; }
.welcome-step-controls .btn { min-width: 86px; }

/* PDF preview overlay + controls (used by client-side 80/20 export) */
.pdf-preview-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1em;
  pointer-events: none;
  z-index: 70;
}

.pdf-preview-bounds {
  position: absolute;
  border: 6px dotted #fff;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  background: transparent;
}

.pdf-preview-help {
  position: absolute;
  left: 50%;
  bottom: 1.5em;
  transform: translateX(-50%);
  pointer-events: auto;
  background: rgba(0,0,0,0.72);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  max-width: 360px;
  line-height: 1.35;
}

.pdf-preview-scale-compass {
  position: absolute;
  pointer-events: none;
  z-index: 71;
  display: none;
}

.pdf-preview-scale-label {
  position: absolute;
  transform: translateX(-50%);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pdf-preview-scale-bar {
  position: absolute;
  border-top: 2px solid #000;
  box-sizing: border-box;
}

.pdf-preview-scale-bar::before,
.pdf-preview-scale-bar::after {
  content: '';
  position: absolute;
  width: 0;
  border-left: 2px solid #000;
  height: calc(var(--tick-h, 4px) * 2);
  top: calc(var(--tick-h, 4px) * -1);
}

.pdf-preview-scale-bar::before {
  left: 0;
}

.pdf-preview-scale-bar::after {
  right: 0;
}

.pdf-preview-compass {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.pdf-preview-help-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.pdf-preview-help-text {
  margin-bottom: 8px;
}

.pdf-preview-help-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pdf-preview-btn {
  pointer-events: auto;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
}

.pdf-preview-btn-primary {
  background: #0d6efd;
  font-weight: 600;
}

.pdf-preview-btn-secondary {
  background: #6c757d;
}

.accordion-button:disabled {
    background: lightgray;
    color: gray;
}

/* Styles for the draw hint panel used by the map UI */
.draw-hint-panel {
  position: fixed;
  left: 50%;
  bottom: 2em;
  transform: translateX(-50%);
  z-index: 4000;
  display: none;
  padding: 10px 14px;
  background: rgba(33,37,41,0.92);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.draw-hint-panel.visible {
  display: block;
}

/* Small accessibility tweak: ensure sufficient contrast when visible */
.draw-hint-panel:focus {
  outline: 2px solid rgba(255,255,255,0.15);
  outline-offset: 2px;
}