/* ============================================================
   HantaOSINT UI Polish v2.0 — surgical overrides
   Append to style.css OR include as separate <link> after style.css
   Addresses 6 specific UI issues without rewriting existing styles.
   ============================================================ */

/* ============================================================
   ISSUE 3 + 5: Double-underlining + red pixel on Methodology
   Root cause: nav.main-nav a.active::after AND
               nav.main-nav a[aria-current="page"] both apply
   Fix: kill the ::after underline (older mechanism), keep only
        the cleaner border-bottom, normalize methodology dot
   ============================================================ */
nav.main-nav a.active::after {
  display: none !important;   /* remove the old ::after underline */
}

nav.main-nav a[aria-current="page"],
nav.main-nav a.active {
  color: var(--ink) !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 4px !important;
}

/* Methodology nav gets a subtle dot ONLY when not the active page */
nav.main-nav a.nav-methodology::before {
  background: var(--ink-soft) !important;   /* was --confirm (green/red), now neutral */
  opacity: 0.5;
}
nav.main-nav a.nav-methodology[aria-current="page"]::before,
nav.main-nav a.nav-methodology.active::before {
  background: var(--accent) !important;
  opacity: 1;
}

/* ============================================================
   ISSUE 2: Top navigation looks unpolished
   Bigger font, better spacing, clearer separation between items
   ============================================================ */
header.site-header {
  padding: 12px 28px !important;
  gap: 24px;
}

nav.main-nav {
  font-size: 14px !important;
  gap: 28px !important;
  font-weight: 500;
}

nav.main-nav a {
  padding: 16px 0 !important;
  color: var(--ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav.main-nav a:hover {
  color: var(--ink) !important;
}

.brand-mark {
  font-size: 20px !important;
}
.brand-tag {
  font-size: 10px !important;
  padding-left: 12px !important;
}

/* ============================================================
   BOTH CTA BUTTONS: make them LOUD and impossible to miss
   Telegram = solid black bg, white text (existing style amplified)
   Buy Me a Coffee = solid accent red bg, white text
   ============================================================ */
.subscribe-btn.telegram-cta {
  background: var(--ink) !important;
  color: var(--bg) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.subscribe-btn.telegram-cta:hover {
  background: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

.support-btn.bmc-cta {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  font-family: var(--font-mono);
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(198, 61, 47, 0.4);
  margin-left: 10px;
}
.support-btn.bmc-cta:hover {
  background: #b3372a !important;
  border-color: #b3372a !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(198, 61, 47, 0.35);
}
.support-btn.bmc-cta svg {
  margin-right: 6px;
  vertical-align: -2px;
}

/* Header CTA wrapper to keep both buttons aligned right */
.header-cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ============================================================
   ISSUE 4: Share cards on dashboard nearly invisible
   Cards: .share-btn inside .intel-rail-header
   Current state: basically unstyled icon links.
   Fix: give them visible borders, padding, hover states, contrast
   ============================================================ */
.intel-rail-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line);
}

.intel-rail-header .irh-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
}

.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  color: var(--ink-soft) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.share-btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  display: block !important;
}

.share-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--bg-card) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.share-btn:active {
  transform: translateY(0);
}


/* ============================================================
   ISSUE 6: Map zoom controls overlap data overlays
   Move Leaflet zoom controls to top-right (away from LIVE badge)
   and add background contrast so they don't blend with the map
   ============================================================ */
.leaflet-top.leaflet-left {
  top: auto !important;
  left: auto !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 800;
}
.leaflet-top.leaflet-left .leaflet-control-zoom {
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
  overflow: hidden;
}
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 18px !important;
}
.leaflet-control-zoom a:hover {
  background: var(--bg-subtle) !important;
  color: var(--accent) !important;
}

/* On mobile, keep zoom controls but make them smaller and out of the way */
@media (max-width: 720px) {
  .leaflet-top.leaflet-left {
    bottom: 12px !important;
    right: 12px !important;
  }
  .leaflet-control-zoom a {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   MOBILE: header CTAs need to stack/scale properly
   ============================================================ */
@media (max-width: 720px) {
  .support-btn.bmc-cta {
    padding: 7px 11px !important;
    font-size: 10px !important;
    margin-left: 0;
  }
  .header-cta-group {
    gap: 6px;
  }
  /* Existing rule hides telegram-cta at very narrow widths - keep both consistent */
}

@media (max-width: 480px) {
  /* On smallest screens, hide BMC button to save space; keep Telegram visible */
  .support-btn.bmc-cta { display: none !important; }
}

/* ============================================================
   ISSUE 1 v2: Map tiles not filling ultrawide container
   Root cause: Leaflet doesn't auto-zoom to fill, so at wider
   viewports the world map is too small for its container.
   Mitigation: set a background that matches the ocean color
   so the empty tile space blends in instead of showing as gaps.
   ============================================================ */
#dashboardMap,
.leaflet-container {
  background: var(--bg-subtle) !important;
}

/* Ensure the map element fills its parent at all viewport widths */
#dashboardMap {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.leaflet-container .leaflet-tile-pane {
  width: 100% !important;
}

/* ============================================================
   METRIC TILES v2 — Visual hierarchy + responsive overhaul
   ============================================================ */

.metric-tiles {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
  z-index: 600;
  font-family: var(--font-mono);
  flex-wrap: nowrap;
  max-width: calc(100% - 28px);
}

.metric-tile {
  background: rgba(254, 253, 251, 0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line) !important;
  padding: 14px 20px !important;
  border-radius: 3px;
  min-width: 130px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.metric-tile .mt-num {
  font-family: var(--font-display) !important;
  font-size: 48px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  margin-bottom: 6px;
}

.metric-tile .mt-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-muted) !important;
  margin: 0 0 4px 0 !important;
  display: block !important;
  line-height: 1.2 !important;
}

.metric-tile .mt-label .mt-dot {
  display: none !important;
}

.metric-tile .mt-delta {
  font-family: var(--font-mono);
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-soft);
  margin: 0 !important;
  text-transform: uppercase;
  line-height: 1.2;
  display: block;
}

.metric-tile.mt-confirmed .mt-num { color: var(--accent) !important; }
.metric-tile.mt-deaths .mt-num    { color: var(--ink) !important; }
.metric-tile.mt-suspected .mt-num { color: var(--warn) !important; }
.metric-tile.mt-countries .mt-num { color: var(--confirm) !important; }
.metric-tile.mt-r0 .mt-num        { color: var(--confirm) !important; font-style: italic; }

.metric-tile .mt-delta.delta-up   { color: var(--accent); font-weight: 600; }
.metric-tile .mt-delta.delta-down { color: var(--confirm); font-weight: 600; }

@media (max-width: 1799px) and (min-width: 1200px) {
  .metric-tiles {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
    margin: 12px 14px !important;
    justify-content: stretch !important;
  }
  .metric-tile {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .metric-tile .mt-num { font-size: 36px !important; }
}

@media (max-width: 1199px) and (min-width: 720px) {
  .metric-tiles {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
    margin: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .metric-tile {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
  }
  .metric-tile .mt-num { font-size: 28px !important; }
  .metric-tile .mt-label { font-size: 9px !important; }
  .metric-tile .mt-delta { font-size: 8px !important; }
}

@media (max-width: 720px) {
  .metric-tile .mt-num { font-size: 18px !important; }
  .metric-tile .mt-label { font-size: 8px !important; letter-spacing: 0.06em !important; }
  .metric-tile .mt-delta { font-size: 7px !important; }
}

/* ============================================================
   STATUS OVERLAY POSITION FIX — avoid overlapping metric tiles
   At full ultrawide (>=1800px): tiles float center-top, overlay
     stays in top-left (no conflict)
   At 1200-1799px: tiles flow as a strip at the top, overlay
     moves to the bottom-left of the map instead
   At <1200px: tiles stack as a strip, overlay also moves to
     bottom-left
   ============================================================ */
@media (max-width: 1799px) {
  .map-status-overlay {
    top: auto !important;
    bottom: 14px !important;
    left: 14px !important;
  }
}

/* Make sure the overlay still has enough contrast in its new spot */
.map-status-overlay {
  background: rgba(254, 253, 251, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}