/* ═══════════════════════════════════════════════════════════════
   INDIA MONITOR — RESPONSIVE OVERRIDES
   responsive.css
   
   Add to your index.html:
   <link rel="stylesheet" href="responsive.css">
   Place this AFTER your existing <style> block closing tag.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global touch target minimum ─── */
:root {
  --touch-min: 44px;
}

/* ─── Region nav toggle (hide/show) ─── */
.rn-toggle {
  font-size: .6rem !important;
  padding: 2px 5px !important;
  min-width: 20px;
  opacity: .7;
  transition: transform .2s, opacity .2s;
}
.rn-toggle:hover { opacity: 1; }
.rn.rn-hidden .rb:not(.rn-toggle) { display: none; }
.rn.rn-hidden .rn-toggle { transform: rotate(180deg); }
.rn.rn-hidden {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* ─── Scrollbar improvements for touch ─── */
.sp-tabs {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sp-tabs::-webkit-scrollbar { display: none; }

/* ─── Tab touch targets ─── */
.sp-tab {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── Header button touch targets ─── */
.hb {
  min-height: 34px;
  display: flex;
  align-items: center;
}
.thm {
  min-width: 34px;
  min-height: 34px;
}
.pab {
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.pab:hover {
  background: rgba(255,255,255,.05);
}

/* ─── Map overlay button improvements ─── */
.mb {
  min-height: 30px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rb {
  min-height: 26px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.msi {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ml {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── Panel header flex fix ─── */
.ph {
  gap: 6px;
}
.ph-t {
  min-width: 0;
}
.bg {
  flex-shrink: 0;
}

/* ─── Sports team names overflow ─── */
.sp-team {
  min-width: 0;
}
.sp-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── News meta wrap fix ─── */
.nm {
  flex-wrap: wrap;
}

/* ─── Cyber meta wrap ─── */
.cy-meta {
  flex-wrap: wrap;
}

/* ─── MapLibre GL popup styles ─── */
.maplibregl-popup-content {
  background: rgba(15,22,35,.95) !important;
  color: #e2e8f0 !important;
  font-family: var(--fm) !important;
  font-size: .65rem !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(8px);
}
.maplibregl-popup-tip {
  border-top-color: rgba(15,22,35,.95) !important;
}
.maplibregl-popup-close-button {
  color: #94a3b8 !important;
  font-size: 16px !important;
  padding: 2px 6px !important;
}
.maplibregl-ctrl-attrib {
  font-size: 9px !important;
  opacity: .5;
}
.map-popup-title {
  font-weight: 600;
  font-size: .7rem;
  margin-bottom: 2px;
  color: #ff9933;
}
.map-popup-sub {
  color: #94a3b8;
  font-size: .55rem;
}

/* Light mode popup overrides */
[data-theme="light"] .maplibregl-popup-content {
  background: rgba(255,255,255,.95) !important;
  color: #1a202c !important;
  border-color: #c8cdd6 !important;
}
[data-theme="light"] .maplibregl-popup-tip {
  border-top-color: rgba(255,255,255,.95) !important;
}
[data-theme="light"] .map-popup-title { color: #b45309; }
[data-theme="light"] .map-popup-sub { color: #4b5563; }

/* ─── Light mode — ALL map overlays ─── */
[data-theme="light"] .rn {
  background: rgba(255,255,255,.92) !important;
  border-color: #c8cdd6 !important;
}
[data-theme="light"] .rb {
  background: rgba(255,255,255,.95);
  color: #374151;
  border-color: #c8cdd6;
}
[data-theme="light"] .rb:hover,
[data-theme="light"] .rb.on {
  background: rgba(180,83,9,.1);
  border-color: #b45309;
  color: #92400e;
}
[data-theme="light"] .mo .mb {
  background: rgba(255,255,255,.92);
  color: #374151;
  border-color: #c8cdd6;
}
[data-theme="light"] .mo .mb:hover,
[data-theme="light"] .mo .mb.on {
  background: rgba(234,88,12,.1);
  border-color: var(--org);
  color: var(--org);
}
[data-theme="light"] .ms .msi {
  background: rgba(255,255,255,.92);
  border-color: #c8cdd6;
}
[data-theme="light"] .map-styles {
  background: rgba(255,255,255,.92) !important;
  border-color: #c8cdd6 !important;
}
[data-theme="light"] .map-style-btn {
  color: #4b5563;
  border-color: #c8cdd6;
}
[data-theme="light"] .map-style-btn:hover {
  color: #1a202c;
  background: rgba(0,0,0,.04);
}
[data-theme="light"] .map-style-btn.on {
  color: #92400e;
  background: rgba(180,83,9,.1);
}
[data-theme="light"] .im-zoom-ctrl button {
  background: rgba(255,255,255,.92) !important;
  color: #374151 !important;
  border-color: #c8cdd6 !important;
}
[data-theme="light"] .im-zoom-ctrl button:hover {
  background: rgba(180,83,9,.1) !important;
  color: #92400e !important;
  border-color: #b45309 !important;
}

/* ─── Map style switcher bar ─── */
.map-styles {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0;
  background: rgba(15,22,35,.92);
  border: 1px solid var(--brd);
  border-radius: 5px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.map-style-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--brd);
  color: var(--t3);
  font-family: var(--fm);
  font-size: .5rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  min-height: 30px;
}
.map-style-btn:last-child { border-right: none; }
.map-style-btn:hover {
  color: var(--t1);
  background: rgba(255,255,255,.05);
}
.map-style-btn.on {
  color: var(--saf);
  background: rgba(255,153,51,.1);
}
[data-theme="light"] .map-style-btn {
  background: rgba(255,255,255,.9);
  color: #4b5563;
}
[data-theme="light"] .map-style-btn:hover { color: #1a202c; }
[data-theme="light"] .map-style-btn.on {
  color: #92400e;
  background: rgba(180,83,9,.1);
}

/* ─── Marker pulse animation (for MapLibre custom markers) ─── */
@keyframes mapMarkerPulse {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* ═══════════════════════════════════════
   TABLET — max-width: 1024px
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .pg {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .mw { height: 35vh; }
  .ml { display: none; }
  /* Compact region nav on tablet */
  .rn { max-width: 200px; }
  .rb { font-size: .48rem; padding: 2px 5px; }
}

/* ═══════════════════════════════════════
   MOBILE — max-width: 768px
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  html { font-size: 13px; }

  /* Header — same size as desktop */
  .hd { height: 46px; padding: 0 10px; }
  .hd-c { display: none; }
  .clk { display: none; }

  /* Ticker */
  .tk { height: 26px; }
  .ti { font-size: .56rem; }

  /* Map — taller on mobile so India is visible */
  .mw { height: 38vh; min-height: 260px; }

  /* Layer toggles — smaller */
  .mo { top: 6px; left: 6px; gap: 2px; }
  .mb { font-size: .46rem; padding: 3px 6px; min-height: 24px; }

  /* Region nav → horizontal scrollable strip at top-right, not a big grid */
  .rn {
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
    max-width: 55%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(15,22,35,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px;
    border-radius: 4px;
    border: 1px solid var(--brd);
    gap: 2px;
    justify-content: flex-start;
  }
  .rn::-webkit-scrollbar { display: none; }
  .rb {
    font-size: .44rem;
    padding: 2px 5px;
    min-height: 22px;
    flex-shrink: 0;
  }

  /* Map info boxes — compact */
  .ms { bottom: 6px; left: 6px; gap: 3px; }
  .msi { padding: 3px 5px; }
  .msi-l { font-size: .42rem; }
  .msi-v { font-size: .6rem; }
  .ml { display: none; }

  /* Style switcher — above info boxes */
  .map-styles { bottom: 36px; }

  /* MapLibre default controls — push left to avoid overlap with our zoom */
  .maplibregl-ctrl-top-right { display: none !important; }
  .maplibregl-ctrl-bottom-right { margin-right: 4px !important; }

  /* Intelligence Brief — compact on mobile */
  #pBrief { max-height: 220px; }

  /* Panel grid */
  .pg {
    grid-template-columns: 1fr;
    padding: 6px;
    gap: 6px;
  }
  .pn.wide { grid-column: auto; }
  .ph { padding: 8px 10px; }
  .ph-t { font-size: .6rem; }
  .pb { padding: 8px 10px; }

  .mg { grid-template-columns: 1fr 1fr; }
  .cg { grid-template-columns: 1fr 1fr; }
  .cy-svc { grid-template-columns: 1fr; }
  .df-rd { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .ib-cats { grid-template-columns: 1fr; }

  .ft {
    padding: 8px 10px;
    font-size: .46rem;
    justify-content: center;
    text-align: center;
  }
}

/* ═══════════════════════════════════════
   SMALL PHONE — max-width: 480px
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  html { font-size: 12px; }

  .hd { height: 46px; padding: 0 8px; }

  .mw { height: 35vh; min-height: 220px; }
  .mo { gap: 2px; }
  .mb { font-size: .42rem; padding: 2px 5px; min-height: 22px; }

  /* Hide region nav on very small phones — use pinch/drag instead */
  .rn { display: none; }

  /* Style switcher smaller */
  .map-styles { bottom: 6px; }
  .map-style-btn { font-size: .42rem; padding: 3px 6px; min-height: 24px; }

  /* Brief very compact */
  #pBrief { max-height: 180px; }

  .pg { padding: 4px; gap: 4px; }
  .sp-tab { font-size: .48rem; padding: 3px 6px; min-height: 28px; }

  .mg { grid-template-columns: 1fr; }
  .cn { font-size: 1.6rem; }
  .nh { font-size: .7rem; }
  .ne { font-size: .6rem; }
}

/* ═══════════════════════════════════════
   LARGE DESKTOP — min-width: 1400px
   ═══════════════════════════════════════ */
@media (min-width: 1400px) {
  .pg {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1600px;
    margin: 0 auto;
  }
  .mw {
    height: 45vh;
    max-height: 600px;
  }
}