/* ============================================================
   LUMIVALE HEX MAP - EDIT MODE STYLES
   Editor Panel, Form Inputs, Modal, Entity Lists
   ============================================================ */

/* ===========================================================
   EDIT MODE ACTIVE STATE (body.edit-mode)
   =========================================================== */
body.edit-mode .hex-cell:not(.unexplored) {
  fill:         rgba(254, 243, 99, 0.16) !important;
  stroke:       rgba(234, 179, 8,  0.32) !important;
  stroke-width: 1 !important;
}

body.edit-mode .hex-cell:not(.unexplored).hex-hover {
  fill:         rgba(254, 243, 99, 0.34) !important;
  stroke:       rgba(234, 179, 8,  0.7)  !important;
  stroke-width: 2 !important;
  filter:       brightness(1.25) !important;
  cursor:       pointer !important;
}

body.edit-mode .hex-cell.unexplored {
  fill:         rgba(70, 60, 0, 0.52) !important;
  stroke:       rgba(234, 179, 8, 0.12) !important;
}

/* Override blink overlays in edit mode (still show them) */
body.edit-mode .hex-blink-overlay {
  animation: blinkRedPulse 2s ease-in-out infinite;
}

/* ===========================================================
   EDIT MODAL
   =========================================================== */
#edit-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:         300;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.22s ease;
}

#edit-modal.open {
  opacity:        1;
  pointer-events: all;
}

#edit-modal-content {
  width:          660px;
  max-width:      96vw;
  max-height:     88vh;
  background:     var(--bg-panel);
  border:         1px solid rgba(234, 179, 8, 0.18);
  border-radius:  var(--radius-xl);
  box-shadow:     var(--panel-shadow), 0 0 50px rgba(234, 179, 8, 0.08);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  animation:      editModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes editModalIn {
  from { transform: scale(0.92) translateY(24px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* Modal Header */
#edit-modal-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background:    rgba(234, 179, 8, 0.04);
  flex-shrink:   0;
}

.modal-icon { font-size: 18px; }

#edit-modal-title {
  font-family: 'Cinzel', serif;
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-primary);
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy / Paste buttons */
.modal-action-btns {
  display: flex;
  gap:     6px;
}

.modal-action-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 11px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border-subtle);
  background:    rgba(255, 255, 255, 0.04);
  color:         var(--text-muted);
  font-size:     11.5px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

.modal-action-btn.copy-btn:hover {
  background:   rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color:        var(--accent-purple);
}

.modal-action-btn.paste-btn:hover {
  background:   var(--accent-cyan-dim);
  border-color: var(--border-glow);
  color:        var(--accent-cyan);
}

#btn-close-edit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-muted);
  font-size:       15px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
  flex-shrink:     0;
}

#btn-close-edit:hover {
  background:   rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color:        #ef4444;
}

/* ===========================================================
   EDIT TABS
   =========================================================== */
#edit-tabs {
  display:       flex;
  gap:           2px;
  padding:       10px 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink:   0;
}

.edit-tab-btn {
  padding:       8px 14px;
  border:        none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background:    transparent;
  color:         var(--text-muted);
  font-family:   'Inter', sans-serif;
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  white-space:   nowrap;
}

.edit-tab-btn:hover {
  color:      var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.edit-tab-btn.active {
  color:             rgba(234, 179, 8, 0.95);
  border-bottom-color: rgba(234, 179, 8, 0.85);
  background:        rgba(234, 179, 8, 0.05);
}

/* ===========================================================
   EDIT TAB CONTENT
   =========================================================== */
#edit-tab-content {
  flex:      1;
  overflow-y: auto;
  padding:   20px;
}

/* Form groups */
.edit-form-group { margin-bottom: 18px; }

.edit-label {
  display:        block;
  font-size:      10.5px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  7px;
}

.edit-input {
  width:       100%;
  padding:     9px 13px;
  background:  rgba(255, 255, 255, 0.05);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color:       var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  transition:  all var(--transition-fast);
}

.edit-input:focus {
  outline:    none;
  border-color: rgba(234, 179, 8, 0.42);
  background: rgba(234, 179, 8, 0.04);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.edit-input.small {
  width:  auto;
  min-width: 90px;
  flex-shrink: 0;
}

.edit-input::placeholder { color: var(--text-muted); }

.edit-select {
  width:            100%;
  padding:          9px 13px;
  background:       rgba(14, 14, 24, 0.95);
  border:           1px solid var(--border-subtle);
  border-radius:    var(--radius-md);
  color:            var(--text-primary);
  font-family:      'Inter', sans-serif;
  font-size:        13px;
  cursor:           pointer;
  appearance:       none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 13px center;
  transition:       all var(--transition-fast);
}

.edit-select:focus {
  outline:    none;
  border-color: rgba(234, 179, 8, 0.42);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.edit-select option { background: #1a1a2e; }

/* Range slider */
.edit-range {
  width:      100%;
  -webkit-appearance: none;
  appearance: none;
  height:     4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  cursor:     pointer;
  outline:    none;
}

.edit-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:        18px;
  height:       18px;
  border-radius: 50%;
  background:   rgba(234, 179, 8, 0.9);
  border:       2px solid rgba(255, 255, 255, 0.2);
  box-shadow:   0 0 10px rgba(234, 179, 8, 0.5);
  cursor:       pointer;
}

.edit-range::-moz-range-thumb {
  width:        18px;
  height:       18px;
  border-radius: 50%;
  background:   rgba(234, 179, 8, 0.9);
  border:       2px solid rgba(255, 255, 255, 0.2);
  box-shadow:   0 0 10px rgba(234, 179, 8, 0.5);
  cursor:       pointer;
}

/* Textarea */
.edit-textarea {
  width:       100%;
  padding:     9px 13px;
  background:  rgba(255, 255, 255, 0.05);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color:       var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  resize:      vertical;
  min-height:  80px;
  transition:  all var(--transition-fast);
}

.edit-textarea:focus {
  outline:    none;
  border-color: rgba(234, 179, 8, 0.42);
  background: rgba(234, 179, 8, 0.04);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.edit-textarea::placeholder { color: var(--text-muted); }

/* Checkboxes */
.edit-checkboxes {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.edit-check-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   13px;
  color:       var(--text-secondary);
}

.edit-check-label input[type="checkbox"] {
  width:       16px;
  height:      16px;
  accent-color: rgba(234, 179, 8, 0.9);
  cursor:      pointer;
}

/* Biomes grid */
.biomes-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   6px;
}

.biome-check-label {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     6px 10px;
  background:  rgba(255, 255, 255, 0.03);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor:      pointer;
  font-size:   12px;
  color:       var(--text-secondary);
  transition:  all var(--transition-fast);
}

.biome-check-label:hover {
  background:   rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.biome-check-label input[type="checkbox"] {
  accent-color: rgba(234, 179, 8, 0.9);
  cursor:       pointer;
}

/* Blink red toggle */
.edit-blink-btn {
  padding:       9px 18px;
  border-radius: var(--radius-md);
  border:        1px solid var(--border-subtle);
  background:    rgba(255, 255, 255, 0.04);
  color:         var(--text-muted);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

.edit-blink-btn.active {
  background:   rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color:        #f87171;
  animation:    blinkBtnGlow 1.8s ease-in-out infinite;
}

@keyframes blinkBtnGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%       { box-shadow: 0 0 14px rgba(239, 68, 68, 0.45); }
}

/* Color picker */
.color-picker-row {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

.edit-color {
  width:         52px;
  height:        38px;
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background:    none;
  cursor:        pointer;
  padding:       3px;
  transition:    border-color var(--transition-fast);
}

.edit-color:hover { border-color: rgba(255,255,255,0.2); }

/* ===========================================================
   ENTITY LISTS
   =========================================================== */
.edit-entity-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
  min-height:     56px;
}

.edit-entity-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 11px;
  background:    rgba(255, 255, 255, 0.035);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition:    all var(--transition-fast);
}

.edit-entity-item:hover {
  background:   rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}

.entity-item-emoji {
  font-size:   18px;
  flex-shrink: 0;
}

.entity-item-name {
  flex:        1;
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-secondary);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-item-id {
  font-size: 11px;
  color:     var(--text-muted);
  flex-shrink: 0;
}

.entity-active-label {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   10.5px;
  color:       var(--text-muted);
  cursor:      pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.entity-active-label input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  cursor:       pointer;
}

.btn-remove-entity {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border:          1px solid rgba(239, 68, 68, 0.2);
  border-radius:   var(--radius-xs);
  background:      rgba(239, 68, 68, 0.06);
  color:           rgba(239, 68, 68, 0.55);
  font-size:       12px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
  flex-shrink:     0;
}

.btn-remove-entity:hover {
  background:   rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color:        #ef4444;
}

.list-empty {
  text-align: center;
  color:      var(--text-muted);
  font-size:  12px;
  padding:    18px;
  font-style: italic;
}

/* ===========================================================
   ADD ENTITY FORM
   =========================================================== */
.edit-add-form {
  padding:       16px;
  background:    rgba(255, 255, 255, 0.018);
  border:        1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.add-form-title {
  font-size:      10.5px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  10px;
}

.add-form-row {
  display:     flex;
  gap:         8px;
  align-items: flex-end;
  flex-wrap:   wrap;
}

.add-form-col {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.btn-add {
  padding:       9px 16px;
  background:    var(--accent-cyan-dim);
  border:        1px solid var(--border-glow);
  border-radius: var(--radius-md);
  color:         var(--accent-cyan);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  white-space:   nowrap;
  flex-shrink:   0;
}

.btn-add:hover {
  background: rgba(34, 211, 238, 0.16);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.2);
}

/* ===========================================================
   MODAL FOOTER
   =========================================================== */
#edit-modal-footer {
  padding:         14px 20px;
  border-top:      1px solid var(--border-subtle);
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             10px;
  background:      rgba(0, 0, 0, 0.18);
  flex-shrink:     0;
}

.btn-cancel {
  padding:       9px 20px;
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background:    transparent;
  color:         var(--text-muted);
  font-size:     13px;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color:      var(--text-secondary);
}

#btn-save-hex {
  padding:       9px 24px;
  border:        1px solid rgba(234, 179, 8, 0.42);
  border-radius: var(--radius-md);
  background:    rgba(234, 179, 8, 0.1);
  color:         rgba(234, 179, 8, 0.95);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

#btn-save-hex:hover {
  background: rgba(234, 179, 8, 0.18);
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.25);
}

/* ===========================================================
   POKÉMON FETCH UI (edit modal)
   =========================================================== */

/* Sprite thumbnail in entity list */
.pk-list-sprite {
  width:            34px;
  height:           34px;
  image-rendering:  pixelated;
  filter:           drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
  flex-shrink:      0;
}

/* Fetch row layout */
.pk-fetch-row {
  display:     flex;
  gap:         14px;
  align-items: flex-start;
  flex-wrap:   wrap;
  margin-bottom: 12px;
}

.pk-fetch-input-group {
  display:        flex;
  flex-direction: column;
}

.pk-fetch-row-inner {
  display:     flex;
  gap:         8px;
  align-items: center;
}

.btn-fetch {
  padding:       9px 14px;
  background:    rgba(168, 85, 247, 0.1);
  border:        1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
  color:         var(--accent-purple);
  font-size:     12.5px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all var(--transition-fast);
}
.btn-fetch:hover {
  background: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

/* Preview card shown after successful fetch */
.pk-fetch-preview {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 14px;
  background:    rgba(34, 211, 238, 0.05);
  border:        1px solid var(--border-glow);
  border-radius: var(--radius-md);
  animation:     pkFadeIn 0.2s ease;
}

@keyframes pkFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#pk-preview-sprite {
  width:            72px;
  height:           72px;
  image-rendering:  pixelated;
  filter:           drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  flex-shrink:      0;
}

.pk-preview-info {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.pk-preview-name {
  font-size:   16px;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1.2;
}

.pk-preview-id {
  font-size: 11px;
  color:     var(--text-muted);
}

.pk-preview-types {
  display: flex;
  gap:     4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Override section (editable name + emoji) */
.pk-fetch-override {
  border-top:  1px solid var(--border-subtle);
  padding-top: 14px;
  animation:   pkFadeIn 0.2s ease;
}

/* Fetch status message */
.pk-fetch-status {
  font-size:   12px;
  color:       var(--text-muted);
  min-height:  20px;
  margin-top:  4px;
}

/* ===========================================================
   POKÉMON TYPE BADGES
   =========================================================== */
.pk-type-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     10px;
  font-weight:   700;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  color:         #fff;
  text-shadow:   0 1px 2px rgba(0,0,0,0.5);
}

.type-normal   { background: #9099a1; }
.type-fire     { background: #fd7d24; }
.type-water    { background: #4592c4; }
.type-electric { background: #eed535; color: #1a1a00; text-shadow: none; }
.type-grass    { background: #9bcc50; color: #1a2a00; text-shadow: none; }
.type-ice      { background: #51c4e7; }
.type-fighting { background: #d56723; }
.type-poison   { background: #b97fc9; }
.type-ground   { background: #f7de3f; color: #1a1000; text-shadow: none; }
.type-flying   { background: #3dc7ef; }
.type-psychic  { background: #f366b9; }
.type-bug      { background: #729f3f; }
.type-rock     { background: #a38c21; }
.type-ghost    { background: #7b62a3; }
.type-dragon   { background: #53a4cf; }
.type-dark     { background: #707070; }
.type-steel    { background: #9eb7b8; }
.type-fairy    { background: #fdb9e9; color: #4a0030; text-shadow: none; }

/* ===========================================================
   EXPLORATION PROGRESS (edit form)
   =========================================================== */

.exploration-group { gap: 10px !important; }

.exploration-bar-preview {
  width:         100%;
  height:        8px;
  background:    rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.07);
}

.exploration-bar-fill {
  height:        100%;
  border-radius: 6px;
  background:    rgba(255,255,255,0.08);
  transition:    width 0.18s ease, background 0.25s ease;
  min-width:     0;
}

.exploration-range {
  width:              100% !important;
  -webkit-appearance: none;
  height:             4px;
  border-radius:      4px;
  background:         rgba(255,255,255,0.12);
  outline:            none;
  cursor:             pointer;
  margin-top:         4px;
}

.exploration-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--accent-green, #22c55e);
  border:        2px solid rgba(0,0,0,0.4);
  cursor:        pointer;
  transition:    transform 0.15s ease;
}

.exploration-range::-webkit-slider-thumb:hover { transform: scale(1.18); }

.range-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  margin-left:     8px;
  padding:         1px 8px;
  background:      rgba(34, 197, 94, 0.12);
  border:          1px solid rgba(34, 197, 94, 0.3);
  border-radius:   var(--radius-full, 999px);
  font-size:       11px;
  font-weight:     700;
  color:           #86efac;
  font-variant-numeric: tabular-nums;
  transition:      all 0.2s ease;
}