.ui-input {
  @apply px-4 py-2.5 rounded-2xl bg-black/40 border border-white/10 outline-none
         text-white placeholder:text-white/40
         focus:border-yellow-300/40 focus:ring-2 focus:ring-yellow-300/10;
}
.ui-select {
  @apply px-4 py-2.5 rounded-2xl bg-black/40 border border-white/10 outline-none text-white;
}
.ui-btn {
  @apply inline-flex items-center justify-center gap-2
         px-4 py-2.5 rounded-2xl text-sm
         border border-white/10 bg-white/5
         hover:bg-white/10 transition
         active:scale-[0.99];
}
.ui-btn-ghost {
  @apply bg-white/5;
}
.ui-btn-gold {
  @apply border-yellow-300/30
         bg-gradient-to-r from-yellow-300/20 to-amber-500/10
         hover:from-yellow-300/30 hover:to-amber-500/20;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}
.badge-pelanggan { color: rgba(253, 224, 71, 0.95); }
.badge-driver    { color: rgba(147, 197, 253, 0.95); }
.badge-mitra     { color: rgba(134, 239, 172, 0.95); }

.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

:root{
  --gn-sidebar-w: 260px;
  --gn-safe-b: env(safe-area-inset-bottom, 0px);
  --gn-safe-t: env(safe-area-inset-top, 0px);
  --gn-topbar-h: 64px;
}

.gn-shell{
  min-height: 100vh;
  min-height: 100svh;
}

.gn-main{
  flex: 1;
  min-width: 0;
}

.gn-header{
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: var(--gn-safe-t);
}

.gn-container{
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 18px;
  padding-bottom: calc(18px + var(--gn-safe-b));
}
@media (min-width: 768px){
  .gn-container{
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

.gn-sidebar{
  width: var(--gn-sidebar-w);
  flex: 0 0 var(--gn-sidebar-w);
}

.gn-mobilebar{ display:none; }

@media (max-width: 767.98px){
  .gn-sidebar{ display:none !important; }

  .gn-mobilebar{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
    bottom: calc(12px + var(--gn-safe-b));
    z-index: 50;
    gap:10px;
    padding:10px 12px;
    border-radius: 18px;
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  }

  .gn-mobilebar .gn-mb-left{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    min-width:0;
  }
  .gn-mobilebar .gn-mb-title{
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gn-mobilebar .gn-mb-sub{
    font-size:11px;
    color: rgba(255,255,255,0.55);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gn-mobilebar .gn-mb-actions{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:center;
  }

  .gn-container{
    padding-bottom: calc(92px + var(--gn-safe-b));
  }

  .ui-input, .ui-select{
    padding: 10px 12px;
    border-radius: 16px;
  }
  .ui-btn{
    padding: 10px 12px;
    border-radius: 16px;
  }

  .pill{ font-size: 11px; padding: 6px 9px; }
  .badge{ font-size: 11px; padding: 4px 9px; }
}

#networkCanvas{
  width: 100%;
  height: 70vh;
  min-height: 520px;
}
@media (max-width: 1024px){
  #networkCanvas{
    height: 62vh;
    min-height: 460px;
  }
}
@media (max-width: 767.98px){
  #networkCanvas{
    height: 48vh;
    min-height: 320px;
  }
}

#networkCanvas,
#networkCanvas canvas{
  pointer-events: auto !important;
  touch-action: none;
}

#netPanel:fullscreen{
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}
#netPanel:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

#netPanel:fullscreen #networkCanvas{
  height: calc(100vh - var(--gn-topbar-h)) !important;
  min-height: 0 !important;
}
#netPanel:-webkit-full-screen #networkCanvas{
  height: calc(100vh - var(--gn-topbar-h)) !important;
  min-height: 0 !important;
}

@media (max-width: 767.98px){
  :root{ --gn-topbar-h: 112px; }
}