/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — OPERATIONS PAGE STYLES
   assets/css/pages/operations.css
   ─────────────────────────────────────────────────
   Depends on: tokens.css, base.css, topbar.css

   Covers all styles for the Operations page, including
   the hub tool-selection menu and all individual tools.

   Component inventory:
     - #root container

     Hub menu (OperationsHub.jsx):
     - .ops-tool-menu (horizontal tool selector row)
     - .ops-tool-tab, .ops-tool-glyph, .ops-tool-label
     - .ops-tool-viewport (active tool mount area)
     - .ops-tool-missing (fallback error state)

     Attribute Calculator (OpsTool_Attributes.jsx):
     - Scoped under .attr-calc to avoid global leakage
     - .attr-calc .panel, .attr-calc .panel-title color variants
     - .attr-calc label, .attr-calc .form-group
     - RunnerType grid (.runnertype-grid, .runnertype-btn,
       .runnertype-row-label — VAN / SOL / TEK variants)
     - Class buttons (.class-buttons, .class-btn)
     - Level slider (.attr-calc input[type=range])
     - Identity summary (.summary-row, .total-box)
     - Stat bars (.stats-grid, .stat-item, .stat-bar-*)
     - Formula box (.formula-box)

     Stage Map (OpsTool_StageMap.jsx):
     - Uses inline styles; no external CSS needed

     Page-level entrance animations
   ═══════════════════════════════════════════════════ */

/* ─── REACT ROOT ─── */
#root { position: relative; z-index: 1; }

/* ─── ATTRIBUTE CALCULATOR LAYOUT ─── */
.attr-calc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.attr-calc .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .attr-calc .grid { grid-template-columns: 1fr 1fr; }
}

/* ─── PANEL ─── */
/* The rounded card that wraps each major section of the calculator. */
.attr-calc .panel {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
}

.attr-calc .panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Color variants for panel headings */
.attr-calc .panel-title.cyan   { color: var(--cyan); }
.attr-calc .panel-title.purple { color: var(--fuchsia); }
.attr-calc .panel-title.gray   { color: var(--text-lo); }

/* ─── FORM ELEMENTS ─── */
.attr-calc label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-mid);
  margin-bottom: 8px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attr-calc .form-group { margin-bottom: 16px; }

/* ─── RUNNERTYPE GRID ─── */
/* 6-column grid of small buttons for each RunnerType variant. */
.runnertype-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.runnertype-btn {
  padding: 8px 4px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.72rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: var(--mono);
}

/* VAN — teal */
.runnertype-btn.van                { background: rgba(20, 184, 166, 0.15); color: var(--teal); }
.runnertype-btn.van:hover          { background: rgba(20, 184, 166, 0.28); }
.runnertype-btn.van.active         { background: rgba(20, 184, 166, 0.40); border-color: #14b8a6; }

/* SOL — orange */
.runnertype-btn.sol                { background: rgba(249, 115, 22, 0.15); color: var(--orange); }
.runnertype-btn.sol:hover          { background: rgba(249, 115, 22, 0.28); }
.runnertype-btn.sol.active         { background: rgba(249, 115, 22, 0.40); border-color: #f97316; }

/* TEK — fuchsia */
.runnertype-btn.tek                { background: rgba(217, 70, 239, 0.15); color: var(--fuchsia); }
.runnertype-btn.tek:hover          { background: rgba(217, 70, 239, 0.28); }
.runnertype-btn.tek.active         { background: rgba(217, 70, 239, 0.40); border-color: #d946ef; }

/* Row category labels above each VAN / SOL / TEK group */
.runnertype-row-label {
  font-size: 0.62rem;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
  grid-column: 1 / -1;
  margin-top: 8px;
  font-family: var(--mono);
}

.runnertype-row-label:first-child { margin-top: 0; }

.runnertype-row-label.van { color: var(--teal); }
.runnertype-row-label.sol { color: var(--orange); }
.runnertype-row-label.tek { color: var(--fuchsia); }

/* ─── CLASS BUTTONS ─── */
.class-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.class-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.class-btn.inactive              { background: var(--bg-surface); color: var(--text-mid); }
.class-btn.inactive:hover        { border-color: var(--cyan-dim); color: var(--text-hi); }

.class-btn.active.vanguard  { background: rgba(20,  184, 166, 0.25); color: var(--teal);    border-color: #14b8a6; }
.class-btn.active.solaris   { background: rgba(249, 115,  22, 0.25); color: var(--orange);  border-color: #f97316; }
.class-btn.active.teknician { background: rgba(217,  70, 239, 0.25); color: var(--fuchsia); border-color: #d946ef; }

/* ─── LEVEL SLIDER ─── */
.attr-calc input[type="range"] {
  width: 100%;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
}

.attr-calc input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.level-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-lo);
  margin-top: 6px;
  font-family: var(--mono);
}

.level-value { color: var(--cyan); font-weight: 700; }

/* ─── IDENTITY SUMMARY ─── */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}

.summary-row:last-child { border-bottom: none; }

.summary-label {
  color: var(--text-mid);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-value {
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--mono);
}

/* Class-colored value variants */
.summary-value.cyan      { color: var(--cyan); }
.summary-value.vanguard  { color: var(--teal); }
.summary-value.solaris   { color: var(--orange); }
.summary-value.teknician { color: var(--fuchsia); }

.total-box {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg-deep);
  border-radius: 8px;
  border: 1px solid var(--border-dim);
}

.total-label {
  font-size: 0.72rem;
  color: var(--text-lo);
  font-family: var(--mono);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.total-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cyan);
  font-family: var(--mono);
}

/* ─── STAT BARS ─── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

.stat-item { margin-bottom: 20px; }

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stat-name {
  font-weight: 600;
  color: var(--text-hi);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.stat-abbr { font-size: 0.72rem; color: var(--text-lo); margin-left: 8px; font-family: var(--mono); }
.stat-right { display: flex; align-items: center; gap: 8px; }

.stat-percent {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--mono);
}

/* Modifier badge color variants */
.stat-percent.positive { background: rgba(74,  222, 128, 0.10); color: var(--green-dim); border: 1px solid rgba(74,  222, 128, 0.20); }
.stat-percent.negative { background: rgba(248, 113, 113, 0.10); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.20); }
.stat-percent.neutral  { background: var(--bg-surface);         color: var(--text-lo); border: 1px solid var(--border-dim); }

.stat-value {
  font-weight: 700;
  font-size: 1.05rem;
  width: 60px;
  text-align: right;
  color: var(--text-hi);
  font-family: var(--mono);
}

.stat-bar-bg {
  height: 10px;
  background: var(--bg-surface);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-dim);
}

.stat-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 5px;
}

/* Per-stat fill colors — one color per stat for quick visual scanning */
.stat-bar-fill.hp  { background: var(--red); }
.stat-bar-fill.wp  { background: var(--purple); }
.stat-bar-fill.atk { background: #f97316; }
.stat-bar-fill.dfx { background: var(--blue); }
.stat-bar-fill.rsn { background: var(--cyan); }
.stat-bar-fill.imt { background: var(--yellow); }

.stat-breakdown {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-lo);
  margin-top: 4px;
  font-family: var(--mono);
}

/* ─── FORMULA REFERENCE BOX ─── */
.formula-box {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-lo);
  line-height: 2;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 16px;
}

/* ─── PAGE ENTRANCE ANIMATIONS ─── */
/* fadeUp keyframe defined in base.css */
.page-header         { animation: fadeUp 0.5s ease both; }
.construction-banner { animation: fadeUp 0.5s 0.1s ease both; }
#root                { animation: fadeUp 0.5s 0.2s ease both; }


/* ═══════════════════════════════════════════════════
   OPERATIONS HUB — TOOL SELECTION MENU
   ─────────────────────────────────────────────────
   Horizontal single-row selector for switching between
   operations tools (Attributes, Stage Map, etc.).
   Pattern mirrors the Field Reference category nav
   but simplified to a flat row of icon+label buttons.
   ═══════════════════════════════════════════════════ */

/* ─── MENU ROW ─── */
.ops-tool-menu {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}

/* ─── INDIVIDUAL TAB BUTTON ─── */
.ops-tool-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  overflow: hidden;
}

.ops-tool-tab:hover {
  background: var(--bg-surface);
  border-color: var(--border-dim);
}

.ops-tool-tab:hover .ops-tool-glyph,
.ops-tool-tab:hover .ops-tool-label {
  color: var(--text-hi);
}

/* Active state — cyan accent bar at bottom */
.ops-tool-tab.active {
  background: var(--bg-surface);
  border-color: var(--border);
}

.ops-tool-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cyan);
}

.ops-tool-tab.active .ops-tool-glyph {
  color: var(--cyan);
  filter: drop-shadow(0 0 6px var(--cyan));
}

.ops-tool-tab.active .ops-tool-label {
  color: var(--cyan);
}

/* ─── GLYPH ICON ─── */
.ops-tool-glyph {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-lo);
  transition: color 0.15s, filter 0.15s;
  font-family: var(--mono);
}

/* ─── TEXT LABEL ─── */
.ops-tool-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
  transition: color 0.15s;
  white-space: nowrap;
}

/* ─── TOOL VIEWPORT ─── */
/* Container for the active tool — provides entry animation. */
.ops-tool-viewport {
  animation: fadeUp 0.3s ease both;
}

/* ─── MISSING TOOL FALLBACK ─── */
.ops-tool-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-lo);
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
}

.ops-tool-missing-icon {
  font-size: 1.2rem;
  color: var(--orange);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 480px) {
  .ops-tool-tab {
    padding: 10px 14px;
    gap: 8px;
  }
  .ops-tool-label {
    font-size: 0.66rem;
  }
}


/* ═══════════════════════════════════════════════════
   WORLD MAP — pzo-worldmap.jsx
   ─────────────────────────────────────────────────
   Depends on: tokens.css (--map-*, --landmark-*, --mono, --cyan, --text-*)

   Covers:
     - .worldmap-frame           — outer chrome shell (border, border-radius 12px)
     - .worldmap-topbar          — status dot + title bar (matches Stage Map)
     - .worldmap-bottombar       — coordinate readout bar (matches Stage Map)
     - .worldmap-container       — parallax map shell (flex child)
     - .worldmap-scanline        — CRT scanline overlay
     - .worldmap-compass         — bottom-right compass rose anchor
     - .worldmap-popover-wrapper — portal-positioned landmark card (outer)
     - .worldmap-popover-card    — landmark card body (inner)
     - .worldmap-popover-type-badge
     - .worldmap-popover-name
     - .worldmap-popover-divider
     - .worldmap-popover-description
     - .worldmap-popover-connector — gradient line from card to landmark
     - @keyframes worldmap-popover-in
   ═══════════════════════════════════════════════════ */

/* ─── OUTER FRAME ─── */
/* Chrome shell that matches the Stage Map framing: 12px radius, flex column
   layout with topbar → map viewport → bottombar. */
.worldmap-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-deep);
}

/* ─── TOPBAR ─── */
/* Status dot + title, matching Stage Map topbar treatment. */
.worldmap-topbar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(15, 25, 35, 0.93);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
}

.worldmap-topbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan), 0 0 12px rgba(34, 211, 238, 0.3);
  flex-shrink: 0;
}

.worldmap-topbar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
}

.worldmap-topbar-eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-lo);
  text-transform: uppercase;
}

/* ─── BOTTOM BAR ─── */
/* Coordinate readout strip, matching Stage Map bottom bar treatment. */
.worldmap-bottombar {
  padding: 8px 16px;
  border-top: 1px solid var(--border-dim);
  background: rgba(15, 25, 35, 0.93);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.13);
}

/* ─── MAP CONTAINER ─── */
/* overflow:hidden clips the parallax canvas. perspective + transformStyle
   allow the child perspective-warp div to produce the holographic tilt.
   Now a flex child inside .worldmap-frame. */
.worldmap-container {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--map-bg);
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* ─── SCANLINE OVERLAY ─── */
/* Repeating horizontal lines for CRT/holographic texture.
   z-index 50 keeps it above the SVG but below HUD overlays (z-index 60). */
.worldmap-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  z-index: 50;
}

/* ─── COMPASS ROSE (bottom-right HUD) ─── */
.worldmap-compass {
  position: absolute;
  bottom: 16px;
  right: 20px;
  pointer-events: none;
  z-index: 60;
}

/* ─── POPOVER WRAPPER (portaled to document.body) ─── */
/* Static positioning properties for the portal div. Dynamic values
   (left, top, opacity, pointerEvents) remain as inline styles in JSX. */
.worldmap-popover-wrapper {
  position: fixed;
  transform: translate(-50%, -110%);
  z-index: 10000;
  transition: opacity 500ms ease-in-out;
}

/* ─── POPOVER CARD (inner body) ─── */
/* Dynamic border and boxShadow (landmark type color) remain inline. */
.worldmap-popover-card {
  background: linear-gradient(
    135deg,
    rgba(10, 14, 18, 0.93) 0%,
    rgba(13, 17, 23, 0.93) 100%
  );
  border-radius: 3px;
  padding: 16px 20px;
  min-width: 240px;
  max-width: 300px;
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  animation: worldmap-popover-in 0.25s ease-out;
}

/* ─── TYPE BADGE ─── */
/* Dynamic color (landmark type) remains inline. */
.worldmap-popover-type-badge {
  font-size: 9px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  opacity: 0.8;
}

/* ─── LANDMARK NAME ─── */
/* Dynamic textShadow (landmark type color) remains inline. */
.worldmap-popover-name {
  font-size: 16px;
  color: var(--text-hi);
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ─── GRADIENT DIVIDER ─── */
/* Dynamic background (landmark type color) remains inline. */
.worldmap-popover-divider {
  height: 1px;
  margin-bottom: 10px;
}

/* ─── DESCRIPTION TEXT ─── */
.worldmap-popover-description {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* ─── CONNECTOR LINE ─── */
/* Dynamic background (landmark type color gradient) remains inline. */
.worldmap-popover-connector {
  width: 1px;
  height: 20px;
  margin: 0 auto;
}

/* ─── POPOVER ENTRANCE ANIMATION ─── */
@keyframes worldmap-popover-in {
  from {
    opacity: 0;
    transform: translate(-50%, -105%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1);
  }
}