/* Panafrican.email Intelligence Center — REDESIGN SKIN
   Presentation-only overlay. Keeps every id, handler, API
   connection and map layer intact. Additive CSS. */
:root {
  --pana-navy: #03090f;
  --pana-line: rgba(36,215,255,.18);
  --pana-line-strong: rgba(36,215,255,.34);
  --pana-cyan: #00e5ff;
  --pana-gold: #ffc84a;
  --pana-green: #36ef9b;
  --pana-red: #ff4d55;
  --pana-orange: #ff9d36;
  --pana-font: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html, body {
  background:
    radial-gradient(1200px 700px at 30% 18%,rgba(0,210,255,.055),transparent 55%),
    radial-gradient(1100px 800px at 78% 88%,rgba(255,200,74,.04),transparent 50%),
    radial-gradient(1600px 1000px at 50% 40%,rgba(0,90,130,.4),transparent 60%),
    var(--pana-navy);
}

/* ---- Global scrollbars ---- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(3,12,22,.6)}
*::-webkit-scrollbar-thumb{background:rgba(36,215,255,.25);border-radius:8px;border:2px solid rgba(3,12,22,.9)}
*::-webkit-scrollbar-thumb:hover{background:rgba(36,215,255,.42)}
*{scrollbar-width:thin;scrollbar-color:rgba(36,215,255,.28) rgba(3,12,22,.55)}

@keyframes pana-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ================= TOP BAR ================= */
.topbar{
  height:76px;
  background:linear-gradient(180deg,rgba(8,17,27,.97),rgba(3,7,13,.98));
  border-bottom:1px solid var(--pana-line);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  position:relative;z-index:20;
}
.brand-mark img{filter:drop-shadow(0 0 8px rgba(0,229,255,.65)) drop-shadow(0 2px 10px rgba(255,200,74,.25))}
.brand-name{font-size:21px;letter-spacing:.6px;background:linear-gradient(90deg,#fff,#9fd8e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name span{background:linear-gradient(90deg,#00e5ff,#4d8bff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.brand-sub{letter-spacing:3.5px;color:#c9e7ef}
.brand-micro{color:#7fc4d2;letter-spacing:2.5px}

.top-metrics>div{position:relative;min-width:112px}
.top-metrics>div::after{content:"";position:absolute;left:18px;right:18px;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(36,215,255,.5),transparent);opacity:0;transition:.2s ease}
.top-metrics>div:hover::after{opacity:1}
.top-metrics span{color:#5fbfd0;font-size:8px;letter-spacing:2px}
.top-metrics b{font-size:22px;color:#fff;text-shadow:0 0 12px rgba(0,229,255,.25);margin-top:4px}

/* Header search */
.top-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:300px}
.top-right #utcClock{font-size:9px;letter-spacing:2px;color:#7ee8ff;display:inline-flex;align-items:center;gap:6px}
.top-right #utcClock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pana-green);box-shadow:0 0 10px var(--pana-green);animation:pana-pulse 2s infinite ease-in-out}
.search-box{display:flex;align-items:center;gap:8px;width:280px;height:32px;padding:0 10px;border:1px solid var(--pana-line);border-radius:8px;background:rgba(3,12,22,.8);transition:.2s ease}
.search-box:focus-within{border-color:var(--pana-line-strong);box-shadow:0 0 0 3px rgba(0,229,255,.12),0 0 18px rgba(0,229,255,.18);background:rgba(5,18,32,.95)}
.search-glyph{color:#00e5ff;font-size:15px;line-height:1;text-shadow:0 0 8px rgba(0,229,255,.7)}
.search-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e8f4f7;font-size:12px;font-family:var(--pana-font)}
.search-box input::placeholder{color:#4a6b79;letter-spacing:.5px}
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ================= WORKSPACE / SIDEBAR ================= */
.workspace{grid-template-columns:216px minmax(0,1fr) 378px;gap:12px;padding:12px}

.left-rail{
  grid-column:1;padding:14px 10px;
  background:linear-gradient(180deg,#0b1721 0%,#04090f 100%);
  border:1px solid var(--pana-line);border-radius:14px;
  box-shadow:inset 0 0 40px rgba(0,229,255,.03),0 18px 40px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:stretch;gap:6px;overflow-y:auto;
}
.rail-btn{
  width:100%;min-height:46px;display:flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:#82a0ad;font-size:10px;letter-spacing:1.6px;text-align:left;cursor:pointer;transition:.18s ease;
}
.rail-btn .afro-glyph{width:30px !important;height:30px !important;margin:0 !important}
.rail-btn .afro-glyph img{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important}
.rail-btn:hover,.rail-btn.active{
  background:linear-gradient(90deg,rgba(0,229,255,.14),rgba(0,229,255,.03));
  border-color:var(--pana-line-strong);color:#fff;
  box-shadow:inset 3px 0 0 var(--pana-cyan),0 0 18px rgba(0,229,255,.12);
}

/* Sector shortcuts */
.sector-nav{margin-top:16px;padding-top:13px;border-top:1px solid var(--pana-line);display:flex;flex-direction:column;gap:3px}
.sector-title{font-size:8px;letter-spacing:2.6px;color:#3f6172;margin-bottom:6px}
.sector-btn{
  width:100%;min-height:30px;padding:6px 11px;border:1px solid transparent;border-radius:8px;
  background:transparent;color:#5f7d8c;font-size:10px;letter-spacing:1.1px;text-align:left;cursor:pointer;transition:.15s ease;
}
.sector-btn:hover{color:#fff;background:rgba(0,229,255,.08);border-color:rgba(36,215,255,.22);box-shadow:inset 2px 0 0 var(--pana-gold)}

/* ================= MAIN STAGE ================= */
.main-stage{grid-template-columns:264px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 170px auto;gap:12px;padding:0}

/* Layer panel */
.layer-panel{
  grid-column:1;grid-row:1;border:1px solid var(--pana-line);border-radius:14px;
  background:linear-gradient(170deg,rgba(11,25,37,.95),rgba(4,10,16,.93));
  box-shadow:inset 0 0 30px rgba(0,229,255,.02),0 16px 36px rgba(0,0,0,.25);padding:15px;
}
.layer-panel h3{
  display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2.4px;color:#fff;
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--pana-line);
}
.layer-panel h3::before{content:"\25C8";color:var(--pana-cyan);font-size:12px;text-shadow:0 0 10px rgba(0,229,255,.8)}
.layer-panel nav{grid-template-columns:1fr 1fr;gap:6px}
.layer-panel button{
  border:1px solid rgba(36,215,255,.14);border-radius:9px;background:rgba(7,24,38,.6);
  color:#a9c4cf;font-size:10px;letter-spacing:.6px;padding:8px 9px;transition:.16s ease;
}
.layer-panel button:hover{border-color:var(--pana-line-strong);color:#fff;background:rgba(12,44,61,.9);transform:translateY(-1px)}
.layer-panel .active-layer{
  border-color:rgba(54,239,155,.5);color:#fff;
  background:linear-gradient(135deg,rgba(0,150,130,.4),rgba(8,38,56,.7));
  box-shadow:inset 3px 0 0 var(--pana-green),0 0 14px rgba(54,239,155,.15);
}

/* Event feed panel */
.event-panel{
  grid-column:1;grid-row:2;border:1px solid var(--pana-line);border-radius:14px;
  background:linear-gradient(170deg,rgba(11,25,37,.93),rgba(4,10,16,.9);
  box-shadow:0 14px 32px rgba(0,0,0,.22);padding:12px;
}
.section-title b{font-size:10px;letter-spacing:2px;color:#fff}
.section-title a,.view-all{font-size:9px;color:#00d7ff;text-decoration:none;cursor:pointer;letter-spacing:1px}
.section-title a:hover,#eventFeed .event-row:hover{text-shadow:0 0 10px rgba(0,229,255,.8)}
#eventFeed{min-height:0}
#eventFeed .event-row{
  border:1px solid rgba(36,215,255,.08);border-radius:9px;
  background:rgba(6,22,36,.55);margin:4px 0;padding:8px 10px;transition:.16s ease;
}
#eventFeed .event-row:hover,#eventFeed .event-row.active{
  background:rgba(13,48,66,.85);border-color:rgba(36,215,255,.3);box-shadow:0 0 14px rgba(0,229,255,.1);
}

/* ================= MAP PANEL ================= */
.map-panel{
  grid-column:2;grid-row:1/3;border:1px solid var(--pana-line-strong);border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.02);
  background:#0a1520;
}
.map-head{left:16px;right:16px;top:14px}
.map-head > div:first-child{
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(90deg,rgba(3,13,24,.82),rgba(3,13,24,.35));
  border:1px solid var(--pana-line);backdrop-filter:blur(6px);pointer-events:auto;
}
.map-head b{font-size:13px;letter-spacing:1.6px;color:#fff;display:flex;align-items:center;gap:8px}
.map-head b::before{content:"\25B2";color:var(--pana-cyan);font-size:8px;text-shadow:0 0 8px rgba(0,229,255,.9)}
.map-head small{color:#6f95a3;font-size:8px;letter-spacing:1px}
.map-head-status{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  border:1px solid rgba(54,239,155,.35);
  background:linear-gradient(90deg,rgba(6,30,42,.9),rgba(3,13,24,.5));
  color:var(--pana-green);font-size:9px;letter-spacing:2px;backdrop-filter:blur(6px);
}
.map-head-status i{width:8px;height:8px;background:var(--pana-green);box-shadow:0 0 10px var(--pana-green);animation:pana-pulse 2s infinite}

/* Overlays */
.legend{
  left:16px;top:74px;border-radius:11px;
  background:linear-gradient(160deg,rgba(3,13,24,.88),rgba(3,13,24,.6));
  border:1px solid var(--pana-line);backdrop-filter:blur(7px);
  padding:10px 13px;gap:8px;font-size:9px;letter-spacing:1px;color:#bfd9e0;
}
.legend-dot{width:10px;height:10px;box-shadow:0 0 9px currentColor;margin-right:8px}
.event{background:var(--pana-red);color:var(--pana-red)}
.aviation{background:var(--pana-gold);color:var(--pana-gold)}
.port{background:var(--pana-cyan);color:var(--pana-cyan)}
.choke{background:var(--pana-orange);color:var(--pana-orange)}
.map-actions{right:16px;bottom:16px;gap:6px}
.map-actions button{
  background:linear-gradient(160deg,rgba(4,18,32,.94),rgba(3,12,22,.9));
  border:1px solid var(--pana-line);border-radius:8px;color:#bcd6de;
  font-size:9px;letter-spacing:1.4px;padding:8px 12px;transition:.16s ease;
}
.map-actions button:hover{border-color:var(--pana-line-strong);color:#fff;box-shadow:0 0 14px rgba(0,229,255,.18);transform:translateY(-1px)}
.osiris{
  left:16px;bottom:16px;border-radius:10px;
  background:linear-gradient(160deg,rgba(3,13,24,.9),rgba(3,13,24,.62));
  border:1px solid var(--pana-line);padding:8px 12px;font-size:9px;letter-spacing:1.4px;color:#a9c8d4;backdrop-filter:blur(6px);
}
.osiris span{width:9px;height:9px;background:var(--pana-orange);box-shadow:0 0 10px var(--pana-orange)}
.osiris span.online{background:var(--pana-green);box-shadow:0 0 10px var(--pana-green)}
.osiris span.degraded{background:var(--pana-orange);box-shadow:0 0 10px var(--pana-orange)}
/* ================= BOTTOM KPI GRID ================= */
.bottom-grid{grid-column:2;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:0}
.metric-card{
  border:1px solid var(--pana-line);border-radius:13px;
  background:linear-gradient(165deg,rgba(11,26,37,.95),rgba(4,10,16,.92));
  box-shadow:inset 0 0 26px rgba(0,229,255,.03),0 12px 28px rgba(0,0,0,.2);
  padding:12px 13px;position:relative;transition:.18s ease;
}
.metric-card:hover{border-color:var(--pana-line-strong);transform:translateY(-1px)}
.metric-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.metric-card:nth-child(1)::before{background:var(--pana-red);box-shadow:0 0 12px var(--pana-red)}
.metric-card:nth-child(2)::before{background:var(--pana-gold);box-shadow:0 0 12px var(--pana-gold)}
.metric-card:nth-child(3)::before{background:var(--pana-cyan);box-shadow:0 0 12px var(--pana-cyan)}
.metric-card:nth-child(4)::before{background:var(--pana-green);box-shadow:0 0 12px var(--pana-green)}
.metric-card>span{font-size:8px;letter-spacing:2px;color:#6ec4d4}
.metric-card>strong{font-size:22px;color:var(--pana-green);text-shadow:0 0 14px rgba(54,239,155,.3)}
.metric-card small{color:#5f7f8b}
.metric-card p{color:#9db7c1}
.metric-card p b{color:var(--pana-gold)}

/* Continental Intelligence Risk — pinned to the left column, directly under LIVE EVENT FEED */
.main-stage .threat-assessment-card{grid-column:1;grid-row:3;min-height:0}
.main-stage .threat-assessment-card::before{background:var(--pana-red);box-shadow:0 0 12px var(--pana-red)}

/* Accent bars preserved for the 3 remaining bottom tiles */
.bottom-grid .metric-card:nth-child(1)::before{background:var(--pana-gold);box-shadow:0 0 12px var(--pana-gold)}
.bottom-grid .metric-card:nth-child(2)::before{background:var(--pana-cyan);box-shadow:0 0 12px var(--pana-cyan)}
.bottom-grid .metric-card:nth-child(3)::before{background:var(--pana-green);box-shadow:0 0 12px var(--pana-green)}

/* ================= RIGHT COLUMN ================= */
.right-column{
  grid-column:3;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding:0;padding-right:2px;
  scrollbar-width:thin;scrollbar-color:rgba(36,215,255,.28) transparent;
}

/* Signals / Top-news stream */
.signals-card{
  flex:0 0 auto;border:1px solid var(--pana-line);border-radius:14px;
  background:linear-gradient(170deg,rgba(11,25,37,.95),rgba(4,10,16,.93));
  box-shadow:inset 0 0 30px rgba(0,229,255,.03),0 16px 36px rgba(0,0,0,.25);padding:14px;
}
.signals-card .section-title small{color:#4dd2a2;font-size:8px;letter-spacing:1px;margin-top:4px}
.tabs{flex-wrap:wrap;gap:5px;margin:11px 0;padding-bottom:9px;border-bottom:1px solid var(--pana-line)}
.tabs button{
  border:1px solid rgba(36,215,255,.15);border-radius:20px;background:rgba(5,18,32,.7);
  padding:6px 11px;font-size:8px;letter-spacing:1.2px;color:#a7c2cd;transition:.15s ease;
}
.tabs button.active,.tabs button:hover{
  background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(0,120,160,.18));
  border-color:var(--pana-line-strong);color:#fff;box-shadow:0 0 12px rgba(0,229,255,.22);
}
#signals{display:flex;flex-direction:column;gap:6px}
#signals .signal-row{
  border:1px solid rgba(36,215,255,.1);border-radius:10px;padding:10px 11px;
  background:rgba(6,22,36,.55);transition:.16s ease;
}
#signals .signal-row:hover,#signals .signal-row.active{
  border-color:rgba(54,239,155,.4);background:rgba(10,38,54,.8);box-shadow:0 0 14px rgba(54,239,155,.12);
}
.signal-country{font-size:10px;font-weight:800;color:#fff;letter-spacing:.4px}
#signals .signal-row>b{color:#eaf6f9;font-size:11px;line-height:1.35}
#signals .signal-row small{color:#78a0ad;font-size:8px;letter-spacing:.5px}
.priority{border-radius:6px;font-size:7px;padding:4px 7px;letter-spacing:.8px}
.priority.high{background:linear-gradient(135deg,#ff4d55,#a0151d);color:#fff}
.priority.med{background:linear-gradient(135deg,#ffc84a,#b07a06);color:#081017}
.priority.low{background:linear-gradient(135deg,#36ef9b,#0f8a54);color:#02140b}

/* Intelligence Assessment */
.assessment{
  flex:0 0 auto;border:1px solid var(--pana-line-strong);border-radius:14px;
  background:linear-gradient(170deg,rgba(12,26,38,.97),rgba(4,10,16,.94));
  box-shadow:inset 0 0 34px rgba(0,229,255,.04),0 16px 40px rgba(0,0,0,.28);
  padding:16px;overflow-y:auto;
}
.assessment-title{
  display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:2.2px;
  color:var(--pana-cyan);text-shadow:0 0 12px rgba(0,229,255,.4);
  padding-bottom:10px;border-bottom:1px solid var(--pana-line);margin-bottom:8px;
}
.assessment-country{color:var(--pana-green);font-size:20px;font-weight:800;text-shadow:0 0 14px rgba(54,239,155,.35)}
.assessment h3{color:#fff;font-size:16px;margin:6px 0 12px;line-height:1.3}
.assessment-kind{color:var(--pana-cyan);letter-spacing:2px;font-weight:700}
.assessment-grid>div{background:rgba(5,19,32,.7);border:1px solid rgba(36,215,255,.16);border-radius:8px;padding:8px}
.assessment-grid small{color:#6fa0ae;letter-spacing:1.4px}
.assessment-grid strong{color:#dffaff;font-size:11px}
.assessment-summary{border-left:2px solid var(--pana-cyan);background:rgba(0,229,255,.05);border-radius:0 8px 8px 0}
.assessment-description p,#assessment p{color:#9db7c1;line-height:1.55}

/* Resource panels (Liberia + Ghana share .liberia-card) */
.right-column .liberia-card{
  flex:0 0 auto;border:1px solid var(--pana-line);border-radius:14px;
  background:linear-gradient(170deg,rgba(11,25,37,.95),rgba(4,10,16,.93));
  box-shadow:inset 0 0 26px rgba(0,229,255,.03),0 14px 32px rgba(0,0,0,.22);padding:14px;
}
.right-column .liberia-card .section-title b{font-size:10px;letter-spacing:2px;color:#fff}
.right-column .liberia-card .section-title small{color:#4f8fa3;font-size:8px;letter-spacing:1px;margin-top:3px}
.right-column .liberia-filter select{
  background:rgba(3,12,22,.85);color:#cfe4f5;border:1px solid var(--pana-line);
  border-radius:8px;padding:6px 8px;font-size:11px;
}
.right-column .liberia-filter select:focus{outline:0;border-color:var(--pana-line-strong);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.right-column .liberia-commodity{color:#9fc2ce;font-size:11px}
.right-column .liberia-commodity b{color:var(--pana-gold);text-shadow:0 0 8px rgba(255,200,74,.35)}
.right-column .liberia-count{color:var(--pana-gold);font-size:11px;letter-spacing:.5px}

/* Feed summary tiles (AVIATION / PORTS / CHOKEPOINTS / VESSELS) */
.right-column .feed-summary{
  flex:0 0 auto;border:1px solid var(--pana-line);border-radius:14px;padding:12px;gap:8px;
  background:linear-gradient(170deg,rgba(11,25,37,.93),rgba(4,10,16,.9));border:1px solid rgba(36,215,255,.14);
}
.right-column .feed-summary div{
  background:linear-gradient(170deg,rgba(11,25,37,.93),rgba(4,10,16,.9));border:1px solid rgba(36,215,255,.14);
  border-radius:9px;padding:9px 10px;transition:.16s ease;
}
.right-column .feed-summary div:hover{border-color:var(--pana-line-strong);box-shadow:0 0 12px rgba(0,229,255,.1)}
.right-column .feed-summary span{color:#5faabb;font-size:7px;letter-spacing:1.6px}
.right-column .feed-summary b{font-size:18px;color:#fff;text-shadow:0 0 10px rgba(0,229,255,.2)}
.right-column .feed-summary small{color:#607a84;font-size:7px}

/* ================= RESPONSIVE ================= */
@media (max-width:1280px){
  .workspace{grid-template-columns:200px minmax(0,1fr) 348px}
  .main-stage{grid-template-columns:236px minmax(0,1fr)}
  .top-metrics>div{min-width:96px;padding:0 12px}
  .search-box{width:230px}
}

@media (max-width:1080px){
  .workspace{grid-template-columns:62px minmax(0,1fr) 320px}
  .left-rail{overflow-y:auto}
  .rail-btn{justify-content:center;padding:8px 4px;text-align:center}
  .rail-btn > span:last-child{display:none !important}
  .rail-btn .afro-glyph,.rail-btn .afro-glyph img{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important}
  .sector-nav{display:none}
  .main-stage{grid-template-columns:200px minmax(0,1fr)}
  .top-metrics{display:none}
  .bottom-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:880px){
  html,body{overflow:auto;height:auto}
  .app-shell{height:auto}
  .workspace{grid-template-columns:1fr;grid-template-rows:auto;padding:10px;gap:10px}
  .topbar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 12px}
  .top-right{min-width:0;width:100%;align-items:stretch}
  .search-box{width:100%}
  .left-rail{flex-direction:row;overflow-x:auto;gap:6px;align-items:center}
  .rail-btn{min-height:44px;flex:0 0 auto;justify-content:center}
  .rail-btn > span:last-child{display:none !important}
  .rail-btn .afro-glyph,.rail-btn .afro-glyph img{width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important}
  .sector-nav{display:none}
  .main-stage{grid-template-columns:1fr;grid-template-rows:auto}
  .layer-panel{grid-column:1;grid-row:auto;max-height:220px}
  .event-panel{grid-column:1;grid-row:auto;max-height:300px}
  .map-panel{grid-column:1;grid-row:auto;min-height:480px;height:62vh}
  .bottom-grid{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr}
  .right-column{grid-column:1;overflow:visible;display:flex;flex-flow:column;gap:10px}
  .signals-card{max-height:340px}
}

@media (max-width:560px){
  .brand{min-width:0;width:100%}
  .top-metrics{display:none}
  .brand-mark,.brand-mark img{width:46px;height:46px}
  .brand-name{font-size:16px}
  .map-actions{right:10px;left:10px;bottom:10px;justify-content:center;flex-wrap:wrap}
  .legend{left:10px;top:60px}
  .map-head{left:10px;right:10px;top:10px}
  .map-head-status{display:none}
  .bottom-grid{grid-template-columns:1fr 1fr;gap:8px}
}