/**
 * 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; }
}