/**
 * Suburbs Lookup — tool styles
 *
 * The two-up layout, the remote autocomplete, the map furniture and the results
 * toolbar. Cards, tabs, tables, chips, alerts, pagination and the combobox list
 * are frikwork's; nothing here restyles one beyond what Leaflet forces on us.
 */

/* --- Header stats ---------------------------------------------------------- */

.suburbs-stats { margin-bottom: var(--fw-space-lg); }
.suburbs-stats .app-stat__value { font-size: 1.4rem; overflow-wrap: anywhere; }

/* --- Mode strip ------------------------------------------------------------ */

.suburbs-modes {
  margin-bottom: var(--fw-space-lg);
  max-width: 100%;
  flex-wrap: wrap;
}

/* --- Two-up layout --------------------------------------------------------- */

.suburbs-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: var(--fw-space-lg);
  align-items: stretch;
  margin-bottom: var(--fw-space-lg);
}

/* Grid children default to min-content width; without this a long LGA name in
   the autocomplete would widen the column instead of ellipsing. */
.suburbs-form-panel,
.suburbs-map-panel { min-width: 0; }

/* .app-panel clips its content so the card's rounded corners hold. The
   autocomplete panel has to escape that, and the layer order below keeps it
   above the map: the map panel is given its own stacking context (position +
   z-index: 0) so Leaflet's internal 400–1000 z-indexes stay inside it, and the
   form panel then sits one layer up. */
.suburbs-form-panel { overflow: visible; position: relative; z-index: 1; }
.suburbs-map-panel { position: relative; z-index: 0; overflow: hidden; }

.suburbs-actions {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-lg);
}

/* --- Autocomplete ---------------------------------------------------------- */

.suburbs-ac { position: relative; }

.suburbs-ac__control { position: relative; display: block; }

/* Room for the state icons that sit inside the right-hand edge of the field. */
.suburbs-ac__input { padding-right: 2.25rem; }

.suburbs-ac.is-valid .suburbs-ac__input { border-color: var(--fw-success); }
.suburbs-ac.is-invalid .suburbs-ac__input { border-color: var(--fw-warning); }

.suburbs-ac__tick,
.suburbs-ac__spinner {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.suburbs-ac__tick { color: var(--fw-success); display: none; }
.suburbs-ac.is-valid:not(.is-loading) .suburbs-ac__tick { display: block; }

.suburbs-ac__spinner { display: none; }
.suburbs-ac.is-loading .suburbs-ac__spinner { display: block; }

.suburbs-ac__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fw-bg-card);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  box-shadow: var(--fw-shadow-lg);
}

.suburbs-ac__panel .fw-combobox__list { padding: var(--fw-space-xs); }

/* --- Radius presets -------------------------------------------------------- */

.suburbs-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-xs);
  margin-top: var(--fw-space-sm);
}

/* .fw-chip is padded for a trailing remove button it does not have here. */
.suburbs-preset {
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.suburbs-preset.is-active {
  color: var(--fw-brand-text);
  background: color-mix(in srgb, var(--fw-brand) 14%, transparent);
  border-color: var(--fw-brand);
}

/* --- Exclusion scope ------------------------------------------------------- */

.suburbs-scope { margin-top: var(--fw-space-sm); padding-left: var(--fw-space-lg); }

/* --- Map ------------------------------------------------------------------- */

.suburbs-map {
  width: 100%;
  min-height: 520px;
  height: 100%;
  background: var(--fw-bg-2);
}

.suburbs-map__legend {
  position: absolute;
  left: var(--fw-space-md);
  bottom: var(--fw-space-md);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: var(--fw-space-xs);
  max-width: calc(100% - (2 * var(--fw-space-md)));
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  color: var(--fw-text);
  background: var(--fw-bg-card);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  box-shadow: var(--fw-shadow-sm);
  pointer-events: none;
}
.suburbs-map__legend i { color: var(--fw-brand-text); }
.suburbs-map__legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suburbs-map__busy {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fw-space-sm);
  background: color-mix(in srgb, var(--fw-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Leaflet ships its own light-mode chrome. These pull the pieces that overlay
   the map onto frikwork's tokens so the dark theme is not a white box. */
.suburbs-map .leaflet-popup-content-wrapper,
.suburbs-map .leaflet-popup-tip {
  background: var(--fw-bg-card);
  color: var(--fw-text);
  border: 1px solid var(--fw-border);
}
.suburbs-map .leaflet-popup-content { margin: 0.6rem 0.85rem; font-size: 0.82rem; line-height: 1.45; }
.suburbs-map .suburbs-popup__name { color: var(--fw-brand-text); }
.suburbs-map .leaflet-container a.leaflet-popup-close-button { color: var(--fw-text-muted); }
.suburbs-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--fw-bg-card) 85%, transparent);
  color: var(--fw-text-muted);
  font-size: 0.68rem;
}
.suburbs-map .leaflet-control-attribution a { color: var(--fw-brand-text); }

/* --- Results --------------------------------------------------------------- */

.suburbs-columns__panel {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--fw-space-xs);
}

.suburbs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-md);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--fw-space-md);
}

.suburbs-toolbar__len {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin: 0;
}
.suburbs-toolbar__len .fw-select { width: auto; }

.suburbs-toolbar__filter { max-width: 260px; }

.suburbs-table th { white-space: nowrap; }
.suburbs-table td { vertical-align: top; }
.suburbs-cell-name { font-weight: 500; color: var(--fw-text); cursor: help; }

.suburbs-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-md);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--fw-space-md);
}
.suburbs-foot p { margin: 0; }

/* --- Admin ----------------------------------------------------------------- */

.suburbs-admin { margin-top: var(--fw-space-lg); }
.suburbs-admin__hint { margin-left: auto; color: var(--fw-text-muted); }

.suburbs-admin__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
  align-items: center;
  margin-top: var(--fw-space-md);
}
.suburbs-admin__file { flex: 1 1 280px; min-width: 0; }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .suburbs-layout { grid-template-columns: 1fr; }
  .suburbs-map { min-height: 380px; }
}

/* The secondary columns are the ones a phone cannot fit; the column chooser
   still lists them, and the CSV always carries every one. */
@media (max-width: 720px) {
  .suburbs-col-extra { display: none; }
  .suburbs-toolbar { flex-direction: column; align-items: stretch; }
  .suburbs-toolbar__filter { max-width: none; }
  .suburbs-admin__hint { margin-left: 0; }
}