/* Panafrican.email Intelligence Center — UI UPDATE
   Drop-in visual layer. Does not replace JavaScript, API, map data,
   OSIRIS integration, threat logic, satellite imagery, or live signals.
*/

:root{
  --ui-bg:#020914;
  --ui-panel:rgba(5,18,31,.88);
  --ui-panel-2:rgba(8,27,43,.78);
  --ui-border:rgba(88,151,188,.28);
  --ui-text:#e8f4f7;
  --ui-muted:#86a1ae;
  --ui-green:#36ef9b;
  --ui-cyan:#24d7ff;
  --ui-yellow:#ffc84a;
  --ui-orange:#ff9d36;
  --ui-red:#ff4d55;
  --ui-radius:10px;
}

html,body{
  background:
    radial-gradient(circle at 52% 35%,rgba(17,77,112,.18),transparent 34%),
    radial-gradient(circle at 85% 80%,rgba(0,151,126,.08),transparent 28%),
    var(--ui-bg);
  color:var(--ui-text);
}

body{
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;
}

/* Main glass-panel language */
.panel,
.card,
.dashboard-card,
.feed-panel,
.signal-panel,
.assessment,
.intelligence-assessment,
.map-panel,
#eventFeed,
#liveSignals,
#assessment{
  background:linear-gradient(145deg,var(--ui-panel),rgba(2,12,22,.84));
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}

/* Intelligence Layers */
#layers{
  display:flex;
  flex-direction:column;
  gap:5px;
}

#layers button{
  position:relative;
  width:100%;
  min-height:36px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:7px;
  background:rgba(10,31,48,.68);
  color:#c7d8df;
  text-align:left;
  font-weight:650;
  font-size:13px;
  cursor:pointer;
  transition:.18s ease;
}

#layers button:hover{
  background:rgba(20,54,73,.9);
  border-color:rgba(36,215,255,.28);
  color:#fff;
  transform:translateX(2px);
}

#layers button.active-layer{
  color:#fff;
  background:linear-gradient(90deg,rgba(26,91,112,.9),rgba(17,48,66,.82));
  border-color:rgba(54,239,155,.55);
  box-shadow:inset 3px 0 0 var(--ui-green),0 0 16px rgba(54,239,155,.08);
}

#layers button.active-layer::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--ui-green);
  box-shadow:0 0 10px var(--ui-green);
}

/* Event feed */
#eventFeed{
  min-height:250px;
  padding:7px;
  overflow:auto;
}

.event-row{
  display:block !important;
  grid-template-columns:7px 1fr auto;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  margin:3px 0;
  border-radius:7px;
  border:1px solid transparent;
  background:rgba(8,25,39,.54);
  cursor:pointer;
}

.event-row:hover,
.event-row.active{
  background:rgba(15,48,66,.88);
  border-color:rgba(36,215,255,.3);
}

.event-row::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ui-red);
  box-shadow:0 0 8px currentColor;
}

.event-row strong{
  display:block !important;
  color:#fff;
  font-size:12px;
}

.event-row div{
  color:#c9d9df;
  font-size:12px;
}

/* REGIONAL ACTIVITY — intelligence activity bars */
.bottom-grid .metric-card:nth-child(1) {
  position: relative;
  overflow: hidden;
}

.bottom-grid .metric-card:nth-child(1) p {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 7px 9px;
  border-left: 2px solid rgba(20,217,255,.65);
  background: rgba(5,25,35,.72);
  color: #9bb3bd;
  font-size: 9px;
  letter-spacing: .5px;
}

.bottom-grid .metric-card:nth-child(1) p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--activity-width, 0%);
  background: #14d9ff;
  box-shadow: 0 0 8px rgba(20,217,255,.8);
}

.bottom-grid .metric-card:nth-child(1) p:nth-of-type(1) {
  --activity-width: 38%;
}

.bottom-grid .metric-card:nth-child(1) p:nth-of-type(2) {
  --activity-width: 24%;
}

.bottom-grid .metric-card:nth-child(1) p:nth-of-type(3) {
  --activity-width: 18%;
}

.bottom-grid .metric-card:nth-child(1) p b {
  color: #e8fbff;
  font-size: 11px;
  font-weight: 700;
}

.event-row small{
  color:var(--ui-muted);
  font-size:10px;
}

/* Live signal stream */
#liveSignals,
.signals-list,
.live-signals{
  overflow:auto;
}

.signal-row{
  padding:9px 10px;
  margin:4px 0;
  border:1px solid rgba(76,132,161,.16);
  border-radius:7px;
  background:rgba(8,25,39,.55);
}

.signal-row:hover{
  border-color:rgba(54,239,155,.38);
  background:rgba(12,43,53,.72);
}

.signal-row strong{
  display:block;
  color:var(--ui-green);
  font-size:10px;
  letter-spacing:.08em;
}

.signal-row b{
  display:block;
  margin:3px 0;
  color:#eef7fa;
  font-size:12px;
}

.signal-row small{
  color:#7fa0ad;
  font-size:10px;
}

/* Map / OSIRIS surface — leaves existing map and markers untouched */
#africaMap,
.map-container,
.map-panel{
  overflow:hidden;
}

.topographic-map{
  filter:saturate(.92) contrast(1.06) brightness(.82);
}

#markers{
  pointer-events:auto;
}

#markers circle,
#markers .marker{
  filter:drop-shadow(0 0 6px rgba(54,239,155,.75));
}

/* Intelligence assessment */
#assessment,
.intelligence-assessment,
.assessment{
  min-height:190px;
  padding:16px;
}

.assessment-title{
  color:var(--ui-cyan);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}

#assessment h3,
.intelligence-assessment h3,
.assessment h3{
  margin:7px 0;
  color:#fff;
  font-size:17px;
}

#assessment p,
.intelligence-assessment p,
.assessment p{
  color:#91aab5;
  font-size:12px;
  line-height:1.55;
}

.assessment-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:12px;
}

.assessment-stats span{
  padding:7px 8px;
  border:1px solid rgba(83,142,169,.2);
  border-radius:6px;
  background:rgba(8,26,40,.65);
  color:#c8d8de;
  font-size:10px;
}

.assessment-stats b{
  display:block;
  margin-bottom:2px;
  color:#6f929f;
  font-size:8px;
  letter-spacing:.08em;
}

/* Threat / activity / satellite cards */
.threat,
.regional-activity,
.weather-overlay,
.satellite-view,
.recent-images,
.traffic-overlay,
.financial-movement{
  border:1px solid var(--ui-border);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(7,25,39,.9),rgba(3,14,24,.82));
}

.live,
.status-live,
[class*="live"]{
  text-shadow:0 0 9px rgba(54,239,155,.35);
}

.status-live{
  color:var(--ui-green);
}

/* Empty state */
.empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80px;
  padding:15px;
  color:#6f8b96;
  font-size:11px;
  text-align:center;
}

/* 16:9 command-center presentation */
@media (min-width:1200px){
  body{
    overflow-x:hidden;
  }
}

@media (max-width:850px){
  .assessment-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* BOTTOM INTELLIGENCE GRID — persistent sizing */
.bottom-grid {
  min-height: 118px !important;
  height: auto !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.bottom-grid .metric-card {
  min-height: 118px !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.bottom-grid .metric-card > span {
  margin-bottom: 8px;
}

.bottom-grid .metric-card p {
  min-height: 18px;
}

/* Compact bottom intelligence cards */
.bottom-grid .metric-card:nth-child(1) p {
  margin: 5px 0 !important;
  padding: 5px 8px !important;
  min-height: 16px !important;
}

.bottom-grid .metric-card:nth-child(1) p b {
  font-size: 10px !important;
}

.bottom-grid .metric-card:nth-child(2) > strong {
  font-size: 16px !important;
  white-space: nowrap;
}

.bottom-grid .metric-card:nth-child(3) .thumbs {
  min-height: 55px;
}