/* ============================================================================
   PANELS - Floating Panel Container, Header, Title, Close Button
   ============================================================================

   CSS classes for the floating panel system. These replace the JS-based
   panel styling that was previously applied via PANEL_STYLES.xxx() functions
   and three dynamically injected <style> blocks.

   Applied by: 05-panel_creation/01-panel_creation.js (classList.add)

   Sections:
     1. Panel container     (.fp-container)
     2. Panel content       (.fp-content)
     3. Panel header        (.fp-header)
     4. Panel title         (.fp-title)
     5. Panel close button  (.fp-close-btn)
     6. Panel backdrop      (.fp-backdrop)
     7. Scrollbar styles    (previously injected via JS)
     8. Responsive / mobile (previously injected via JS)
   ============================================================================ */

/* ============================================================================
   1. PANEL CONTAINER (.fp-container)
   Replaces: window.PANEL_STYLES.panelContainer()
   + injected per-panel overrides (border-radius, overflow, flex-direction)
   ============================================================================ */

.fp-container {
  display: none;
  flex-direction: column;
  position: fixed;
  width: var(--panel-default-width);
  max-width: calc(100vw - calc(var(--panel-safety-margin) * 2));
  background: var(--panel-bg);
  color: var(--panel-text-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity var(--panel-animation-duration) var(--panel-animation-timing),
              transform var(--panel-animation-duration) var(--panel-animation-timing);
  z-index: var(--z-tooltip);
  opacity: 0;
  backdrop-filter: blur(var(--panel-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  max-height: calc(100vh - 100px);
  /* overflow: hidden clips content; scrolling happens inside .fp-content */
  overflow: hidden;
}

/* Unused for now — animation system manages display/opacity via inline style.
   Kept for potential future migration of the animation layer. */
.fp-container--visible {
  display: flex;
  opacity: 1;
}

/* ============================================================================
   2. PANEL CONTENT CONTAINER (.fp-content)
   Replaces: window.PANEL_STYLES.contentContainer()
   + contentContainer.style.padding / .flex / .minHeight overrides
   + injected .panel-content-container flex/overflow overrides
   ============================================================================ */

.fp-content {
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
  word-break: break-word;
  background: var(--panel-content-bg);
  backdrop-filter: blur(var(--panel-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  /* Flex child of .fp-container — fills remaining height after header */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   3. PANEL HEADER (.fp-header)
   Replaces: window.PANEL_STYLES.panelHeader()
   ============================================================================ */

.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.7));
  border-bottom: 1px solid var(--panel-border);
}

/* ============================================================================
   4. PANEL TITLE (.fp-title)
   Replaces: window.PANEL_STYLES.panelTitle()
   ============================================================================ */

.fp-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--panel-text-primary);
  letter-spacing: -0.3px;
  flex: 1;
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   5. PANEL CLOSE BUTTON (.fp-close-btn)
   Replaces: window.PANEL_STYLES.closeButton()
   ============================================================================ */

.fp-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 6px;
}

/* Focus ring for keyboard navigation */
.fp-close-btn:focus-visible {
  outline: 2px solid var(--panel-primary);
  outline-offset: 2px;
}

/* ============================================================================
   6. PANEL BACKDROP (.fp-backdrop)
   Replaces: inline backdrop styles in panel_creation.js
   Dynamic values (background opacity, z-index) set via inline style in JS.
   ============================================================================ */

.fp-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--panel-animation-duration) var(--panel-animation-timing);
  pointer-events: auto;
}

/* ============================================================================
   7. SCROLLBAR STYLES
   Replaces: two dynamically injected <style> blocks in panel_creation.js
   (per-panel scrollbar + global content-container scrollbar)
   ============================================================================ */

/* --- Panel container scrollbar (darker thumb) --- */
.fp-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.fp-container::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
  margin: 5px;
}

.fp-container::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.4);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.fp-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 120, 0.6);
}

/* Firefox scrollbar — all descendants */
.fp-container * {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
}

/* --- Content container scrollbar (lighter/white thumb) --- */
.fp-container .fp-content::-webkit-scrollbar {
  width: 8px;
}

.fp-container .fp-content::-webkit-scrollbar-track {
  background: transparent;
}

.fp-container .fp-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.fp-container .fp-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* ============================================================================
   8. RESPONSIVE / MOBILE
   Replaces: per-panel @media block injected in panel_creation.js
   !important needed to override inline style.width / style.right / style.transform
   set by the JS animation and drag systems.
   ============================================================================ */

@media (max-width: 480px) {
  .fp-container {
    width: calc(100vw - 40px) !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    max-height: calc(100vh - 100px);
  }

  .fp-container .fp-content {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .fp-container.open {
    transform: translateX(50%) translateY(0) !important;
  }

  .fp-container.closing {
    transform: translateX(50%) translateY(-10px) !important;
  }
}


/* ============================================================================
   9. SEARCH PANEL
   Replaces: inline styles in 02-search_panel/01-search_location.js

   Migrated from (Priority 7D — search panel inline styles → CSS classes):
     - panelContent template: input wrapper, input field, search icon, results div
     - displaySearchResults(): result item, result title, result subtitle
     - searchLocations(): status messages (loading, empty, no-results, error)
     - mouseover/mouseout handlers on result items → :hover pseudo-class
     - onOpen/onClose: searchButton.style.opacity → .is-dimmed utility class
   ============================================================================ */

/* Input wrapper — contains the text input and positioned search icon */
.search-input-wrapper {
  position: relative;
  margin-bottom: 12px;
}

/* Search text input */
.search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #1e1e1e;
  color: #fff;
}

/* Positioned search magnifying glass icon */
.search-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Scrollable results container */
.search-results {
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
}

/* Individual search result row */
.search-result-item {
  padding: 12px;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Hover state — replaces mouseover/mouseout JS handlers */
.search-result-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Result primary name (first part of display_name) */
.search-result__title {
  font-weight: 500;
  margin-bottom: 4px;
}

/* Result full address / subtitle */
.search-result__subtitle {
  font-size: 12px;
  color: #999;
}

/* Status messages (loading, empty prompt, no results) */
.search-status {
  padding: 12px;
  color: #999;
  text-align: center;
}

/* Error variant — red text */
.search-status--error {
  color: #ff4444;
}