/* ===============================================================
   PinCat Threat Globe (3D) — Styles
   File: static/css/technologies/threat_globe.css
   =============================================================== */

.threat-titlebar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
@media (min-width: 880px){
  .threat-titlebar{ flex-direction:row; align-items:center; justify-content:space-between; }
}

.threat-title{ display:flex; align-items:center; gap:10px; }
.threat-dot{
  width:10px; height:10px; border-radius:50%;
  background:#22c55e;
  box-shadow: 0 0 18px rgba(34,197,94,.9);
}
.threat-h{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
  color:#0f172a;
}
.threat-i{
  width:18px; height:18px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 12px; font-weight:800;
  background:#e5e7eb; color:#0f172a;
}

.threat-meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.threat-updated{ font-size: 12px; color:#475569; }

.th-switch{ display:flex; align-items:center; gap:10px; user-select:none; }
.th-switch-label{ font-size:12px; color:#334155; }
.th-switch input{ display:none; }
.th-switch-ui{
  width:44px; height:24px; border-radius:999px;
  background:#cbd5e1; position:relative; cursor:pointer;
  transition:.2s;
}
.th-switch-ui::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition:.2s;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.th-switch input:checked + .th-switch-ui{ background:#22c55e; }
.th-switch input:checked + .th-switch-ui::after{ transform: translateX(20px); }

/* Stage + Globe */
.threat-stage{
  position:relative;
  height: 460px;
  margin-top: 12px;
  border-radius: 18px;
  overflow:hidden;
  background:#05070c;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.threat-globe{ position:absolute; inset:0; }

.th-live-badge{
  position:absolute; top:14px; right:14px;
  padding:6px 10px; border-radius:999px;
  background: rgba(239,68,68,.95);
  color:#fff; font-size:11px; font-weight:900; letter-spacing:.6px;
  border:1px solid rgba(255,255,255,.16);
}

/* Controls */
.th-controls{
  position:absolute;
  right:14px;
  bottom: 14px;
  display:flex;
  gap:10px;
  z-index: 50;
}
.th-btn{
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.th-btn:hover{ background: rgba(255,255,255,.16); }
.th-btn-ghost{ background: transparent; }

/* Panels */
.threat-panels{
  position:absolute;
  left:14px;
  right:14px;
  bottom: 14px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
  z-index: 40;
  pointer-events:none;
}
@media (max-width: 1100px){
  .threat-panels{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.th-panel{
  pointer-events:auto;
  background: rgba(12,14,20,.76);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  color:#e5e7eb;
  min-height: 150px;
}
.th-panel-head{
  background: rgba(245,158,11,.95);
  color:#0b1220;
  font-weight: 900;
  letter-spacing:.4px;
  font-size: 12px;
  padding: 10px 12px;
}
.th-list{ padding: 10px 12px; display:flex; flex-direction:column; gap:10px; }

.th-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size: 12px;
}
.th-row .th-left{ display:flex; gap:10px; align-items:center; min-width: 0; }
.th-pill{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size: 11px;
  font-weight:800;
  color:#fff;
}
.th-name{
  color:#e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-val{ font-weight: 900; color:#fff; }

.th-legend{ padding: 10px 12px; display:flex; flex-direction:column; gap:10px; }
.th-leg-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size: 12px;
}
.th-leg-square{ width:12px; height:12px; border-radius: 3px; display:inline-block; margin-right:8px; }
.th-red{ background:#ef4444; }
.th-yellow{ background:#f59e0b; }
.th-blue{ background:#3b82f6; }

/* ✅ Compact ONLY these panels:
   3) TOP ATTACK TYPES
   4) TOP 3 ATTACKER IP ADDRESS
   5) ATTACK SITE STATISTICS */
.threat-panels .th-panel:nth-child(3),
.threat-panels .th-panel:nth-child(4),
.threat-panels .th-panel:nth-child(5){
  min-height: 110px;
}
.threat-panels .th-panel:nth-child(3) .th-panel-head,
.threat-panels .th-panel:nth-child(4) .th-panel-head,
.threat-panels .th-panel:nth-child(5) .th-panel-head{
  padding: 7px 10px;
  font-size: 11px;
}
.threat-panels .th-panel:nth-child(3) .th-list,
.threat-panels .th-panel:nth-child(4) .th-list,
.threat-panels .th-panel:nth-child(5) .th-legend{
  padding: 8px 10px;
  gap: 6px;
}
.threat-panels .th-panel:nth-child(3) .th-row,
.threat-panels .th-panel:nth-child(4) .th-row,
.threat-panels .th-panel:nth-child(5) .th-leg-row{
  font-size: 11px;
}
.threat-panels .th-panel:nth-child(3) .th-pill,
.threat-panels .th-panel:nth-child(4) .th-pill{
  padding: 3px 6px;
  font-size: 10px;
}
.threat-panels .th-panel:nth-child(5) .th-leg-square{
  width: 10px;
  height: 10px;
}

/* ============================
   Mobile: best UX
   - Stage auto-height
   - Globe gets its own height
   - Panels under globe
   ============================ */
@media (max-width: 640px){

  .threat-stage{
    height: auto;
    overflow: visible;
    padding-bottom: 12px;
  }

  .threat-globe{
    position: relative;
    inset: auto;
    height: 280px;
  }

  .threat-panels{
    position: static;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    pointer-events: auto;
  }

  .th-panel{ min-height: auto; }

  .th-controls{
    position: static;
    margin-top: 10px;
    justify-content: flex-end;
  }

  .th-live-badge{
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .threat-updated{ font-size: 11px; }
  .th-switch-label{ font-size: 11px; }
}

@media (max-width: 380px){
  .threat-globe{ height: 250px; }
}

/* ===============================================================
   Desktop layout FIX:
   Globe сверху, панели в нижнем "доке" (не перекрывают глобус)
   =============================================================== */

@media (min-width: 900px){

  /* Делаем контейнер "stage" сеткой: сверху globe, снизу панель */
  .threat-stage{
    display: grid;
    grid-template-rows: 1fr auto; /* globe / dock */
    padding: 16px;
    height: 520px;                /* общая высота блока */
  }

  /* Globe занимает верхнюю часть и НЕ absolute */
  .threat-globe{
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }

  /* Панели становятся нижним доком */
  .threat-panels{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;

    grid-row: 2;
    margin-top: 12px;

    display: grid;
    grid-template-columns: 1.1fr 1.1fr .9fr .9fr 1.0fr;
    gap: 10px;

    pointer-events: auto;
  }

  /* Панели чуть ниже по высоте */
  .th-panel{
    min-height: 120px;
  }

  /* 3 маленькие ещё компактнее */
  .threat-panels .th-panel:nth-child(3),
  .threat-panels .th-panel:nth-child(4),
  .threat-panels .th-panel:nth-child(5){
    min-height: 105px;
  }

  /* Controls уезжают в правый нижний угол (в док) */
  .th-controls{
    position: relative;
    right: auto;
    bottom: auto;
    grid-row: 2;
    justify-content: flex-end;
    margin-top: 10px;
  }

  /* LIVE badge остаётся поверх globe (внутри stage) */
  .th-live-badge{
    top: 18px;
    right: 18px;
    z-index: 60;
  }
}

/* Ещё чуть компактнее на "ноутах" */
@media (min-width: 900px) and (max-width: 1200px){
  .threat-stage{ height: 480px; }
  .th-panel-head{ font-size: 11px; padding: 8px 10px; }
  .th-list, .th-legend{ padding: 8px 10px; }
}