/*
 * static/css/tg-map.css — Shared map UI (public + admin).
 *
 * Used by /public/map.php and /admin/map.php. All design tokens
 * (--tg-*, --font-*) come from app.css; this file only adds map-
 * specific layout and the ward-selector + stats widgets.
 */

/* ---------- Shell ---------- */
.tg-map-shell {
    position: relative;
    margin: -28px -28px 0 -28px;       /* unwind .page padding */
    height: calc(100vh - 64px - 56px); /* viewport - topbar - footer */
    min-height: 480px;
    background: var(--tg-paper-2);
    border-top: 1px solid var(--tg-line);
    border-bottom: 1px solid var(--tg-line);
    overflow: hidden;
}
.tg-map { position: absolute; inset: 0; }

/* ---------- Header (top-left) ---------- */
/* We hide the floating header by default — the controls panel on the
   left already labels everything, and the floating header was
   colliding with Leaflet's zoom +/- in the same corner. Bring it
   back per-page by removing .tg-map-header[hidden] if you want it. */
.tg-map-header { display: none; }

/* ---------- Controls panel (left side) ---------- */
.tg-controls {
    position: absolute; top: 14px; left: 60px; bottom: 14px; z-index: 600;
    width: 296px; max-width: calc(100% - 80px);
    background: var(--tg-card); border: 1px solid var(--tg-line);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.tg-controls-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--tg-line-soft);
}
.tg-controls-section:last-child { border-bottom: none; }
.tg-controls-section.is-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.tg-controls-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tg-mute); margin: 0 0 8px; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
}

/* Layer master switches (admin map; public map only has ward switch) */
.tg-layer-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 13px;
}
.tg-layer-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.tg-layer-row.is-empty label { color: var(--tg-mute); cursor: default; }
.tg-layer-row .count {
    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
    color: var(--tg-mute);
}
.tg-layer-row .count.is-loaded { color: var(--tg-saffron-dark); font-weight: 600; }
.tg-layer-row .swatch {
    width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0;
}

/* Ward picker — 2-column grid */
.tg-ward-actions { display: flex; gap: 6px; }
.tg-ward-action {
    background: var(--tg-paper-2); border: 1px solid var(--tg-line);
    color: var(--tg-ink-2); font-family: var(--font-body); font-size: 11px;
    padding: 3px 8px; border-radius: 4px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.tg-ward-action:hover { background: var(--tg-saffron-soft); border-color: var(--tg-saffron); color: var(--tg-saffron-dark); }
.tg-ward-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
    margin-top: 6px;
}
.tg-ward-cell {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; border-radius: 4px;
    font-size: 12px; cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.tg-ward-cell:hover { background: var(--tg-saffron-soft); }
.tg-ward-cell.is-on { background: var(--tg-saffron-soft); border-color: var(--tg-saffron); color: var(--tg-saffron-dark); font-weight: 600; }
.tg-ward-cell input { margin: 0; flex-shrink: 0; }
.tg-ward-cell .num { font-family: var(--font-mono); font-size: 11px; color: var(--tg-mute); margin-left: auto; }
.tg-ward-cell.is-on .num { color: var(--tg-saffron-dark); }

/* Stats summary — totals + per-ward */
.tg-stats-totals {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
    margin-bottom: 4px;
}
.tg-stat-mini {
    display: flex; flex-direction: column;
    padding: 6px 8px; background: var(--tg-paper-2); border-radius: 4px;
}
.tg-stat-mini .lbl {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tg-mute); font-weight: 600;
}
.tg-stat-mini .val {
    font-family: var(--font-mono); font-weight: 600; font-size: 14px;
    color: var(--tg-ink); margin-top: 2px;
}
.tg-stats-perward {
    margin-top: 8px; max-height: 180px; overflow-y: auto;
    border-top: 1px dashed var(--tg-line-soft); padding-top: 6px;
}
.tg-stats-perward table {
    width: 100%; font-size: 11px; border-collapse: collapse;
}
.tg-stats-perward th, .tg-stats-perward td {
    padding: 3px 4px; text-align: right; font-family: var(--font-mono);
}
.tg-stats-perward th {
    text-align: right; color: var(--tg-mute); font-weight: 600;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--tg-line-soft);
}
.tg-stats-perward th:first-child, .tg-stats-perward td:first-child {
    text-align: left;
}
.tg-stats-perward td { border-bottom: 1px dashed var(--tg-line-soft); }
.tg-stats-perward tr:last-child td { border-bottom: none; }
.tg-stats-empty {
    text-align: center; padding: 8px 4px; color: var(--tg-mute); font-size: 12px;
}

.tg-footprint-note {
    margin: 6px 0 0 0; padding: 6px 8px; font-size: 11px;
    background: var(--tg-warn-soft); color: var(--tg-warn);
    border-radius: 4px; line-height: 1.4;
}

/* ---------- Detail panel (right side) ---------- */
.tg-detail {
    position: absolute;
    /* Pushed down past the right-side cluster of Leaflet controls
       (layer switcher + fullscreen button + zoom +/- which moves to
       top-right via .leaflet-top.leaflet-right). On wide screens we
       offset more; on narrow screens it slides in from the bottom
       so the right-side controls remain reachable. */
    top: 14px; right: 56px; z-index: 700;
    width: 320px; max-width: calc(100% - 70px);
    background: var(--tg-card); border: 1px solid var(--tg-line);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    max-height: calc(100% - 28px); overflow-y: auto;
    transform: translateX(calc(100% + 80px)); transition: transform 0.18s ease;
}
.tg-detail.is-open { transform: translateX(0); }
.tg-detail-head {
    padding: 14px 16px; border-bottom: 1px solid var(--tg-line-soft);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tg-detail-head h2 {
    font-family: var(--font-display); font-size: 22px; margin: 0;
    color: var(--tg-ink); letter-spacing: -0.01em;
}
.tg-detail-head p.eyebrow {
    margin: 0 0 2px 0; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--tg-saffron-dark); font-weight: 600;
}
.tg-detail-close {
    background: none; border: none; cursor: pointer; color: var(--tg-mute);
    font-size: 22px; line-height: 1; padding: 0; width: 28px; height: 28px;
}
.tg-detail-close:hover { color: var(--tg-ink); }
.tg-detail-body { padding: 14px 16px; }
.tg-stat-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0; border-bottom: 1px dashed var(--tg-line-soft); font-size: 14px;
}
.tg-stat-row:last-child { border-bottom: none; }
.tg-stat-row span:first-child { color: var(--tg-mute); }
.tg-stat-row span:last-child {
    font-family: var(--font-mono); font-weight: 600; color: var(--tg-ink);
}
.tg-detail-section-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tg-mute); margin: 16px 0 6px 0; font-weight: 600;
}

/* ---------- Empty state ---------- */
/* IMPORTANT: the [hidden] attribute on the .tg-empty-state element
   is the source of truth for whether the card is visible.
   We use a :not([hidden]) selector here so the display:flex below
   does NOT override the browser's default display:none on hidden
   elements (which is what happens when only `.tg-empty-state` is
   used as the selector — author CSS beats user-agent CSS).
   Without this fix the empty-state covered the map at all times
   with a 96%-opaque cream overlay, hiding the tiles AND the
   ward polygons on every map page. */
.tg-empty-state[hidden] { display: none !important; }
.tg-empty-state:not([hidden]) {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    z-index: 400; background: rgba(251, 246, 236, 0.96); pointer-events: none;
}
.tg-empty-state-card {
    background: var(--tg-card); padding: 24px 28px; border-radius: 10px;
    border: 1px solid var(--tg-line); max-width: 380px; text-align: center;
    pointer-events: auto;
}
.tg-empty-state-card h3 { margin: 0 0 6px; font-family: var(--font-display); }

/* ---------- Leaflet polish ---------- */
.leaflet-popup-content-wrapper { border-radius: 6px; border: 1px solid var(--tg-line); }
.leaflet-popup-content { font-family: var(--font-body); margin: 10px 14px; font-size: 13px; }
.leaflet-popup-content strong { color: var(--tg-saffron-dark); }

/* Leaflet's default control containers — make sure the layer switcher
   (top-right) and the close-button on the detail panel are both
   reachable. The detail panel uses z-index:700 (see above); we keep
   leaflet-top above that so the +/-/layers/fullscreen are always on
   top, and the detail panel slides in to the LEFT of them. */
.leaflet-top, .leaflet-bottom { z-index: 800; }

/* Push the layer-switcher dropdown wider when expanded so 5 entries
   are readable. */
.leaflet-control-layers-expanded {
    padding: 8px 12px; font-family: var(--font-body); font-size: 13px;
    border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.leaflet-control-layers label { padding: 3px 0; }

/* ---------- Fullscreen toggle button ---------- */
/* Sits in a leaflet-bar so it picks up the same pill background as
   zoom +/-. We use background-image rather than text glyphs because
   the unicode "fullscreen" character (⛶) renders inconsistently
   across OSes. */
.tg-fs-btn {
    width: 30px; height: 30px;
    background: var(--tg-card); color: var(--tg-ink);
    border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-size: 18px; line-height: 1;
}
.tg-fs-btn:hover { background: var(--tg-paper-2); }
.tg-fs-btn::before { content: '⛶'; }
body.tg-map-fs .tg-fs-btn::before { content: '×'; font-size: 22px; }

/* ---------- Fullscreen mode ---------- */
/* When body has .tg-map-fs, hide the page chrome and let the map
   shell fill the viewport. Topbar, footer, page padding all out of
   the way. The map shell already uses fixed margins to escape
   .page padding; in fullscreen we just go absolute. */
body.tg-map-fs .topbar,
body.tg-map-fs .appfoot,
body.tg-map-fs header.topbar,
body.tg-map-fs footer.appfoot { display: none !important; }
body.tg-map-fs main.page { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.tg-map-fs .tg-map-shell {
    position: fixed !important; inset: 0 !important;
    margin: 0 !important; height: 100vh !important; min-height: 0 !important;
    border: none !important; z-index: 9000;
}
body.tg-map-fs .tg-controls { top: 14px; bottom: 14px; }
@media (max-width: 720px) {
    body.tg-map-fs .tg-controls { top: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .tg-map-shell { margin: -28px -16px 0 -16px; }
    .tg-controls {
        position: absolute; top: auto; bottom: 8px; left: 8px;
        width: calc(100% - 16px); max-height: 50%;
    }
    .tg-controls.is-collapsed { max-height: 44px; }
    .tg-controls-section.is-scroll { max-height: 32vh; }
    .tg-detail {
        width: calc(100% - 16px); top: auto; bottom: 8px; right: 8px; left: 8px;
        max-height: 60%;
        transform: translateY(calc(100% + 8px));
    }
    .tg-detail.is-open { transform: translateY(0); }
}

/* ---------- Mobile collapse handle ---------- */
.tg-controls-collapse {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--tg-mute); font-size: 16px; padding: 0;
    width: 24px; height: 24px;
}
@media (max-width: 720px) {
    .tg-controls-collapse { display: inline-flex; align-items: center; justify-content: center; }
    .tg-controls.is-collapsed .tg-controls-section:not(:first-child) { display: none; }
    .tg-controls.is-collapsed .tg-controls-collapse { transform: rotate(180deg); }
}