/* data-theme on <html> forces a theme. Without it the system setting decides. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f9fafb, #111827);
  --surface: light-dark(white, #1f2937);
  --fg: light-dark(#1f2937, #e5e7eb);
  --muted: light-dark(#6b7280, #9ca3af);
  --border: light-dark(#d1d5db, #4b5563);
  --line: light-dark(#e5e7eb, #374151);
  --hover: light-dark(#f3f4f6, #374151);
  --accent-bg: light-dark(#eff6ff, #1e3a8a);
  --accent-fg: light-dark(#1d4ed8, #bfdbfe);
  --error: light-dark(#b91c1c, #f87171);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.4 system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
button, input, select { font: inherit; }
button {
  padding: 0.35em 0.9em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
button:hover { background: var(--hover); }
a.button { display: block; padding: 0.35em 0.9em; border-radius: 6px; text-align: center; text-decoration: none; }
button.primary, a.button.primary { background: #2563eb; border-color: #2563eb; color: white; }
button:disabled { opacity: 0.5; cursor: default; }
input, select { padding: 0.35em 0.6em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
.error { color: var(--error); }
.hint { color: var(--muted); font-size: 0.9em; }
code { background: var(--hover); padding: 0.1em 0.3em; border-radius: 4px; }

header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em 1em;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header .brand { display: block; margin-right: 0.5em; }
header > * { flex-shrink: 0; }
header button { white-space: nowrap; }
header nav { display: flex; gap: 0.25em; flex: 1 1 auto; }
header nav button { border-color: transparent; }
header nav button.active { background: var(--accent-bg); color: var(--accent-fg); }
header .user { color: var(--muted); }
main { flex: 1; min-height: 0; display: flex; }

.login {
  margin: 15vh auto;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.login label, .settings label { display: flex; flex-direction: column; gap: 0.2em; }

.map-page { flex: 1; display: flex; min-height: 0; }
.map-page aside {
  width: 300px;
  overflow-y: auto;
  padding: 0.75em;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.map-page .map { flex: 1; }
.people { list-style: none; margin: 0 0 1em; padding: 0; }
.people li { padding: 0.5em; border-radius: 6px; cursor: pointer; }
.people li:hover { background: var(--hover); }
.people li.selected { background: var(--accent-bg); }
.people .name { font-weight: 600; }
.people .dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  margin-right: 0.4em;
}

.settings { flex: 1; overflow-y: auto; padding: 1em; }
.settings section {
  max-width: 640px;
  margin: 0 auto 1.5em;
  padding: 1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.settings h2 { margin-top: 0; font-size: 1.1em; }
.settings h3 { font-size: 1em; margin-bottom: 0.3em; }
.settings form { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: end; }
.settings table { width: 100%; border-collapse: collapse; }
.settings td, .settings th { text-align: left; padding: 0.3em 0.5em 0.3em 0; }
.settings th { color: var(--muted); font-weight: normal; font-size: 0.9em; }

@media (max-width: 700px) {
  .map-page { flex-direction: column; }
  .map-page aside { width: auto; max-height: 35vh; border-right: 0; border-bottom: 1px solid var(--line); }
  header { gap: 0.5em; padding: 0.5em; }
  header .user { display: none; }
  header nav button, header > button:not(.theme) { padding: 0.35em 0.55em; }
  header .brand { margin-right: 0; }
}

.settings .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  max-width: 640px;
  margin: 0 auto 1em;
}
.settings .tabs button { border-color: transparent; background: transparent; }
.settings .tabs button.active { background: var(--accent-bg); color: var(--accent-fg); }
.settings label.radio { flex-direction: row; align-items: center; gap: 0.4em; margin: 0.3em 0; }
.settings td.actions { text-align: right; white-space: nowrap; }
code.copy { word-break: break-all; user-select: all; }
.map-page aside label { display: flex; flex-direction: column; gap: 0.2em; margin-bottom: 0.5em; }

button.theme { display: flex; align-items: center; padding: 0.4em; }

/* The street maps only have light styles. Inverting them gives a usable dark map. */
:root[data-theme="dark"] .leaflet-tile-pane .street { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane .street { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }
}
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-layers,
.leaflet-tooltip { background: var(--surface); color: var(--fg); border-color: var(--line); }
.leaflet-container .leaflet-control-attribution a { color: var(--accent-fg); }

.send-location { border-top: 1px solid var(--line); margin-top: 1em; padding-top: 0.5em; }
.send-location h3 { font-size: 1em; margin: 0.3em 0 0.6em; }
.send-location .auto-send { display: flex; align-items: center; gap: 0.4em; margin-top: 0.6em; }
.send-location .auto-send input[type="number"] { width: 5em; }
.map-page aside .send-location label.radio { flex-direction: row; align-items: center; gap: 0.4em; margin: 0; }
.settings fieldset { flex-basis: 100%; border: 1px solid var(--border); border-radius: 6px; margin: 0; padding: 0.3em 0.8em 0.5em; }
.settings fieldset legend { padding: 0 0.3em; }
.settings .device-choice { padding-left: 1.6em; }
.settings .device-choice label:has(input:disabled) { color: var(--muted); }
.guest-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leaflet's own icon is an image file we do not ship. */
.leaflet-container .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5z'/%3E%3Cpath d='m2 13 10 5 10-5'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}