/* ============================================================
   City-portal-only styles. Anything general enough for the admin
   or host portal belongs in pz.css instead — pz.css is shared
   verbatim across all four surfaces and fixes go upstream.
   ============================================================ */

/* ---------- City switcher (05 §1) ---------- */
.ct-city { display: inline-flex; align-items: center; }
.ct-city .pz-select { padding: 6px 30px 6px 10px; font-size: 13.5px; font-weight: 600; }
.ct-city-one {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--pz-ink-soft);
}
@media (max-width: 620px) {
  .ct-city .pz-select { max-width: 46vw; }
}

/* ---------- Dashboard quick actions ---------- */
.ct-quick { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .ct-quick > * { flex: 1 1 100%; } }

/* ---------- Map (05 §2.2) ---------- */
.ct-map {
  height: 520px; width: 100%;
  background: var(--pz-grey-bg);
  border-radius: var(--pz-radius) var(--pz-radius) 0 0;
}
@media (max-width: 700px) { .ct-map { height: 340px; } }

.ct-legend {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 11px 14px; border-top: 1px solid var(--pz-line); font-size: 12.5px;
}
.ct-key { display: inline-flex; align-items: center; gap: 6px; color: var(--pz-ink-soft); }
.ct-key i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

.ct-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 7px; vertical-align: baseline;
}

/* Google's InfoWindow injects its own chrome; keep our content compact inside it. */
.ct-iw { font: 400 13px/1.45 var(--pz-font-body); color: #17222f; min-width: 150px; }
.ct-iw strong { display: block; margin-bottom: 3px; font-size: 13.5px; }

/* Polygon drawing bar — floats above the map while a zone is being drawn. */
.ct-drawbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--pz-blue-soft); border-bottom: 1px solid var(--pz-line);
  font-size: 13.5px; font-weight: 600; color: var(--pz-blue-deep);
}
.ct-drawbar [data-role="count"] { flex: 1; }
@media (max-width: 620px) { .ct-drawbar [data-role="count"] { flex: 1 0 100%; } }

/* ---------- Tables ---------- */
.ct-actions { white-space: nowrap; text-align: right; }
.ct-actions > * { margin-left: 4px; }

/* ---------- Violation detail (05 §2.5) ----------
   Facts on the left, the decision rail on the right; one column on narrow
   screens with the rail first, because on a phone the decision is the job. */
.ct-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ct-split > * { min-width: 0; }
@media (max-width: 1000px) {
  .ct-split { grid-template-columns: minmax(0, 1fr); }
  .ct-split > *:last-child { order: -1; }
}

.ct-facts { display: grid; gap: 8px; }
.ct-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ct-fact .k { color: var(--pz-ink-soft); }
.ct-fact .v { font-weight: 600; text-align: right; word-break: break-word; }

.ct-notes {
  margin-top: 14px; padding: 12px 14px;
  background: var(--pz-surface-2); border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius); font-size: 13.5px;
}
.ct-notes p { margin: 6px 0 0; }

.ct-photos { display: flex; gap: 12px; flex-wrap: wrap; }
.ct-photos figure { margin: 0; width: 168px; }
.ct-photos img {
  width: 168px; height: 122px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--pz-line); background: var(--pz-grey-bg);
}
.ct-photos figcaption { font-size: 12px; color: var(--pz-ink-soft); margin-top: 5px; }

.ct-timeline { list-style: none; margin: 0; padding: 0; }
.ct-timeline li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--pz-line); font-size: 13.5px;
}
.ct-timeline li:last-child { border-bottom: 0; }
.ct-timeline .when { color: var(--pz-ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .ct-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.ct-rail { display: grid; gap: 8px; }
.ct-rail .pz-btn { width: 100%; }
.ct-hr { border: 0; border-top: 1px solid var(--pz-line); margin: 14px 0; }

.ct-promo { border-color: var(--pz-green); }
.ct-code {
  font: 700 20px/1.2 var(--pz-font-heading); letter-spacing: .06em;
  color: var(--pz-green-ink); background: var(--pz-green-bg);
  padding: 10px 12px; border-radius: 10px; text-align: center;
  word-break: break-all;
}