/**
 * =============================================================================
 * RANGE CARD PANEL - Floating Container Styles
 * =============================================================================
 * 
 * The panel that holds the paper Range Card.
 * Provides: blur edges, drag header, minimize/close controls.
 * 
 * The Range Card itself uses range-card-paper.css for the paper aesthetic.
 */

/* =============================================================================
   PANEL CONTAINER - No header bar, just the paper card
   ============================================================================= */

.range-card-panel {
  position: fixed;
  /* Center in viewport with margin */
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;

  /* Glass/blur edge effect - paper lifts off the dark canvas */
  background: transparent;
  border-radius: 8px;

  /* Shadow creates depth - paper floating above the topo map */
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 100px rgba(0, 0, 0, 0.2);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.range-card-panel.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.range-card-panel.dragging {
  transition: none;
  cursor: grabbing;
}

.range-card-panel.minimized {
  transform: scale(0.1);
  opacity: 0.3;
}

/* =============================================================================
   CLOSE BUTTON - Injected into Range Card header next to kebab

   Layout (right side of header, 8-point grid):
   |-- Rifle Total field --|-- 8px gap --|-- × 24px --|-- 8px gap --|-- ⋮ 24px --|-- 8px --|
   ============================================================================= */

.range-card-close-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Position: 8px from right edge + 24px kebab + 8px gap = 40px */
  right: 40px;
  z-index: 100;

  /* 24×24 hit target (8-point grid) */
  width: 24px;
  height: 24px;

  /* Subtle appearance matching kebab */
  background: transparent;
  border: none;
  border-radius: 6px;

  /* Typography: 16px × symbol, centered */
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: var(--ink-pencil, #3a3a3a);
  opacity: 0.4;

  cursor: pointer;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}

.range-card-close-btn:hover {
  opacity: 1;
  background: rgba(139, 0, 0, 0.12);
  color: var(--ink-red, #8b0000);
}

.range-card-close-btn:active {
  opacity: 0.8;
  transform: translateY(-50%) scale(0.95);
}

/* =============================================================================
   PANEL BODY (Contains the Range Card)
   ============================================================================= */

.range-card-panel-body {
  /* Flexible width - let range card control its size */
  min-width: 400px;
  max-width: 95vw;
  background: transparent;
  border-radius: 8px;
}

/* The Range Card inside the panel - open fully expanded by default */
.range-card-panel-body .range-card {
  /* Override to open at full width */
  max-width: 95vw;
  width: 920px;
}

/* Resize handle - enabled for user resize */
.range-card-panel-body .resize-handle {
  /* Allow resize */
}

/* Loading state */
.range-card-loading {
  padding: 60px 40px;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  color: rgba(60, 50, 40, 0.6);
}

/* Error state */
.range-card-error {
  padding: 40px;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #8b0000;
}

/* =============================================================================
   BACKDROP BLUR (Optional - for modal-like focus)
   ============================================================================= */

.range-card-panel.visible::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: -1;
  pointer-events: none;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .range-card-panel {
    width: 98%;
    max-height: 95vh;
    top: 2%;
    left: 1%;
    transform: none;
  }

  .range-card-panel.visible {
    transform: none;
  }
}