/**
 * mofa-mobile.css — MOFA Intelligence Platform
 * Shared responsive overrides for all pages
 * Breakpoints: 960px (tablet), 640px (mobile)
 */

/* ═══════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  body { overflow-x: hidden; }
}

/* ═══════════════════════════════════════════
   HEADER — diplomat.html (hd-left / hd-right)
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  /* Wrap header and allow horizontal scroll on nav area */
  header { flex-wrap: wrap !important; height: auto !important; padding: 10px 14px !important; gap: 8px !important; }
  .hd-right { flex-wrap: wrap !important; gap: 6px !important; overflow-x: auto !important; max-width: 100% !important; padding-bottom: 2px; }
  .hd-sub { display: none !important; }
  .hd-time { display: none !important; }
  .status-pill { display: none !important; }
}

@media (max-width: 640px) {
  /* On mobile, hide nav buttons — keep only dropdown + essential */
  .hd-right > a.hd-btn { display: none !important; }
  .hd-right > button:not(.hd-dropdown-btn) { display: none !important; }
  .hd-dropdown-btn { display: flex !important; }
  .hd-brand .hd-title { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════
   HEADER — cepa / relations-map / early-warning / sudan
   (header with .header-right)
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .header-right { flex-wrap: wrap !important; gap: 6px !important; }
}
@media (max-width: 640px) {
  .header-right > a:not(:first-child) { display: none !important; }
  header .hd-btn-back { display: inline-flex !important; }
  header .hd-btn-print { display: none !important; }
  header .hd-btn-monitor { display: none !important; }
}

/* ═══════════════════════════════════════════
   NAV TABS — diplomat
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .nav-tab { white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ═══════════════════════════════════════════
   KPI STRIPS — all page types
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  /* repeat(6,1fr) → 3 cols */
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
  /* repeat(5,1fr) → 3 cols */
  .stats-row { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi-bar  { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .kpi-strip  { grid-template-columns: repeat(2, 1fr) !important; padding: 10px !important; gap: 8px !important; }
  .stats-row  { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .kpi-bar    { grid-template-columns: repeat(2, 1fr) !important; padding: 10px 12px !important; gap: 8px !important; }
  .kpi-tile   { padding: 10px 12px !important; }
  .kpi-val, .kpi-num { font-size: 20px !important; }
}

/* ═══════════════════════════════════════════
   SIDEBAR LAYOUTS (2–3 col → 1 col)
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  /* diplomat bottom grid */
  .bottom-grid        { grid-template-columns: 1fr !important; }
  /* cepa / relations-map / early-warning main layout */
  .main               { grid-template-columns: 1fr !important; min-height: unset !important; padding: 12px !important; }
  /* calendar sidebar */
  .main.calendar-main { grid-template-columns: 1fr !important; }
  /* sudan-mofa sidebar */
  .main               { gap: 12px !important; }
  /* sidebar panel becomes full width */
  .sidebar, .radar-panel { width: 100% !important; max-width: 100% !important; }
  /* cepa / relations-map content */
  .content-panel      { width: 100% !important; }
}
@media (max-width: 640px) {
  .main { padding: 8px !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════
   DIPLOMAT — MODULE GRID
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .diplomat-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .sources-grid  { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════
   COUNTRY PAGES (cn, il, ir, us, ru, in, index)
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .kpi-strip   { grid-template-columns: repeat(3, 1fr) !important; }
  .two-col     { grid-template-columns: 1fr !important; }
  .three-col   { grid-template-columns: 1fr !important; }
  .risk-grid   { grid-template-columns: 1fr !important; }
  .ambassador-grid { grid-template-columns: 1fr !important; }
  .info-grid   { grid-template-columns: 1fr 1fr !important; }
  .card-kpis   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .kpi-strip   { grid-template-columns: repeat(2, 1fr) !important; padding: 10px !important; }
  .info-grid   { grid-template-columns: 1fr !important; }
  .card-kpis   { grid-template-columns: 1fr 1fr !important; }
  /* country index stats strip */
  .page-strip  { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   EARLY WARNING — 3-column → 1 column
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  /* 340px 1fr 280px → 1fr */
  .main { grid-template-columns: 1fr !important; }
  .radar-wrap { max-width: 280px !important; margin: 0 auto !important; }
  #radar-svg  { width: 220px !important; height: 220px !important; }
  .cards-grid { grid-template-columns: 1fr 1fr !important; }
  .rc-dims    { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr !important; }
  .rc-dims    { grid-template-columns: repeat(2, 1fr) !important; }
  .radar-legend { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .main { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .cal-dow, .cal-days { font-size: 10px !important; }
  .cal-day { min-height: 36px !important; padding: 3px !important; }
  .event-dot-label { display: none !important; }
}

/* ═══════════════════════════════════════════
   CEPA — kpi-strip 6-col, main 1fr 400px
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; padding: 12px !important; }
  .main { grid-template-columns: 1fr !important; padding: 12px !important; }
}
@media (max-width: 640px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   RELATIONS MAP — kpi-strip 6-col, sidebar
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cmp-grid   { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   UN VOTES
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .analysis-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   MEDIA MONITOR
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .sentiment-grid { grid-template-columns: 1fr !important; }
  .feed-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   DELEGATIONS
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   CYBER + AI-COMPLIANCE
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-3-1 { grid-template-columns: 1fr !important; }
  .grid-4  { grid-template-columns: 1fr 1fr !important; }
  .vendor-grid, .compliance-grid { grid-template-columns: 1fr 1fr !important; }
  .principle-grid, .cls-grid { grid-template-columns: 1fr 1fr !important; }
  .risk-matrix { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4, .vendor-grid, .compliance-grid { grid-template-columns: 1fr !important; }
  .principle-grid, .cls-grid { grid-template-columns: 1fr !important; }
  .risk-matrix { grid-template-columns: repeat(2, 1fr) !important; }
  .modal-grid  { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   DRM
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .pipeline-board { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .pipeline-board { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   SUDAN PAGES (sudan-mofa, sudan-map, sudan-figures)
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .le-grid   { grid-template-columns: 1fr 1fr !important; }
  .fig-grid  { grid-template-columns: 1fr !important; }
  /* sudan-mofa kpi-bar 5-col */
  .kpi-bar   { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .le-grid   { grid-template-columns: 1fr !important; }
  .kpi-bar   { grid-template-columns: repeat(2, 1fr) !important; padding: 10px !important; }
}

/* ═══════════════════════════════════════════
   FIGURES (noura, abdullahbz, lana, gargash, etc.)
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .info-grid, .focus-grid { grid-template-columns: 1fr !important; }
  .feed-grid { grid-template-columns: 1fr !important; }
  .stat-row  { grid-template-columns: repeat(2, 1fr) !important; }
  /* priorities pages */
  .country-grid, .agreements-grid, .priority-grid { grid-template-columns: 1fr !important; }
  /* figure profile hero */
  .profile-hero { flex-direction: column !important; text-align: center !important; }
  .profile-stats { justify-content: center !important; }
}

/* ═══════════════════════════════════════════
   TECH REQUIREMENTS
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr !important; }
  .sidebar-nav { position: static !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 12px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; max-height: unset !important; }
  .timeline-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-grid  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .timeline-grid, .kpi-grid { grid-template-columns: 1fr !important; }
  .sig-block { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   MOFA DOCS
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .doc-layout { grid-template-columns: 1fr !important; }
  .doc-sidebar { display: none !important; }  /* hide sidebar on mobile, content full width */
}
@media (max-width: 640px) {
  .doc-layout div[style*="grid-template-columns:1fr 1fr"] { display: block !important; }
}

/* ═══════════════════════════════════════════
   REQUESTS DASHBOARD
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr !important; }
  .req-card { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   MOFA LANDING (mofa-landing.html)
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .live-strip { grid-template-columns: 1fr 1fr !important; }
  .modules-grid { grid-template-columns: 1fr !important; }
  .tiers-grid   { grid-template-columns: 1fr !important; }
  .steps { grid-template-columns: 1fr !important; }
  .crisis-section .modules-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════
   GENERAL UTILITY — inline style grids
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Catch any inline style 2-col grids */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Padding/body */
  .page-body, .container, .content { padding: 12px !important; }
  /* Tables — horizontal scroll */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ═══════════════════════════════════════════
   GATE BOX — mobile friendly login overlay
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .gate-box { width: 92% !important; padding: 24px 18px !important; }
  .mg-box   { padding: 2rem 1.2rem !important; }
}

/* ═══════════════════════════════════════════
   LOGOUT BUTTON — reposition on very small screens
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  #mofa-logout-btn { font-size: 0.7rem !important; padding: 6px 10px !important; }
}

/* ═══════════════════════════════════════════
   HAMBURGER NAV — mobile header cleanup
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide all nav buttons — shown in hamburger drawer instead */
  .hd-right > a.hd-btn,
  .hd-right > .hd-dropdown,
  .hd-right > .status-pill,
  .hd-right > .hd-time,
  .nav-actions > a:not(.btn-login) {
    display: none !important;
  }

  /* Keep header compact */
  header {
    padding: 0 14px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .hd-left {
    flex: 1;
    min-width: 0;
    gap: 8px !important;
    overflow: hidden;
  }
  .hd-title {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hd-sub { display: none !important; }
  .hd-emblem { font-size: 1.4rem !important; flex-shrink: 0; }
  .hd-right {
    flex-shrink: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  /* mofa-landing nav */
  nav .nav-brand { flex: 1; min-width: 0; overflow: hidden; }
  nav .nav-logo  { font-size: 14px !important; white-space: nowrap; }
  nav .nav-actions { gap: 8px !important; flex-wrap: nowrap !important; }
}

/* ═══════════════════════════════════════════
   MOBILE FULL REVIEW — BATCH FIX (11 Mar 2026)
   Applies to all 10 reviewed pages
   ═══════════════════════════════════════════ */

/* ── 1. GLOBAL: prevent horizontal overflow ── */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * { box-sizing: border-box; }

  /* All horizontal tag/filter/tab bars — make scrollable */
  .filter-bar,
  .filter-pills,
  .filter-tags,
  .tab-bar,
  nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar,
  nav::-webkit-scrollbar { display: none !important; }

  /* Header: reduce padding, single line */
  header {
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
    min-height: 54px !important;
    height: auto !important;
  }

  /* All .main grids → single column */
  .main {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Remove 400px+ fixed sidebar widths */
  .main > *:last-child:not(:only-child) {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Nav bar padding */
  nav { padding: 0 12px !important; }

  /* Footer */
  footer {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    text-align: center;
  }

  /* KPI/stats strips — max 2 columns on mobile */
  .kpi-strip,
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  /* Text truncation safety */
  .hd-title, .hd-brand, .hd-logo, h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }
}

/* ── 2. CALENDAR PAGE — agenda/list view on mobile ── */
@media (max-width: 768px) {
  /* Hide the 7-column calendar grid — show list view instead */
  .cal-grid-wrap { display: none !important; }
  .cal-dow       { display: none !important; }
  .cal-days      { display: none !important; }

  /* Show list view (if .list-view or #listView exists) */
  .list-view,
  #listView,
  .agenda-view {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Calendar header nav — reduce */
  .cal-nav, .month-nav {
    font-size: 13px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Day detail panel — full width */
  .day-detail { border-radius: 8px !important; }
}

/* ── 3. LEADERS PAGE — single column on narrow mobile ── */
@media (max-width: 480px) {
  .leaders-grid,
  .figures-grid,
  .persons-grid {
    grid-template-columns: 1fr !important;
  }
  .leader-card, .figure-card {
    padding: 14px !important;
  }
  .leader-name, .figure-name {
    font-size: 15px !important;
    white-space: normal !important;
    text-overflow: unset !important;
  }
}

/* ── 4. DIPLOMAT PAGE — scrollable filter tabs ── */
@media (max-width: 768px) {
  .nav-tabs, .section-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tab { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* PDF FAB — move to not overlap cards */
  .fab-pdf, [class*="fab"], button[onclick*="PDF"], button[onclick*="pdf"] {
    bottom: 72px !important;
    right: 14px !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
}

/* ── 5. RELATIONS MAP PAGE — fix sub-nav overflow ── */
@media (max-width: 768px) {
  .map-tabs, .view-tabs, .sub-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .map-tabs::-webkit-scrollbar,
  .view-tabs::-webkit-scrollbar { display: none !important; }

  /* Interactive map — full width */
  .map-container, #relationMap, #map {
    width: 100% !important;
    min-width: 0 !important;
    height: 280px !important;
  }
}

/* ── 6. EARLY WARNING — radar chart ── */
@media (max-width: 768px) {
  .radar-wrap, .radar-chart {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  .nav-icon-btn, .action-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── 7. MEDIA MONITOR — sentiment bars ── */
@media (max-width: 768px) {
  .sentiment-label, .bar-label {
    font-size: 11px !important;
  }
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ── 8. UN VOTES — grid orphan cards fix ── */
@media (max-width: 768px) {
  .votes-grid,
  .kpi-strip:last-child > *:last-child:nth-child(odd) {
    grid-column: span 2 !important;
  }
}

/* ── 9. MOFA LANDING — ticker + hero text ── */
@media (max-width: 768px) {
  .ticker-wrap { padding: 0 !important; }
  .hero-desc, .hero p, .hero-sub {
    padding: 0 16px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}

/* ── 10. MINIMUM TAP TARGETS (Apple HIG 44pt) ── */
@media (max-width: 768px) {
  .filter-chip, .filter-tag, .pill, .badge-btn,
  .nav-tab, .tab-item,
  a.hd-btn-sm, button.icon-btn {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}