/* ============================================================
   /app/locate/ — Find my devices
   Styling uses the shared /app theme token layer (--text-*,
   --brand-ice, etc. from vilkax-tokens.css + vlx-theme.css) so it
   matches the Settings surface. No page-local inline styles (the
   /app/* CSP is style-src 'self').
   ============================================================ */

.loc-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.loc-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.loc-name {
  font-weight: 600;
  color: var(--text-strong, #e7eef7);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.loc-place {
  font-size: 13px;
  color: var(--text-strong, #e7eef7);
  line-height: 1.4;
}
.loc-place.is-muted {
  color: var(--text-muted, #94a0b3);
  font-style: italic;
}

.loc-sub {
  font-size: 12px;
  color: var(--text-muted, #94a0b3);
  line-height: 1.4;
}

/* ── Status pills ── */
.loc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.loc-pill.is-online {
  background: rgba(123, 230, 194, 0.16);
  color: #7be6c2;
}
.loc-pill.is-precise {
  background: rgba(127, 207, 230, 0.16);
  color: var(--brand-ice, #7fcfe6);
}

/* ── Reported lost / stolen banners ── */
.loc-reported {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 4px;
}
.loc-alert {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}
.loc-alert[data-reason="stolen"],
.loc-alert[data-reason="compromised"] {
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.09);
}
.loc-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.loc-alert-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f59e0b;
}
.loc-alert[data-reason="stolen"] .loc-alert-badge,
.loc-alert[data-reason="compromised"] .loc-alert-badge {
  color: #ff6b6b;
}
.loc-alert-name {
  font-weight: 700;
  color: var(--text-strong, #e7eef7);
  font-size: 15px;
}
.loc-alert-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted, #94a0b3);
  line-height: 1.4;
}

/* ── Empty / signed-out / error state ── */
.loc-empty {
  padding: 16px;
  color: var(--text-muted, #94a0b3);
  font-size: 13px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  line-height: 1.5;
}
.loc-link {
  color: var(--brand-ice, #7fcfe6);
  text-decoration: none;
  font-weight: 600;
}
.loc-link:hover { text-decoration: underline; }
.loc-retry {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(127, 207, 230, 0.45);
  color: var(--brand-ice, #7fcfe6);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.loc-retry:hover { background: rgba(127, 207, 230, 0.12); }

.loc-status {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted, #94a0b3);
  min-height: 1em;
}
.loc-status[data-tone="error"] { color: #ff6b6b; }
.loc-status[data-tone="success"] { color: #10b981; }

.loc-skel { padding: 14px; }

/* ── Privacy list ── */
.loc-priv-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loc-priv-list li {
  font-size: 13px;
  color: var(--text-muted, #94a0b3);
  line-height: 1.5;
}
.loc-priv-list strong { color: var(--text-strong, #e7eef7); }