/* Plain CSS, served by Propshaft. Every file in this folder is linked by stylesheet_link_tag :app. */

:root {
  --color-bg: #111418;
  --color-surface: #1b2027;
  --color-border: #2c333d;
  --color-text: #e8eaed;
  --color-muted: #9aa3ad;
  --color-accent: #4285f4;
  --color-danger: #e5484d;
  --color-success: #3dd68c;
  --color-hud: rgb(0 0 0 / 55%);

  --radius: 6px;
  --space: 1rem;

  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a {
  color: var(--color-accent);
}

h1, h2 {
  line-height: 1.2;
}

code {
  font-size: 0.9em;
}

.brand {
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.button,
input[type="submit"],
button {
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  color: white;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
}

.button-danger {
  background: var(--color-danger);
}

.link-button {
  background: none;
  color: var(--color-accent);
  padding: 0;
  text-decoration: underline;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font: inherit;
  padding: 0.45rem 0.6rem;
  width: 100%;
}

.flash {
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
}

.flash-notice {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
}

.flash-alert,
.form-errors {
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
}

/* Sign in */

.sign-in {
  margin: 15vh auto 0;
  max-width: 22rem;
  padding: var(--space);
}

.sign-in .brand {
  font-size: 2rem;
  text-align: center;
}

.sign-in-form,
.admin-form {
  display: grid;
  gap: 0.4rem;
}

.sign-in-form input[type="submit"],
.admin-form input[type="submit"] {
  justify-self: start;
  margin-top: 0.8rem;
}

/* Dashboard: a full-screen map with translucent panels over it */

.dashboard {
  height: 100%;
  position: relative;
}

.map,
.map-canvas {
  height: 100%;
  width: 100%;
}

/* The map sits under the HUD panels. */
.map-canvas {
  z-index: 0;
}

/* Leaflet's divIcon wrapper; the pulse svg draws the marker. */
.leaflet-div-icon.marker {
  background: none;
  border: 0;
}

.hud {
  background: var(--color-hud);
  border-radius: var(--radius);
  color: white;
  padding: 0.6rem 0.9rem;
  position: absolute;
  z-index: 1;
}

.hud-top {
  align-items: center;
  display: flex;
  gap: var(--space);
  left: var(--space);
  right: var(--space);
  top: var(--space);
}

.hud-links {
  align-items: center;
  display: flex;
  gap: var(--space);
  margin-left: auto;
}

.vehicle-switcher {
  display: flex;
  gap: 0.6rem;
}

.vehicle-link {
  color: var(--color-muted);
  text-decoration: none;
}

.vehicle-link.current {
  color: white;
  font-weight: 600;
}

.hud-side {
  max-width: 340px;
  right: var(--space);
  top: 5rem;
}

.vehicle-summary {
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
}

.vehicle-last-report {
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

.vehicle-coordinates {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.marker-pulse-dot {
  fill: #0033ff;
  opacity: 0.3;
}

.marker-pulse-ring {
  animation: marker-pulse 1.5s infinite;
  fill: transparent;
  stroke: #0033ff;
  transform-origin: center;
}

@keyframes marker-pulse {
  from { opacity: 1; transform: scale(0.8); }
  to { opacity: 0; transform: scale(1.5); }
}

@media (max-width: 640px) {
  .hud-side {
    bottom: var(--space);
    left: var(--space);
    max-width: none;
    top: auto;
  }
}

/* Admin */

.admin-header {
  align-items: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  padding: 0.8rem var(--space);
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}

.admin-exit {
  margin-left: auto;
}

.admin-main {
  margin: 0 auto;
  max-width: 72rem;
  padding: var(--space);
}

.admin-heading {
  align-items: center;
  display: flex;
  gap: var(--space);
  justify-content: space-between;
}

.admin-table {
  border-collapse: collapse;
  margin-bottom: 2rem;
  width: 100%;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.45rem 0.6rem;
  text-align: left;
}

.admin-table th {
  color: var(--color-muted);
  font-weight: 500;
}

.admin-details {
  display: grid;
  gap: 0.3rem var(--space);
  grid-template-columns: max-content 1fr;
}

.admin-details dt {
  color: var(--color-muted);
}

.admin-details dd {
  margin: 0;
}

.admin-form {
  max-width: 28rem;
}

.checkbox {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.button-danger {
  margin-top: 2rem;
}