/* PowerShare 2 - Area dashboard tile styles
   Mobile-first. All colour comes from the design tokens in css/tokens.css -
   never raw hex here. Sub-sections render as cards in a responsive grid. */

/* ── Sub-section grid ────────────────────────────────────────────────────── */

.ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .ad-grid { grid-template-columns: 1fr 1fr; }
  .ad-card--wide { grid-column: 1 / -1; }
}

.ad-card {
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ad-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ad-card-icon { font-size: var(--text-lg); line-height: 1.3; }

.ad-card-title {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--colour-brand-dark);
}

.ad-card-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* ── Badge (headline stat, colour-coded by semantic tone) ────────────────── */

.ad-badge {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
}

.ad-badge-big {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.ad-badge-small { font-size: var(--text-sm); }

.ad-badge--success {
  background: var(--colour-success-bg);
  border-color: var(--colour-success);
  color: var(--colour-success);
}

.ad-badge--warn {
  background: var(--colour-warn-bg);
  border-color: var(--colour-warn);
  color: var(--colour-warn);
}

.ad-badge--danger {
  background: var(--colour-danger-bg);
  border-color: var(--colour-danger);
  color: var(--colour-danger);
}

.ad-badge--info {
  background: var(--colour-info-bg);
  border-color: var(--colour-info);
  color: var(--colour-info);
}

.ad-badge--neutral { color: var(--colour-text); }

/* ── Label / count list ──────────────────────────────────────────────────── */

.ad-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ad-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--colour-border);
  font-size: var(--text-sm);
}

.ad-list-item:last-child { border-bottom: none; }

.ad-list-label { color: var(--colour-text); }

.ad-list-count {
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Notes and per-section fallbacks ─────────────────────────────────────── */

.ad-note,
.ad-unavailable {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.ad-unavailable { font-style: italic; }

/* ── River level gauge ───────────────────────────────────────────────────── */

.ad-river {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.ad-river-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.ad-river-name { color: var(--colour-text); }

.ad-river-status { font-weight: 600; white-space: nowrap; }

.ad-tone--success { color: var(--colour-success); }
.ad-tone--warn    { color: var(--colour-warn); }
.ad-tone--danger  { color: var(--colour-danger); }
.ad-tone--info    { color: var(--colour-info); }
.ad-tone--neutral { color: var(--colour-text-muted); }

.ad-river-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--colour-brand-dark);
  margin: var(--space-1) 0;
}

.ad-river-bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--colour-border);
  margin: var(--space-2) 0 var(--space-1);
}

.ad-river-dot {
  position: absolute;
  top: 50%;
  /* --ad-river-pos is set from data in JS - the sanctioned token exception. */
  left: var(--ad-river-pos, 50%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--colour-surface);
  box-shadow: var(--shadow-sm);
  background: var(--colour-success);
}

.ad-river-dot--warn   { background: var(--colour-warn); }
.ad-river-dot--danger { background: var(--colour-danger); }
.ad-river-dot--info   { background: var(--colour-info); }

.ad-river-range {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* ── Neighbourhood police team ───────────────────────────────────────────── */

.ad-team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ad-team-member {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 8rem;
}

.ad-team-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text);
}

.ad-team-rank {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.ad-contacts {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.ad-contact { color: var(--colour-link); }

/* ── Tile footer bits ────────────────────────────────────────────────────── */

.ad-action { margin: var(--space-4) 0 0; }

.ad-fetched {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}