/* Hex Map */

.hexmap-svg {
  width: 100%;
  max-height: 70vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.hex-cell { cursor: pointer; }
.hex-cell:hover polygon { opacity: 0.85; }
.hex-selected polygon { stroke: var(--accent-red) !important; stroke-width: 3 !important; }

.hex-number {
  font-size: 9px;
  pointer-events: none;
  user-select: none;
}

.hex-label {
  font-size: 11px;
  pointer-events: none;
  font-weight: 600;
  user-select: none;
}

.hexmap-editor {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hexmap-grid-panel {
  flex: 1;
  min-width: 400px;
}

.hexmap-edit-panel {
  width: 280px;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 1rem;
  background: var(--bg-primary);
}

.hexmap-edit-panel h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
}

.hexmap-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.hexmap-terrain-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hexmap-terrain-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.hexmap-terrain-swatch span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--border-primary);
}

.hexmap-no-selection {
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem 0;
}

/* Edge connections */
.hex-edge { pointer-events: none; }

/* Terrain icons */
.hex-terrain-icon {
  font-size: 16px;
  pointer-events: none;
  user-select: none;
}
/* Entity link indicator */
.hex-link-icon {
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
  fill: var(--info);
}
.hex-link-icon:hover { opacity: 0.7; }
.hex-label-linked { text-decoration: underline; text-decoration-color: var(--info); }

/* Linked entity section in edit panel */
.hexmap-linked-entity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}
.hexmap-linked-entity a {
  color: var(--accent-red);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hexmap-linked-entity a:hover { text-decoration: underline; }
.hexmap-entity-picker {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.hexmap-entity-picker select { flex: 1; }

/* Fog of war */
/* Player notes indicator */
.hex-note-icon {
  font-size: 10px;
  pointer-events: none;
  user-select: none;
  fill: var(--success);
}

.hex-fog polygon { fill: #111 !important; opacity: 0.9; }
.hex-fog .hex-number, .hex-fog .hex-label, .hex-fog .hex-terrain-icon, .hex-fog .hex-link-icon, .hex-fog .hex-note-icon { display: none; }

/* Hint text in edit panel */
.hexmap-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

/* Description on detail page */
.hexmap-description {
  color: var(--text-secondary);
  margin: 0.25rem 0 0;
}

/* Action row (flex button group) */
.hexmap-action-row {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* Generator preview */
.hexmap-gen-preview { margin-top: 0.25rem; }

/* Edge type colors (matching hex-geo/edge-type->style) */
.hex-edge-type-road { color: #8B6914; }
.hex-edge-type-river { color: #4488cc; }
.hex-edge-type-fence { color: #888; }
.hex-edge-type-trail { color: #888; }

/* Edge list in edit panel */
.hexmap-edge-list { margin-top: 0.5rem; }
.hexmap-edge-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.hexmap-edge-item button { font-size: 0.75rem; }
.hexmap-edge-add-section { margin-top: 0.5rem; }
.hexmap-edge-add-btn { margin-top: 0.5rem; }

/* Player/GM view toggle */
.hexmap-view-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 2px;
}
.hexmap-view-toggle button {
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.8rem;
}
.hexmap-view-toggle button.active {
  background: var(--accent-red);
  color: white;
}

/* Zoom controls */
.hexmap-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 2px;
}
.hexmap-zoom-controls button { min-width: 28px; text-align: center; }
.hexmap-zoom-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: center;
}

/* SVG pan cursor */
.hexmap-svg { cursor: grab; }
.hexmap-svg:active { cursor: grabbing; }

/* Print-friendly view.
   `!important` is intentional throughout this block — print stylesheets must
   override the on-screen visual layer (dark theme, layout chrome, max-height
   scrolling). Without it, print preview inherits dark backgrounds and a
   clipped svg viewport. The general "no !important" rule doesn't apply to
   media-context overrides like this one. */
@media print {
  .hexmap-toolbar, .hexmap-edit-panel, .hexmap-terrain-legend,
  .breadcrumbs, .message-box, .detail-actions { display: none !important; }
  .hexmap-editor { display: block !important; }
  .hexmap-grid-panel { min-width: 100% !important; }
  .hexmap-svg {
    max-height: none !important;
    width: 100% !important;
    background: white !important;
    border: 1px solid #ccc !important;
  }
  .hex-cell polygon { stroke: #333 !important; }
  .hex-number, .hex-label, .hex-terrain-icon { fill: #333 !important; }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hexmap-editor { flex-direction: column; }
  .hexmap-grid-panel { min-width: 100%; }
  .hexmap-edit-panel { width: 100%; }
  .hexmap-toolbar { flex-wrap: wrap; }
  .hexmap-svg { max-height: 50vh; }
}