/* ============================================================
   sidebar-airnav.css — "Radar Glass" sidebar restyle
   Tema identitas AirNav (navigasi udara / ATC).
   Override murni — tidak menyentuh struktur nav (buildNav).
   ============================================================ */

/* ---- shell: navy glass + radar backdrop ---- */
.sidebar{
  background:
    linear-gradient(184deg,
      color-mix(in srgb,var(--navy) 92%, #12325e) 0%,
      var(--navy) 34%,
      color-mix(in srgb,var(--navy) 88%, #000) 100%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-right:1px solid color-mix(in srgb,var(--primary) 26%, transparent) !important;
  overflow-x:hidden;overflow-y:auto;
}
.sidebar>*{position:relative;z-index:2}

/* radar rings + sweep, anchored top of the rail */
.sidebar::before{
  content:"";position:absolute;left:50%;top:-96px;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;z-index:1;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 30px,
      color-mix(in srgb,var(--primary) 22%, transparent) 30px 31px);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 60%, transparent 72%);
  mask:radial-gradient(circle at 50% 50%, #000 0 60%, transparent 72%);
  opacity:.5;
}
.sidebar::after{
  content:"";position:absolute;left:50%;top:-96px;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,
    color-mix(in srgb,var(--primary) 55%, transparent) 0deg,
    transparent 42deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 58%, transparent 70%);
  mask:radial-gradient(circle at 50% 50%, #000 0 58%, transparent 70%);
  opacity:.4;
  animation:sbRadarSweep 6.5s linear infinite;
}
@keyframes sbRadarSweep{to{transform:translateX(-50%) rotate(360deg)}}

/* ---- brand: callsign badge ---- */
.brand::after{
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb,var(--primary) 55%, transparent) 20%,
    color-mix(in srgb,#f5b731 60%, transparent) 50%,
    color-mix(in srgb,var(--primary) 55%, transparent) 80%, transparent) !important;
}
.brand-txt span{font-family:var(--mono);letter-spacing:.06em;font-size:10px;text-transform:uppercase}

/* ---- group headers: ATC channel labels ---- */
.nav-grp-head{
  font-family:var(--mono) !important;letter-spacing:.16em !important;
  color:#7f90b6 !important;position:relative;padding-left:20px !important;
}
.nav-grp-head::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 70%, #fff);
  box-shadow:0 0 6px color-mix(in srgb,var(--primary) 90%, transparent);
  opacity:.7;
}
.nav-grp-head:hover{color:#aab8da !important}

/* ---- nav items: flight-strip rows ---- */
.nav-item{
  border-radius:10px !important;
  border-left:2px solid transparent !important;
  transition:background .18s,color .18s,border-color .2s,box-shadow .2s !important;
}
.nav-item:hover{
  background:rgba(120,160,240,.08) !important;
  border-left-color:color-mix(in srgb,var(--primary) 55%, transparent) !important;
}

/* active row: runway light rail + pulsing radar blip */
.nav-item.active{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--primary) 26%, transparent),
    color-mix(in srgb,var(--primary) 10%, transparent) 70%, transparent) !important;
  border-left:2px solid #f5b731 !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 26%, transparent),
    -1px 0 14px color-mix(in srgb,#f5b731 30%, transparent) !important;
}
.nav-item.active::before{
  content:"" !important;position:absolute !important;left:-2px !important;top:50% !important;
  transform:translateY(-50%) !important;width:0 !important;height:0 !important;
  border-radius:0 !important;background:none !important;box-shadow:none !important;
}
/* radar blip pinned to the right of the active row */
.nav-item.active::after{
  content:"";position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);
  animation:sbBlip 1.6s ease-out infinite;
}
@keyframes sbBlip{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.nav-item.active .ic{
  background:color-mix(in srgb,var(--primary) 48%, transparent) !important;
  box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 45%, transparent) !important;
}
.nav-item.active .idx{color:#f5b731 !important;opacity:.9 !important}

/* collapsed rail: blip sits centered under icon */
.app.sidebar-collapsed .nav-item.active::after{right:auto;left:50%;top:auto;bottom:5px;transform:translateX(-50%)}

/* ---- footer: taxiway stripe ---- */
.sidebar-foot{
  border-top:1px dashed color-mix(in srgb,var(--primary) 28%, transparent) !important;
  font-family:var(--mono);font-size:10px;letter-spacing:.02em;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .sidebar::after{animation:none;opacity:.28}
  .nav-item.active::after{animation:none}
}