/* Panafrican.email Intelligence Center — MOBILE RESPONSIVE REDESIGN
   Frontend-only presentation layer. Loaded LAST (see index.html).
   The desktop layout (>=761px), backend, FastAPI routes, database, Docker,
   MapLibre sources/layers, mineral & resource data and the Intelligence
   Assessment engine are all left untouched. Every rule below is an additive
   override that only applies on small screens, so no desktop rule changes. */

/* Elements used only by the mobile UI — hidden on desktop by default */
.mob-burger,
.mob-drawer-close,
.mob-bottom-nav,
.mob-backdrop{display:none}

/* =========================================================
   MOBILE (<=760px) — iPhone Safari first (320 / 375 / 390 /
   393 / 430 portrait), single-column dashboard
   ========================================================= */
@media (max-width:760px){

  /* ---------- 1. Page: natural scroll, no horizontal overflow, viewport-safe ---------- */
  html,body{
    overflow-x:hidden;
    overflow-y:auto;
    height:auto;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    -webkit-tap-highlight-color:rgba(0,229,255,.08);
  }
  .app-shell{height:auto;min-height:100vh;min-height:100dvh;min-width:0}

  /* iOS zoom guard — inputs/selects under 16px autozoom on focus */
  .search-box input,
  .right-column .liberia-filter select{font-size:16px}

  /* ---------- 2. Compact two-row header ---------- */
  .topbar{
    height:auto;
    flex-wrap:wrap;
    gap:8px 10px;
    padding:
      max(8px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      6px max(12px,env(safe-area-inset-left));
    align-items:center;
  }
  .topbar .brand{order:1;flex:1 1 auto;width:auto;min-width:0;gap:9px}
  .brand-mark,.brand-mark img{width:40px;height:40px;flex-basis:40px}
  .brand-name{font-size:15px}
  .brand-sub{font-size:9px;letter-spacing:2.5px}
  .brand-micro{display:none}
  .topbar .top-right{order:3;flex-basis:100%;width:100%;min-width:0;align-items:stretch;gap:5px}
  .topbar .top-right > small{display:none}
  .topbar .top-right #utcClock{font-size:9px;align-self:flex-start}
  .topbar .search-box{width:100%;height:38px}

  /* Hamburger — compact touch control in the first header row */
  .mob-burger{
    order:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    width:44px;height:44px;flex:0 0 44px;
    margin-left:4px;
    border:1px solid rgba(36,215,255,.18);
    border-radius:10px;
    background:rgba(3,12,22,.8);
    cursor:pointer;
  }
  .mob-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#00e5ff;box-shadow:0 0 8px rgba(0,229,255,.7)}
  .mob-burger:active{background:rgba(0,229,255,.1)}

  /* ---------- 3. Sidebar becomes an off-canvas drawer ---------- */
  .left-rail{
    position:fixed;
    top:0;bottom:0;left:0;
    z-index:70;
    width:min(300px,84vw);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:max(14px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));
    overflow-y:auto;
    overflow-x:hidden;
    border-right:1px solid rgba(36,215,255,.18);
    border-radius:0 14px 14px 0;
    background:linear-gradient(180deg,#0b1721 0%,#04090f 100%);
    box-shadow:12px 0 40px rgba(0,0,0,.55);
    transform:translateX(-105%);
    transition:transform .25s ease;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .left-rail.open{transform:translateX(0)}
  .mob-drawer-close{
    display:flex;
    align-self:flex-end;
    width:40px;height:40px;
    align-items:center;justify-content:center;
    margin-bottom:6px;
    border:1px solid rgba(36,215,255,.18);
    border-radius:10px;
    background:rgba(3,12,22,.7);
    color:#00e5ff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }
  /* Full labels + touch-sized items inside the drawer */
  .left-rail .rail-btn{
    width:100%;
    min-height:46px;
    justify-content:flex-start;
    text-align:left;
    gap:11px;
    padding:8px 11px;
    font-size:10px;
    letter-spacing:1.6px;
    color:#82a0ad;
  }
  .left-rail .rail-btn > span:last-child{display:block !important}
  .left-rail .rail-btn .afro-glyph{
    width:30px !important;height:30px !important;margin:0 !important;
  }
  .left-rail .rail-btn .afro-glyph img{
    width:28px !important;height:28px !important;
    min-width:28px !important;min-height:28px !important;
  }
  .left-rail .sector-nav{display:flex;margin-top:14px;padding-top:12px;gap:4px}
  .left-rail .sector-title{font-size:9px;letter-spacing:2.6px}
  .left-rail .sector-btn{min-height:42px;font-size:11px;padding:8px 11px}

  /* Backdrop under the drawer */
  .mob-backdrop{
    position:fixed;inset:0;z-index:69;
    display:block;
    background:rgba(0,5,12,.6);
    backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .mob-backdrop.show{opacity:1;pointer-events:auto}

  /* Scroll-lock while the drawer is open */
  body.mob-menu-open{overflow:hidden}

  /* ---------- 4. Workspace + main stage: one 100% column ---------- */
  .workspace{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    gap:12px;
    padding:
      8px max(10px,env(safe-area-inset-right))
      calc(70px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
    min-width:0;
  }
  .main-stage{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    gap:12px;
    min-width:0;
    width:100%;
    max-width:100%;
  }
  .main-stage > *{
    grid-column:auto;
    grid-row:auto;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  /* Stacking order: map hero -> stats -> event feed -> risk -> layers */
  .main-stage .map-panel{order:1}
  .main-stage .bottom-grid{order:2}
  .main-stage .event-panel{order:3}
  .main-stage .threat-assessment-card{order:3}
  .main-stage .layer-panel{order:4}

  /* ---------- 5. Map: responsive full-width card (MapLibre logic untouched) ---------- */
  .map-panel{
    position:relative;
    width:100%;
    height:60vh;
    min-height:400px;
    max-height:70vh;
    border-radius:16px;
    overflow:hidden;
  }
  #globalMap{position:absolute;inset:0;width:100%;height:100%}
  .map-head{left:10px;right:10px;top:10px;z-index:5}
  .map-head > div:first-child{padding:8px 11px}
  .map-head small{display:none}
  .map-head b{font-size:12px}
  .map-head-status{display:none}
  .legend{left:10px;top:56px;z-index:5;padding:8px 10px;gap:6px;font-size:9px}
  .legend-dot{margin-right:6px}
  .map-actions{left:10px;right:10px;bottom:10px;z-index:5;justify-content:center;flex-wrap:wrap;gap:6px}
  .map-actions button{min-height:40px;padding:8px 14px;font-size:10px;letter-spacing:1.2px}
  .osiris{
    left:10px;bottom:58px;z-index:5;
    max-width:calc(100% - 20px);
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
  }
  .osiris b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- 6. Statistics: responsive cards (2 cols; full width spans) ---------- */
  .bottom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    min-width:0;
    width:100%;
  }
  .bottom-grid .metric-card{
    min-width:0;
    max-width:100%;
    min-height:0;
    padding:12px 13px;
    overflow:hidden;
  }
  .bottom-grid .metric-card:first-child,
  .bottom-grid .metric-card:last-child{grid-column:1 / -1}
  .bottom-grid .metric-card > span{font-size:8px}
  .bottom-grid .metric-card > strong{font-size:18px}
  .bottom-grid .metric-card p{overflow-wrap:anywhere}
  .recent-images-card .thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .recent-image{height:62px}

  /* ---------- 7. Live event feed: stacked card list ---------- */
  .event-panel{
    width:100%;
    max-width:100%;
    max-height:56vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:12px;
  }
  .event-panel .section-title{margin-bottom:6px}
  .event-panel .section-title b{font-size:10px}
  .event-panel .section-title a{font-size:9px}
  #eventFeed{min-height:120px}
  #eventFeed .event-row{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }
  #eventFeed .event-row strong,
  #eventFeed .event-row small{overflow-wrap:anywhere;word-break:break-word}

  /* ---------- 8. Layers panel ---------- */
  .layer-panel{
    width:100%;
    max-width:100%;
    max-height:42vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:13px;
  }
  .layer-panel h3{font-size:10px}
  .layer-panel nav{grid-template-columns:1fr 1fr;gap:6px}
  .layer-panel nav button{min-height:42px;font-size:11px;padding:8px 10px}

  /* ---------- 9. Right column: full-width stacked ---------- */
  .right-column{
    grid-column:auto;
    grid-row:auto;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    display:flex;
    flex-flow:column;
    gap:12px;
    padding:0;
  }
  .right-column > *{min-width:0;max-width:100%;width:100%;box-sizing:border-box}

  .signals-card{max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:13px}
  .tabs{flex-wrap:wrap;gap:5px}
  .tabs button{min-height:34px;padding:6px 11px;font-size:9px}
  #signals .signal-row{padding:10px 11px}
  .signal-main{min-width:0}
  .signal-country{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #signals .signal-row > b{overflow-wrap:anywhere;word-break:break-word}
  .signal-row time{position:static;display:block;margin-top:5px;text-align:left}

  /* Intelligence Assessment — full width, natural text wrapping, no clipping */
  .assessment{width:100%;max-width:100%;min-height:0;padding:15px;overflow-wrap:anywhere}
  .assessment-title{font-size:10px}
  .assessment-country{font-size:18px}
  .assessment h3{font-size:15px;overflow-wrap:anywhere;word-break:break-word}
  .assessment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  .assessment-grid > div{min-width:0;max-width:100%}
  .assessment-grid b{white-space:normal;overflow:visible;text-overflow:clip}
  .assessment-summary{min-width:0}
  .assessment-description p,
  .assessment p{overflow-wrap:anywhere}

  /* Resource / mineral panels — data & commodity-list scrollbar preserved */
  .right-column .liberia-card{padding:13px 14px;width:100%}
  .right-column .liberia-summary{width:100%}
  .right-column .resource-commodity-list{height:auto;max-height:240px}
  .liberia-commodity{flex-wrap:wrap;gap:2px 8px}

  .feed-summary{gap:10px;width:100%}
  .feed-summary div{padding:11px 12px;min-width:0}
  .feed-summary b{font-size:17px}

  /* ---------- 10. Fixed bottom navigation ---------- */
  .mob-bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:30;
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    height:calc(58px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,rgba(8,17,27,.97),rgba(3,7,13,.98));
    border-top:1px solid rgba(36,215,255,.18);
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
  }
  .mob-nav-btn{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 2px;
    background:transparent;
    border:0;
    color:#82a0ad;
    font-size:8px;
    letter-spacing:1.2px;
    cursor:pointer;
  }
  .mob-nav-btn span{font-size:16px;line-height:1;color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,.55)}
  .mob-nav-btn:active{color:#fff;background:linear-gradient(180deg,rgba(0,229,255,.12),transparent)}
  .mob-nav-btn:active span{color:#fff}
}

/* ---------- 11. Short screens (landscape phones) ---------- */
@media (max-width:760px) and (max-height:520px){
  .map-panel{height:58vh;min-height:300px;max-height:none}
  .layer-panel{max-height:52vh}
  .event-panel{max-height:62vh}
  .signals-card{max-height:64vh}
}

/* ---------- 12. Narrow phones (<=380px: iPhone SE) ---------- */
@media (max-width:380px){
  .bottom-grid{grid-template-columns:minmax(0,1fr)}
  .bottom-grid .metric-card:first-child,
  .bottom-grid .metric-card:last-child{grid-column:auto}
  .assessment-grid{grid-template-columns:1fr}
  .brand-mark,.brand-mark img{width:36px;height:36px;flex-basis:36px}
  .brand-name{font-size:14px}
  .brand-sub{font-size:8px;letter-spacing:2px}
  .mob-burger{width:42px;height:42px;flex-basis:42px}
  .rail-btn{min-height:44px;padding:7px 11px}
  .map-actions button{min-height:42px;padding:8px 12px;font-size:10px}
}