/* =======================
   MARVEL OPS BOARD STYLE (Readable v3 + Advent Tracker)
   ======================= */

:root {
  --bg: #0b1020;
  --panel: #0f172a;
  --panel-2: #0b1225cc;
  --text: #f1f5f9;
  --muted: #c7cfdd;
  --accent: #38bdf8;
  --ok: #10b981;
  --warn: #f59e0b;
  --info: #3b82f6;
  --danger: #ef4444;
  --card: #0f172acc;
  --border: #2b3858;
  --shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  --radius: 14px;

  /* Fluid type scale */
  --fs-base: clamp(15px, 1.1vw + 0.4rem, 19px);
  --fs-sm:   clamp(12px, 0.8vw + 0.3rem, 15px);
  --fs-md:   clamp(14px, 1.0vw + 0.35rem, 17px);
  --fs-lg:   clamp(16px, 1.2vw + 0.4rem, 20px);
}

html, body { height:100%; margin:0; }
body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  background:
    radial-gradient(1200px 600px at 20% -10%, #12203a 0%, transparent 60%),
    radial-gradient(1400px 700px at 110% 10%, #10253a 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration:none; }
a:hover { filter: brightness(1.15); }

/* ===== Topbar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #0b162e 0%, var(--panel) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.brand {
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--text);
  font-size: var(--fs-lg);
}
.nav a { font-size: var(--fs-md); color: var(--text); opacity:.9; margin-right:14px; }
.gm { display:flex; align-items:center; gap:10px; }
.gm input {
  background:#0b1225; border:1px solid var(--border); color:var(--text);
  padding:6px 10px; border-radius:10px; font-size:var(--fs-sm);
}
.gm button {
  background:linear-gradient(180deg,#23d08f,#10b981);
  color:#052; border:0; padding:7px 12px; border-radius:10px;
  cursor:pointer; font-weight:700; font-size:var(--fs-sm);
}
.gm-badge {
  background:#22c55e33; color:#86efac; padding:4px 10px; border-radius:999px;
  border:1px solid #22c55e55; font-weight:700; font-size:var(--fs-sm);
}

/* ===== Map & Main ===== */
main { position:relative; min-height:calc(100vh - 54px); }
#map { position:absolute; top:54px; left:0; right:0; bottom:0; }

/* ===== Toolbar ===== */
.toolbar {
  position:absolute; top:78px; left:18px; z-index:900;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  padding:12px 16px; backdrop-filter:blur(8px);
  font-size:var(--fs-md); transition:all .2s ease-out;
}
.toolbar:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.5); }
.toolbar .btn, .toolbar select, .toolbar input {
  font-size:var(--fs-md); border-radius:10px; border:1px solid var(--border);
  background:#0b1225; color:var(--text); padding:8px 12px;
}
.toolbar .legend { font-size:var(--fs-sm); }
.dot { width:12px; height:12px; border-radius:50%; border:2px solid #111; display:inline-block; margin-right:6px; }

/* ===== Popup Cards ===== */
.leaflet-popup-content { min-width:340px; }
.popup-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:14px; box-shadow:var(--shadow); color:var(--text);
}
.popup-title { margin:0; font-size:var(--fs-lg); font-weight:800; letter-spacing:.3px; }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.badge {
  background:#0b1225; border:1px solid var(--border); color:var(--muted);
  padding:3px 8px; font-size:var(--fs-sm); border-radius:999px;
}
.meta { font-size:var(--fs-sm); color:var(--muted); margin-bottom:8px; }
.actions { margin-top:10px; display:flex; gap:10px; }
.actions a, .actions button {
  border:1px solid var(--border); border-radius:10px; padding:7px 12px;
  background:#0b1225; color:var(--text); text-decoration:none; cursor:pointer;
  font-size:var(--fs-md);
}
.actions button.lock {
  background:linear-gradient(180deg,#ff7a7a,#ef4444);
  border-color:#a11; color:#210;
}

/* ===== Hover & Map Elements ===== */
.leaflet-control-zoom { margin-top:80px !important; }
#map::after {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:80px 80px; pointer-events:none; z-index:2;
}
.leaflet-interactive:hover { stroke-width:2.5px !important; filter:drop-shadow(0 0 5px var(--accent)); }

/* ===== Tooltip ===== */
.leaflet-tooltip.marker-tip {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; box-shadow:var(--shadow);
  font-size:var(--fs-sm); line-height:1.3;
}
.leaflet-tooltip.marker-tip .tip-title { font-weight:800; letter-spacing:.2px; }
.leaflet-tooltip.marker-tip .tip-meta { color:var(--muted); font-weight:600; }
.leaflet-tooltip.marker-tip.leaflet-tooltip-top:before { border-top-color:var(--panel); }
.leaflet-tooltip.marker-tip.leaflet-tooltip-bottom:before { border-bottom-color:var(--panel); }

/* ===== Missions list readability ===== */
.h-title { margin:8px 0 14px 0; font-size:clamp(22px,1.6vw + .6rem,32px); font-weight:800; letter-spacing:.3px; }
.row-actions { margin:0 0 14px 0; }
.btn-primary {
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#0b1225; border:1px solid var(--border); color:var(--text);
  font-weight:700;
}
.btn-primary:hover { filter:brightness(1.12); }
.mission-list { list-style:none; padding:0; margin:0; }
.mission-row { padding:14px 0 16px 0; border-bottom:1px solid rgba(200,210,230,.14); }
.mission-row.empty { color:var(--muted); }
.mission-title {
  display:inline-block; font-size:clamp(18px,1.1vw + .55rem,24px);
  font-weight:800; color:#fff; letter-spacing:.2px;
}
.mission-title:hover { color:var(--accent); }
.mission-meta { margin-top:6px; font-size:clamp(14px,.9vw + .35rem,17px); color:#d8deea; }
.tags { color:#cfe3ff; }
.muted { color:#7e90b2; margin:0 6px; }
.chip {
  display:inline-block; padding:3px 8px; border-radius:999px; font-weight:700;
  border:1px solid var(--border); background:#0b1225; color:#eaf2ff; margin-right:6px;
}
.chip.tone { color:#cfe3ff; border-color:#2a3a5e; }
.chip.locked      { background:linear-gradient(180deg,#ff8b8b,#ef4444); color:#1c0a0a; border-color:#a11; }
.chip.open        { background:linear-gradient(180deg,#27e3a2,#10b981); color:#062;  border-color:#0a7; }
.chip.scheduled   { background:linear-gradient(180deg,#ffcd77,#f59e0b); color:#3a2202; border-color:#b77006; }
.chip.in-progress { background:linear-gradient(180deg,#6fb2ff,#3b82f6); color:#06122e; border-color:#2a5fb7; }
.chip.complete    { background:#1e293b; color:#cbd5e1; border-color:#334155; }

/* ===== Advent tracker ===== */
.advent {
  display:flex; align-items:center; gap:10px;
  margin-left:6px; padding-left:10px; border-left:1px solid var(--border);
}
#advent #adv-label, .advent #adv-label { font-weight:800; letter-spacing:.3px; font-size:var(--fs-md); }
.pips { display:flex; gap:6px; align-items:center; }
.pip {
  width:14px; height:14px; border-radius:4px;
  border:2px solid var(--muted); background:transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.pip.filled { background:var(--ok); border-color:var(--ok); }
.pipbtn {
  margin-left:4px; padding:4px 8px; border-radius:8px;
  border:1px solid var(--border); background:#0b1225;
  color:var(--text); cursor:pointer; font-size:var(--fs-sm);
}
/* Region rectangles hover (global view) */
.leaflet-interactive.region-rect { transition: all .12s ease-out; }
.editor { margin-top: 6px; background: #0b1225; border:1px solid var(--border); border-radius:12px; padding:10px; }
.editor .editor-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.small { font-size:.9rem; opacity:.85; }
/* When editing, let clicks pass through region shapes */
.editing-on .leaflet-interactive.region-rect,
.editing-on .leaflet-interactive.leaflet-rectangle {
  pointer-events: none !important;
}