/* Menu-bar Battery & Wi-Fi dropdown panels (see js/statusMenus.js). */
.status-panel {
  position: fixed;
  top: calc(var(--menubar-h) + 6px);
  width: 268px;
  z-index: 8800;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--menu-bg, rgba(245, 245, 247, 0.7));
  border: 0.5px solid var(--menu-border);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(45px) saturate(180%);
  -webkit-backdrop-filter: blur(45px) saturate(180%);
  color: var(--win-fg);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.94) translateY(-6px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.status-panel.hidden { display: none; }
.status-panel.show { opacity: 1; transform: none; }

.sp-title { font-size: 15px; font-weight: 700; }
.sp-title-row { display: flex; align-items: center; justify-content: space-between; }

.sp-sub, .sp-muted { font-size: 12px; color: var(--win-muted); }
.sp-sub { margin-top: 6px; }
.sp-muted { padding: 4px 0; }
.sp-label { font-size: 11px; font-weight: 600; color: var(--win-muted); margin: 4px 0; }
.sp-divider { height: 0.5px; background: var(--win-border, rgba(0,0,0,0.12)); margin: 9px -14px; }

.sp-link {
  font-size: 13px; color: var(--accent, #0a84ff);
  padding: 3px 0; cursor: default;
}
.sp-link:hover { text-decoration: underline; }

/* Battery */
.sp-batt { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sp-batt-bar {
  flex: 1; height: 12px; border-radius: 4px;
  background: rgba(120,120,128,0.25);
  border: 0.5px solid var(--win-border, rgba(0,0,0,0.15));
  overflow: hidden;
}
.sp-batt-bar span { display: block; height: 100%; background: #34c759; border-radius: 4px 0 0 4px; }
.sp-pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Wi-Fi switch */
.sp-switch {
  width: 38px; height: 22px; border-radius: 11px;
  background: rgba(120,120,128,0.3);
  position: relative; cursor: pointer;
  transition: background 0.18s ease;
  flex: 0 0 auto;
}
.sp-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.18s ease;
}
.sp-switch.on { background: #34c759; }
.sp-switch.on::after { transform: translateX(16px); }

/* Network rows */
.sp-net {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px; margin: 0 -6px;
  border-radius: 7px; cursor: default;
  font-size: 13px;
}
.sp-net:hover { background: var(--accent, #0a84ff); color: #fff; }
.sp-net:hover .sp-net-meta { filter: brightness(1.4); }
.sp-check { width: 13px; flex: 0 0 13px; font-size: 12px; color: var(--accent); }
.sp-net:hover .sp-check { color: #fff; }
.sp-net.current .sp-check { color: var(--accent); }
.sp-net-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-net-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; }

/* Signal bars */
.sp-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sp-bars i {
  width: 2.5px; background: currentColor; opacity: 0.28; border-radius: 1px;
}
.sp-bars i:nth-child(1) { height: 4px; }
.sp-bars i:nth-child(2) { height: 6px; }
.sp-bars i:nth-child(3) { height: 8px; }
.sp-bars i:nth-child(4) { height: 11px; }
.sp-bars i.on { opacity: 0.95; }

/* ── Phone: the narrow dropdown runs off the left edge and its rows are too
      small to tap. Make it a near-full-width sheet with finger-sized targets. ── */
@media (max-width: 640px) {
  .status-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--menubar-h) - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .status-panel .sp-title { font-size: 17px; }
  .status-panel .sp-sub, .status-panel .sp-muted { font-size: 13px; }
  .status-panel .sp-label { font-size: 12px; }
  .status-panel .sp-link { font-size: 15px; padding: 9px 0; }
  .status-panel .sp-net { padding: 12px 8px; margin: 0 -8px; font-size: 15px; }
  .status-panel .sp-net-meta { font-size: 12px; }
  .status-panel .sp-bars { height: 13px; }
  .status-panel .sp-switch { width: 48px; height: 28px; }
  .status-panel .sp-switch::after { width: 24px; height: 24px; }
  .status-panel .sp-switch.on::after { transform: translateX(20px); }
  .status-panel .sp-batt-bar { height: 16px; }
}