/* ================================
   OMEKA FULLSCREEN RESET
   ================================ */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Hide Omeka theme chrome */
body>header,
body>footer,
#content>header,
#content>footer,
.powered-by {
  display: none !important;
}

/* ================================
   ROOT CONTAINER
   ================================ */

#Echoes-root {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  overflow: hidden;
}

/* Hide handle on desktop */
#filter-handle {
  display: none;
}

/* ================================
   MAP AREA
   ================================ */

#Echoes-map-wrap {
  position: absolute;
  height: 100%;
  inset: 0;
}

#map {
  position: absolute;
  inset: 0;
  background: #dbeafe;
}

.leaflet-container {
  width: 100%;
  height: 100%;
}

#map-controls {
  width: 100%;
  height: 100%;
}

#map-controls svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ================================
   DOT MATRIX
   ================================ */

#dot-matrix {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

/* ================================
   TIMELINE BRUSH
   ================================ */

.custom-selection {
  fill: var(--timeline-brush-fill, rgba(234, 179, 8, 0.25)) !important;
}

.handle-left line,
.handle-right line {
  stroke: var(--timeline-brush-stroke, #ca8a04) !important;
}

.handle-left path,
.handle-right path,
.handle-left .intersection-marker,
.handle-right .intersection-marker {
  fill: var(--timeline-brush-stroke, #ca8a04) !important;
}

.histogram-layer rect {
  fill: var(--timeline-histogram-fill, rgba(156, 163, 175, 0.85)) !important;
}

.density-fill-path {
  fill: var(--timeline-density-fill, rgba(59, 130, 246, 0.35)) !important;
  stroke: var(--timeline-density-stroke, rgb(37, 99, 235)) !important;
}


/* ================================
   ITEMSET CHIP FIX (OMEKA OVERRIDE)
   ================================ */

#itemset-chips .tm-chip-remove {
  min-height: unset !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
}

.x-axis-major line {
  stroke-width: 2px;
  stroke: #111827;
}

.custom-brush-ui {
  pointer-events: none;
}

.knife {
  fill: #111827;
}

.dark .knife {
  fill: #e5e7eb;
}

/* Wrapper prevents Leaflet default white box  */
.spatial-radius-wrapper {
  background: transparent !important;
  border: none !important;
}

/* Entire label container */
.radius-line-label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Text pill */
.radius-text {
  font-size: 11px;
  font-weight: 600;
  color: #111111;
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:root {
  --right-panel-width: 340px;
  --right-panel-offset: 0px;
}


#timeline-wrapper {
  position: absolute;
  bottom: 16px;
  left: 372px;
  right: 372px;
  transition: transform 0.3s ease;
  will-change: transform;
  z-index: 26000;
}

.leaflet-top.leaflet-right {
  position: absolute !important;

  top: 12px !important;
  right: calc(var(--right-panel-offset, 0px) + 18px) !important;

  display: flex;
  flex-direction: column;
  gap: 12px;

  transition:
    right 0.28s ease,
    transform 0.28s ease;

  z-index: 1000 !important;
}

.leaflet-control-scale {
  position: absolute !important;
  top: -30px;
  /* sits ABOVE timeline */
  right: 16px;
  z-index: 1000;
}

#map {
  z-index: 1;
}

.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
  z-index: 10 !important;
}

.h-\[40px\].flex button,
.h-\[40px\].flex span,
.h-\[40px\].flex input {
  pointer-events: auto;
}

#Echoes-timeline-inner button,
#Echoes-timeline-inner input,
#Echoes-timeline-inner select {
  pointer-events: auto;
}

#Echoes-timeline-wrap button,
#Echoes-timeline-wrap input,
#Echoes-timeline-wrap select {
  pointer-events: auto;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.leaflet-control {
  margin-top: 0 !important;
  margin-right: 0 !important;
}

.echo-control {
  @apply w-[42px] h-[42px] flex items-center justify-center rounded-full bg-white shadow-[0_4px_16px_rgba(0, 0, 0, 0.35)] transition-all duration-300;
}

.north-arrow-control {
  display: none;
}

/* DARK MODE */
.dark .echo-control {
  @apply bg-slate-800 shadow-[0_4px_16px_rgba(0, 0, 0, 0.8)];
}

/* Toggle Switch Custom Styling */
.echoes-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  transform: scale(0.9);
  transform-origin: right;
}

.echoes-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.echoes-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: .3s;
  border-radius: 34px;
}

.echoes-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.echoes-switch input:checked+.echoes-slider {
  background-color: #2563eb;
}

.echoes-switch input:checked+.echoes-slider:before {
  transform: translateX(20px);
}

.spatial-feature-disabled {
  position: relative;
  pointer-events: none;
  user-select: none;
}

.spatial-feature-disabled::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 50;
  border-radius: 8px;
}

/* DARK MODE: Disabled Spatial Feature */
.dark .spatial-feature-disabled::after {
  background: rgba(0, 0, 0, 0.45);
}

/* DARK MODE: Context Popup Overrides */
.dark .echo-context-popup .leaflet-popup-content-wrapper,
.dark .echo-context-popup .leaflet-popup-tip {
  background: #1f2937;
  color: #f3f4f6;
}

.dark .echo-context-popup .leaflet-popup-close-button {
  color: #9ca3af;
}

.dark .echo-context-popup .leaflet-popup-close-button:hover {
  color: #f3f4f6;
}

/* Custom thin scrollbar for horizontal scrolling elements */
.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  /* gray-400 with opacity */
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.8);
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* ================================
   TIMELINE DRAG HANDLE
   ================================ */

.timeline-drag-handle {
  opacity: 0;
  margin-right: -12px;
  touch-action: none;
  transition: opacity 0.3s ease, margin-right 0.3s ease;
  transition-delay: 0.5s;
  /* Hide quickly when not hovering */
}

.timeline-controls-outside:hover .timeline-drag-handle,
.timeline-controls-outside.is-dragging .timeline-drag-handle {
  opacity: 1;
  margin-right: 0;
  transition-delay: 1s;
  /* Wait 1s before appearing on hover */
}

.timeline-controls-outside.is-dragging .timeline-drag-handle {
  transition-delay: 0s;
  /* Instantly visible while dragging */
}

/* ================================
   TIMELINE ROTATE HANDLE
   ================================ */

.timeline-rotate-handle {
  opacity: 0;
  margin-left: -12px;
  touch-action: none;
  transition: opacity 0.3s ease, margin-left 0.3s ease;
  transition-delay: 0.5s;
  /* Hide quickly when not hovering */
}

.timeline-controls-outside:hover .timeline-rotate-handle,
.timeline-controls-outside.is-dragging .timeline-rotate-handle {
  opacity: 1;
  margin-left: 0;
  transition-delay: 1s;
  /* Wait 1s before appearing on hover */
}

.timeline-controls-outside.is-dragging .timeline-rotate-handle {
  transition-delay: 0s;
  /* Instantly visible while dragging */
}

/* ================================
   TIMELINE VERTICAL LAYOUT
   ================================ */

.timeline-controls-panel {
  width: 232px;
  height: 64px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.timeline-controls-outside {
  transform-origin: center center !important;
  transition: margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-controls-outside:not(.is-dragging) {
  transition: margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-controls-outside:not([style*="position: absolute"]).layout-vertical {
  margin-top: -84px;
}

.timeline-controls-outside[style*="position: absolute"].layout-vertical {
  margin-top: -84px;
  margin-left: 84px;
}

.timeline-controls-outside.layout-vertical .timeline-controls-panel {
  width: 64px;
  height: 232px;
}

.timeline-controls-inner {
  position: relative;
  width: 216px;
  height: 48px;
  flex-shrink: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-controls-outside.layout-vertical .timeline-controls-inner {
  width: 48px;
  height: 216px;
}

/* Base styles for all buttons */
.timeline-controls-inner>* {
  position: absolute !important;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, transform 0.2s, filter 0.2s, opacity 0.2s !important;
  margin: 0 !important;
}

/* Horizontal Layout Positions — gap: 8px, button: 48px, step: 56px */
#timeline-play,
#timeline-pause {
  left: 0px;
  top: 0px;
}

#timeline-speed {
  left: 56px;
  top: 0px;
}

#timeline-zoom-rocker {
  left: 112px;
  top: 0px;
}

#timeline-record {
  left: 168px;
  top: 0px;
}

/* Vertical Layout Positions — gap: 8px, button: 48px, step: 56px */
.timeline-controls-outside.layout-vertical #timeline-play,
.timeline-controls-outside.layout-vertical #timeline-pause {
  left: 0px;
  top: 0px;
}

.timeline-controls-outside.layout-vertical #timeline-speed {
  left: 0px;
  top: 56px;
}

.timeline-controls-outside.layout-vertical #timeline-zoom-rocker {
  left: 0px;
  top: 112px;
}

.timeline-controls-outside.layout-vertical #timeline-record {
  left: 0px;
  top: 168px;
}

/* ================================
   GLOW EFFECTS
   ================================ */

.glow-play {
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6)) !important;
}

.glow-pause {
  filter: drop-shadow(0 0 6px rgba(180, 83, 9, 0.6)) !important;
}

.glow-speed-05 {
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6)) !important;
}

.glow-speed-10 {
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.6)) !important;
}

.glow-speed-15 {
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.6)) !important;
}

.glow-speed-20 {
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6)) !important;
}

.glow-zoom {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7)) !important;
}

/* ============================================================
   ECHOES FILTER PANEL & UI OVERRIDES
   (migrated from echoes-block.phtml inline <style> blocks)
   ============================================================ */

/* --------------------------------
   Viz Select Dropdown
   -------------------------------- */
.viz-select-centered {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 0 2rem 0 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem !important;
  transition: all 0.2s ease !important;
  height: 30px !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-align: left !important;
  width: 140px !important;
}

.viz-select-centered:hover {
  border-color: #9ca3af !important;
  background-color: #f9fafb !important;
}

.viz-select-centered:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* --------------------------------
   Block Omeka Theme CSS from bleeding into Echoes Modals
   -------------------------------- */
#info-note-overlay,
#settings-overlay {
  z-index: 999999 !important;
  font-family: 'Lato', sans-serif !important;
}

/* Filter panel tab buttons — block theme black hover.
   High-specificity scoped selectors so no outside theme rule can override. */
#filter-panel .filter-tab-btn,
#filter-panel .filter-tab-btn:hover,
#filter-panel .filter-tab-btn:focus,
#filter-panel .filter-tab-btn:active,
#filter-panel .filter-tab-btn:visited,
#filter-panel .filter-tab-btn:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Active tab: always show white text (set by JS via .text-white) */
#filter-panel .filter-tab-btn.text-white,
#filter-panel .filter-tab-btn.text-white:hover,
#filter-panel .filter-tab-btn.text-white:focus,
#filter-panel .filter-tab-btn.text-white:active {
  color: #ffffff !important;
}

/* Inactive tabs: always show slate-500 text */
#filter-panel .filter-tab-btn.text-slate-500,
#filter-panel .filter-tab-btn.text-slate-500:hover,
#filter-panel .filter-tab-btn.text-slate-500:focus,
#filter-panel .filter-tab-btn.text-slate-500:active {
  color: #64748b !important;
}

/* --------------------------------
   Settings Button — expanding pill with inline label
   -------------------------------- */
@keyframes btnHeartbeat {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.1);
    box-shadow: 0 5px 18px rgba(37, 99, 235, 0.4), 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
    box-shadow: 0 5px 18px rgba(37, 99, 235, 0.4), 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

#global-settings-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: inherit !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10) !important;
  cursor: pointer !important;
  outline: none !important;
  overflow: hidden !important;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  text-decoration: none !important;
  animation: btnHeartbeat 2.5s infinite ease-in-out !important;
}

#global-settings-btn:hover,
#global-settings-btn:focus,
#global-settings-btn:active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: inherit !important;
  box-shadow: 0 5px 18px rgba(37, 99, 235, 0.22), 0 1px 4px rgba(0, 0, 0, 0.10) !important;
  text-decoration: none !important;
  animation: none !important;
  transform: scale(1.05) !important;
}

#settings-btn-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  filter: invert(29%) sepia(98%) saturate(1200%) hue-rotate(205deg) brightness(95%) contrast(97%) !important;
  opacity: 0.85 !important;
  transition: opacity 180ms ease, transform 500ms ease !important;
}

#global-settings-btn:hover #settings-btn-icon {
  opacity: 1 !important;
  transform: rotate(60deg) !important;
}

#settings-btn-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.05em !important;
  color: #1d4ed8 !important;
  white-space: nowrap !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-width 250ms ease, opacity 180ms ease, margin-left 250ms ease !important;
  transition-delay: 0ms !important;
  margin-left: 0 !important;
}

#global-settings-btn:hover #settings-btn-label {
  max-width: 60px !important;
  opacity: 1 !important;
  margin-left: 5px !important;
  transition-delay: 300ms !important;
}

/* --------------------------------
   Global Settings Overlay Font
   -------------------------------- */
#global-settings-overlay,
#global-settings-overlay * {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --------------------------------
   Informative Note Modal
   -------------------------------- */
#info-note-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#info-note-overlay h2,
#info-note-overlay h3,
#info-note-overlay p,
#info-note-overlay a,
#settings-overlay h2,
#settings-overlay h3,
#settings-overlay p,
#settings-overlay a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  border: none !important;
  background: transparent !important;
}

#info-note-overlay a,
#settings-overlay a {
  text-decoration: none !important;
  box-shadow: none !important;
}

#info-note-overlay a:hover,
#settings-overlay a:hover {
  text-decoration: underline !important;
}

/* --------------------------------
   Global Settings Button & Tab Buttons
   -------------------------------- */
#global-settings-overlay .settings-tab-btn,
#global-settings-overlay .settings-tab-btn:hover,
#global-settings-overlay .settings-tab-btn:focus,
#global-settings-overlay .settings-tab-btn:active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#global-settings-overlay .settings-tab-btn {
  color: #64748b !important;
  /* slate-500 */
}

#global-settings-overlay .settings-tab-btn:hover {
  color: #334155 !important;
  /* slate-700 */
}

#global-settings-overlay .settings-tab-btn.active,
#global-settings-overlay .settings-tab-btn.active:hover {
  color: #ffffff !important;
  /* white on indigo pill */
}

/* --------------------------------
   Settings Tab Fade-In Animation
   -------------------------------- */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content-enter {
  animation: fadeInSlideUp 0.3s ease-out forwards;
}

/* ================================
   SORTABLE DRAG & DROP ANIMATIONS
   ================================ */

.sortable-chosen {
  opacity: 1 !important;
  z-index: 99999 !important;
  cursor: grabbing !important;
  overflow: visible !important; /* Allow the scaled header shadow to overflow */
}

/* Apply the lift effect ONLY to the header to prevent overall card height change (jitter) */
.sortable-chosen .filter-card-header {
  transform: scale(1.02) !important;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  position: relative !important;
  z-index: 10 !important;
  will-change: transform !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease-out !important;
}

.sortable-chosen * {
  cursor: grabbing !important;
}

.sortable-ghost {
  opacity: 0.15 !important;
  background-color: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  box-shadow: none !important;
  transform: scale(1) !important;
}