/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: light dark;
  --page-bg: #ffffff;
  --page-fg: #1c1c1c;
  --muted-fg: #666666;
  --border: #e2e2e2;
  --accent: #b4381f;
  --accent-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #1b1b1b;
    --page-fg: #f2f2f2;
    --muted-fg: #a8a8a8;
    --border: #333333;
  }
}

html {
  height: 100%;
}

/* The nav sits above whatever the page is, so the two stack and the map takes
   the rest. min-height rather than height so the mail drop pages, which are as
   long as their content, still scroll. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--page-bg);
  color: var(--page-fg);
}

.page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  margin: 0;
  font-size: 1rem;
}

.page-header p {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}

.page-header .status {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.filter input,
.filter select {
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: var(--page-bg);
  color: var(--page-fg);
  font: inherit;
  font-size: 0.8125rem;
}

.filter input {
  width: 6.5rem;
}

.filter button {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--page-fg);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.filter button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.map {
  flex: 1;
  min-height: 0;
}

/* Cluster bubbles standing in for properties that are too dense to draw.
 *
 * Leaflet's stylesheet loads after this one and sets `display: block` on
 * .leaflet-marker-icon, so these overrides are qualified with that class to
 * outrank it. A bare .cluster loses on source order and the label lands in
 * the top-left corner instead of the middle. Same reason below for popups.
 */
.leaflet-marker-icon.cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgb(180 56 31 / 80%);
  box-shadow: 0 0 0 3px rgb(180 56 31 / 20%);
  color: var(--accent-fg);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* G-NAF ships names in upper case and they are left that way rather than
   title-cased, which mangles names like O'DEA and MCKINNON. */
.leaflet-popup .leaflet-popup-content {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.leaflet-popup-content strong {
  display: block;
}

.leaflet-popup-content span {
  display: block;
  color: #555555;
}

/* A building can hold hundreds of units, so the list scrolls inside the popup
   rather than growing taller than the map. The bullets are asked for because
   Tailwind's preflight strips list markers from every ul on the page. */
.unit-addresses {
  max-height: min(11rem, 30vh);
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  overflow-y: auto;
  border-top: 1px solid #e2e2e2;
  padding-top: 0.5rem;
  list-style: disc;
}

.unit-addresses li {
  padding: 0.0625rem 0;
}