/* Chrome the map renderers build: rail rows, legends, count tables, tooltips.
 *
 * Shared because the surfaces are: the alert-geography map, the coverage maps
 * and the positioning maps all draw the same four things beside a Leaflet
 * canvas, and each had its own copy written inline in JS — the same eight
 * declarations for a rail row, three times, in three files, with three
 * slightly different font sizes.
 *
 * What stays inline is only what the DATA decides: a method's colour, a
 * marker's diameter, a selected row's ground. Those travel as custom
 * properties, the value inline and the rule here.
 *
 * Loaded globally from base.html, beside the map scripts that use it.
 */

/* ── Rail: list rows ────────────────────────────────────────────────────── */

.map-empty {
    font-size: var(--fs-sm);
    color: var(--fg-4);
    margin: 4px 2px;
}

.map-empty--padded {
    margin: 0;
    padding: 12px;
}

/* One selectable row: an alert group, a cluster, a gateway. */
.map-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    text-align: left;
    background: var(--map-row-bg, transparent);
    cursor: pointer;
}

.map-row--ruled {
    border-radius: 0;
    padding: 7px 2px;
    border-bottom: 1px solid var(--status-neutral-bg);
}

.map-row__body {
    flex: 1;
    min-width: 0;
}

.map-row__title {
    display: block;
    font-size: var(--fs-sm);
    color: var(--fg-1);
}

.map-row__title--medium {
    font-weight: var(--fw-medium);
}

/* A name that must not push the row wider than the rail. */
.map-row__ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-row__meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--fg-4);
}

.map-row__meta--faint {
    color: var(--fg-5);
}

.map-row__value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    margin-top: 2px;
}

/* The method glyph. Sized off the icon scale, not the type scale: it is a
   symbol in a fixed box, not running text. */
.map-row__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--map-accent, var(--fg-4));
    font-size: var(--fs-base);
    line-height: 1;
    flex-shrink: 0;
}

.map-row__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--map-accent, var(--fg-4));
}

.map-row__tag {
    flex: none;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    color: var(--map-accent, var(--fg-4));
}

.map-note {
    font-size: var(--fs-xs);
    color: var(--fg-5);
    margin: 8px 2px 0;
}

/* ── Legend ─────────────────────────────────────────────────────────────── */

.map-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The same key, tighter — a swatch pressed against a short numeric label. */
.map-key--tight {
    gap: 4px;
}

.map-key__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--map-accent, var(--fg-4));
}

/* A gateway reads as an outline, never a filled dot: it is infrastructure,
   not a measurement. */
.map-key__gateway {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--map-accent, var(--fg-4));
    background: var(--map-accent-fill, transparent);
}

.map-key__label {
    font-weight: var(--fw-semibold);
    color: var(--fg-body-strong);
}

/* Separates groups within one legend strip. */
.map-key__divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-medium);
}

.map-key__bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--map-accent, var(--status-neutral-bg));
}

/* ── Count table ────────────────────────────────────────────────────────── */

.map-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.map-table th {
    padding: 8px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--fg-4);
    text-align: left;
}

.map-table th.map-table--num,
.map-table td.map-table--num {
    text-align: right;
}

.map-table td {
    padding: 8px 10px;
    color: var(--fg-1);
}

.map-table td.map-table--tight {
    padding: 8px 6px;
}

.map-table__name {
    font-weight: var(--fw-medium);
}

.map-table__total {
    font-weight: var(--fw-semibold);
}

/* A count the row's own colour applies to; zero drops the weight so a row of
   zeroes does not read as loudly as a row with findings. */
.map-table__count {
    color: var(--map-accent, var(--fg-1));
    font-weight: var(--fw-semibold);
}

.map-table__count--zero {
    font-weight: var(--fw-regular);
}

.map-table__foot {
    border-top: 1px solid var(--status-neutral-bg);
}

/* ── Map overlays ───────────────────────────────────────────────────────── */

/* Count badge on a marker. --map-badge-size is the diameter the renderer
   computes. Flat: the product does not use shadows on chrome. */
.map-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--map-badge-size);
    height: var(--map-badge-size);
    border-radius: 50%;
    background: var(--map-accent, var(--fg-4));
    color: var(--fg-on-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border: 2px solid var(--fg-on-dark);
}

.map-tip-sub {
    font-size: var(--fs-xs);
    opacity: 0.85;
}

/* A method's own glyph in the legend, at the size the map draws it. */
.map-key__glyph {
    color: var(--map-accent, var(--fg-4));
    font-size: var(--fs-base);
    line-height: 1;
}

/* Severity bar: one stacked column showing a group's mix at a glance, so the
   row says "mostly critical" before the reader opens it. */
.map-sev-bar {
    display: flex;
    flex-direction: column;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    overflow: hidden;
}

.map-sev-bar__segment {
    display: block;
    flex: 0 0 var(--map-segment-share, 0%);
    background: var(--map-accent, var(--fg-4));
}

/* Alert count on a gateway marker. Flat pill, no shadow. */
.map-gw-badge {
    display: inline-block;
    min-width: 14px;
    padding: 0 5px;
    background: var(--map-accent, var(--fg-4));
    color: var(--fg-on-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 16px;
    border-radius: var(--radius-md, 8px);
    text-align: center;
}

/* A row whose children stretch to a full-height severity bar. */
.map-row--stretch {
    align-items: stretch;
}

/* ── Tooltips the map renderers build ───────────────────────────────────── */

.map-tip {
    font-family: var(--font-base, system-ui);
    font-size: var(--fs-sm);
    line-height: 1.5;
    min-width: 180px;
}

/* The wider variant, for a tooltip carrying a small table rather than a line
   or two. */
.map-tip--wide {
    line-height: 1.6;
    min-width: 200px;
}

.map-tip--gutter {
    padding-right: 16px;
}

.map-tip__title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin-bottom: 8px;
    color: var(--fg-1);
}

.map-tip__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    opacity: var(--map-row-opacity, 1);
}

.map-tip__row--above {
    margin-top: 0;
    margin-bottom: 4px;
}

.map-tip__row--muted {
    color: var(--fg-4);
}

.map-tip__section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-base);
}

.map-tip__label {
    color: var(--fg-4);
}

.map-tip__warn {
    color: var(--warning-strong-fg);
}

.map-tip__fine {
    font-size: var(--fs-xs);
}

.map-tip__strong {
    font-weight: var(--fw-semibold);
    color: var(--fg-body-strong);
}

/* A device count carried on the tooltip, in the layer's own colour. */
.map-tip__pill {
    display: inline-block;
    background: var(--map-accent, var(--fg-4));
    color: var(--fg-on-dark);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

/* ── Legend swatches for the coverage layers ────────────────────────────── */

.map-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--map-accent, var(--fg-4));
    border: 1px solid var(--map-swatch-edge, transparent);
    box-sizing: border-box;
    flex-shrink: 0;
}

.map-swatch--sm {
    width: 11px;
    height: 11px;
}

/* A gateway that is not reporting: outlined, never filled, because an empty
   ring reads as "no signal from here" rather than a measured zero. */
.map-swatch--offline {
    background: transparent;
    border: 2px solid var(--map-accent, var(--fg-5));
}

/* Never seen at all — dashed, to separate "absent" from "offline". */
.map-swatch--unknown {
    background: var(--fg-5);
    opacity: 0.9;
    border: 1.5px dashed var(--gw-marker-halo);
}

/* Terrain with no prediction: hatched, so a gap never reads as a low value. */
.map-swatch--hatched {
    border-radius: 2px;
    background: repeating-linear-gradient(
        45deg,
        var(--border-medium),
        var(--border-medium) 2px,
        transparent 2px,
        transparent 4px
    );
}

.map-legend-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    opacity: var(--map-row-opacity, 1);
}

/* The tooltip's subject: a gateway or device name, one step up from the body
   so the reader knows what the rest of the tooltip is about. */
.map-tip__subject {
    font-size: var(--fs-base);
}

.map-tip__faint {
    color: var(--fg-5);
}

/* Device count on a cluster marker. --map-marker-size and its type size are
   computed from the count, so a busy marker stays legible. Flat: the product
   does not use shadows or text-shadow on chrome. */
.map-marker-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--map-marker-size);
    height: var(--map-marker-size);
    background: var(--method-radial-fg);
    border: 2px solid var(--info-darkest-fg);
    border-radius: 50%;
    color: var(--fg-on-dark);
    font-weight: var(--fw-bold);
    font-size: var(--map-marker-font);
}

/* ── Device markers ─────────────────────────────────────────────────────── */

/* Three states the operator has to tell apart WITHOUT opening a popup, so the
   difference is in the border, not the fill: a real engine fix is solid, an
   RSSI-synthesised scatter position is dashed, and a disconnected device is an
   outline with no fill at all. --map-dot-size and --map-accent come from the
   renderer. Flat, per the design system — the drop shadows these carried were
   the only ones on the map. */
.map-dot {
    width: var(--map-dot-size);
    height: var(--map-dot-size);
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--map-accent, var(--fg-4));
    border: 1px solid var(--gw-marker-halo);
}

/* Position inferred from RSSI, not computed by the engine. The dash IS the
   claim: it says "roughly here" where a solid dot says "here". */
.map-dot--scatter {
    opacity: 0.9;
    border: 1.5px dashed var(--gw-marker-halo);
}

.map-dot--disconnected {
    background: transparent;
    border: 2px solid var(--map-accent, var(--fg-5));
}

/* The floating legend box a Leaflet control adds over the canvas.
   The inline version it replaces carried a backdrop-filter, a drop shadow and
   two hex colours — the only frosted-glass panel in the product, against a
   design system that is flat and tokenised throughout. */
.lora-coverage-legend {
    max-width: 220px;
    padding: 12px 14px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card);
    font-family: var(--font-base, system-ui);
    font-size: var(--fs-sm);
    color: var(--fg-1);
}

/* ── Popup statistics (multi-marker map) ────────────────────────────────── */

/* An uppercase section label. Two sizes existed inline, 9px and 10px, neither
   on the scale; both are --fs-2xs. */
.map-stat-label {
    font-size: var(--fs-2xs);
    color: var(--fg-5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-stat-label--spaced {
    margin-bottom: 6px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.3px;
}

.map-stat-heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The headline figure a popup exists to state. */
.map-stat-value {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--fg-1);
}

.map-stat-value--sm {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.map-stat-body {
    font-size: var(--fs-xs);
    color: var(--fg-2);
}

/* One figure over its label. */
.map-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.map-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.map-stat-row--gap-sm {
    gap: 8px;
    margin-bottom: 4px;
}

.map-stat-row--footnote {
    gap: 6px;
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--fg-2);
}

.map-stat-section {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-base);
}

.map-stat-block {
    margin-bottom: 10px;
}

.map-center {
    text-align: center;
}

/* A gateway with nothing to report: grey, outlined, flat. The inline version
   carried the map's last drop shadow. */
.map-dot--idle {
    background: var(--fg-5);
    border: 2px solid var(--gw-marker-halo);
}

.map-dot--inline {
    display: inline-block;
}

.map-dot--sm {
    width: 8px;
    height: 8px;
}

.map-tip__danger {
    color: var(--danger-strong-fg);
    font-weight: var(--fw-semibold);
}

.map-dim-75 {
    opacity: 0.75;
}

.map-dim-85 {
    opacity: 0.85;
}

/* Text in a tier's own colour — the tier IS the finding, so it carries it. */
.map-tip__accent {
    color: var(--map-accent, var(--fg-1));
}

/* Gateway marker on the coverage map. Flat: the inline version it replaces
   carried the last drop shadow on this surface. */
.map-gw-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--method-radial-fg);
    border: 2px solid var(--info-darkest-fg);
    border-radius: 50%;
}

/* Device-count bubble on a clustered marker. Size and label size are computed
   from the count, so both travel as custom properties — a glyph in a fixed box
   is a dimension, not a type-scale choice, which is why 7px is not a scale
   violation here. Flat: the inline version carried a drop shadow AND a text
   shadow, and two literal `white`s where the token is --fg-on-dark. */
.map-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--map-bubble-size);
    height: var(--map-bubble-size);
    border-radius: 50%;
    background: var(--map-accent, var(--fg-4));
    border: 2.5px solid var(--fg-on-dark);
    color: var(--fg-on-dark);
    font-size: var(--map-bubble-font);
    font-weight: var(--fw-bold);
}

/* ── Multi-marker map legend ────────────────────────────────────────────── */

/* A smaller eyebrow than .t-eyebrow's 12px: this one labels groups INSIDE a
   legend strip, where the swatch beside it is 8px, so the section label must
   not outweigh what it introduces. */
.map-legend-eyebrow {
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
}

/* The device-count ramp. These three sizes ARE the legend's content — they
   show what a marker's diameter means — so they are named rather than left as
   three inline numbers a reader has to match against the JS by eye. */
.map-count-key {
    display: inline-block;
    border-radius: 50%;
    background: var(--fg-5);
}

.map-count-key--few {
    width: 8px;
    height: 8px;
}

.map-count-key--some {
    width: 12px;
    height: 12px;
}

.map-count-key--many {
    width: 18px;
    height: 18px;
}

/* The map canvas and its empty state share one height, handed over by the
   macro's caller. */
.multi-marker-map,
.multi-marker-empty {
    height: var(--map-height, 320px);
}

.multi-marker-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A dashed square key: "this cell carries a single point of failure". Dashed
   because the SPOF is a property OF the cell, not another layer drawn on it —
   the same reason the map draws it as a border rather than a fill. */
.map-swatch--dashed {
    border-radius: 2px;
    background: transparent;
    border: 1px dashed var(--fg-2);
}