/* ══════════════════════════════════════════════════════════
   TAPIR · map.css
   Map-specific styles (shared across all pages)
   ══════════════════════════════════════════════════════════ */

/* ── Station list item ── */
.station-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--tr-fast);
}
.station-item:hover { background: var(--surface2); }
.station-item:last-child { border-bottom: none; }
.stn-row1 { display: flex; align-items: center; gap: 6px; }
.stn-freq { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent); }
.stn-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; }
.stn-client { font-size: 10px; color: var(--muted-hi); }

/* ── Detail panel content ── */
.detail-wrap { padding: 12px 14px 20px; }
.detail-svc-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  border: 1px solid; border-radius: var(--r-xs);
  padding: 2px 7px; margin-bottom: 8px; opacity: .85;
}
.detail-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.detail-freq { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-bottom: 12px; }
.detail-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.detail-table tr { border-bottom: 1px solid var(--border); }
.detail-table tr:last-child { border-bottom: none; }
.detail-table td { padding: 4px 0; font-size: 11px; vertical-align: top; }
.detail-table td:first-child { color: var(--muted-hi); width: 40%; }
.detail-table td:last-child { font-family: var(--mono); font-size: 10.5px; }

/* ── Detail action buttons ── */
.detail-actions { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.btn-action {
  flex: 1; min-width: 80px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 600; font-family: var(--sans);
  border: 1px solid; cursor: pointer;
  transition: background var(--tr), box-shadow var(--tr);
}
.btn-coverage {
  background: rgba(0,229,255,.06); border-color: rgba(0,229,255,.25); color: var(--accent);
}
.btn-coverage:hover { background: rgba(0,229,255,.12); box-shadow: 0 0 12px rgba(0,229,255,.12); }
.btn-grid {
  background: rgba(167,139,250,.06); border-color: rgba(167,139,250,.25); color: var(--purple);
}
.btn-grid:hover { background: rgba(167,139,250,.12); }
.btn-sim-link {
  background: rgba(167,139,250,.06); border-color: rgba(167,139,250,.25); color: var(--purple);
  text-decoration: none;
}
.detail-sim-actions { display: flex; gap: 6px; margin-top: 4px; }
.btn-sim-wanted, .btn-sim-ifr {
  flex: 1; padding: 8px 6px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 600; font-family: var(--sans);
  border: 1px solid; cursor: pointer;
  transition: background var(--tr), box-shadow var(--tr);
}
.btn-sim-wanted {
  background: rgba(234,179,8,.07); border-color: rgba(234,179,8,.3); color: var(--yellow);
}
.btn-sim-wanted:hover { background: rgba(234,179,8,.14); }
.btn-sim-ifr {
  background: rgba(0,229,255,.06); border-color: rgba(0,229,255,.25); color: var(--accent);
}
.btn-sim-ifr:hover { background: rgba(0,229,255,.12); }

/* ── Grid progress ── */
.detail-grid-progress { margin-top: 8px; }
.detail-grid-msg { font-size: 10px; color: var(--muted-hi); margin-bottom: 4px; }
.detail-grid-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; }
.detail-grid-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; width: 0%; }

/* ── Global grid progress float ── */
.grid-progress-float {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-b) + 10px);
  left: 12px; right: 72px;
  z-index: 450;
  background: var(--surface2); border: 1px solid var(--border-hi);
  border-radius: var(--r-sm); padding: 8px 12px;
  box-shadow: var(--shadow-float);
}
.grid-progress-float.hidden { display: none; }
.grid-progress-header {
  display: flex; justify-content: space-between;
  font-size: 10px; margin-bottom: 5px;
}
.grid-progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.grid-progress-bar > div {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width .3s; box-shadow: 0 0 6px var(--accent-glow);
}

/* ── FAB cluster ── */
.fab-cluster {
  position: fixed;
  right: 14px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
  z-index: 510;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
}

/* ── Map hint overlay ── */
.map-hint {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 450;
  background: var(--surface2); border: 1px solid var(--border-hi);
  border-radius: var(--r-sm); padding: 12px 18px;
  text-align: center; font-size: 12px; color: var(--text-dim);
  box-shadow: var(--shadow-float); pointer-events: none;
}
.map-hint.hidden { display: none; }

/* ── Sim queue badge ── */
.sim-queue-badge {
  background: var(--yellow); color: #000;
  border-radius: 10px; font-size: 9px; font-weight: 700;
  padding: 1px 5px; margin-left: 3px;
}

/* ── Expiry list ── */
.expiry-list {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 4px;
}
.expiry-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--tr-fast);
}
.expiry-row:last-child { border-bottom: none; }
.expiry-row:hover { background: var(--surface2); }
.exp-days { font-family: var(--mono); font-size: 9px; font-weight: 700; min-width: 68px; flex-shrink: 0; padding-top: 1px; }
.exp-info { font-size: 10px; line-height: 1.5; }
.exp-info b { font-weight: 600; }
.exp-info small { color: var(--muted-hi); font-size: 9px; }
.exp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.exp-expired  { background: var(--red); }
.exp-critical { background: var(--orange); }
.exp-warning  { background: var(--yellow); }

/* ── Leaflet MarkerCluster override ── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: none !important; }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background: none !important; }
/* Icon custom via JS, CSS hanya reset default */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform .3s ease-out, opacity .3s ease-in;
}