/*
 * Charger map page. Loaded only by Views/Map/Index.cshtml via the layout's
 * "Styles" section.
 *
 * Merchant themes don't share variable names — the default sheets expose
 * --clr-k-* and the Amsterdam design system exposes --c-*. Every colour here
 * therefore resolves through a chain (AMS token, then default token, then a
 * literal) so the page inherits whichever theme is loaded without either sheet
 * needing to know about it.
 */

:root{
    --map-ink: var(--c-ink, var(--clr-k-800, #1a1a1a));
    --map-muted: var(--c-muted, var(--clr-k-600, #5f6368));
    --map-line: var(--c-line, var(--clr-k-300, #d5d7da));
    --map-surface: var(--c-surface, #ffffff);
    --map-fill: var(--c-fill, var(--clr-k-100, #f3f4f6));
    --map-free: var(--c-green, #167d3f);
    --map-busy: var(--clr-k-500, #8a8f96);
    --map-radius: var(--section-border-radius, 8px);

    /* Pin body for a site with something free. Deliberately the merchant's own
       primary colour rather than a generic green: the map is the first screen a
       driver sees and it should read as this client's app. Availability is still
       carried by the busy pins, the count, and the badges in the picker. */
    --map-pin: var(--c-blue, var(--clr-primary-900, #1f7cea));
}

.map-page{ display: flex; flex-direction: column; gap: 12px; }
.map-page__intro{ color: var(--map-muted); }

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

.map-canvas{
    /* Fixed viewport-relative height: Leaflet needs a resolved height on its
       container or it renders 0px tall. */
    height: min(60vh, 520px);
    min-height: 320px;
    width: 100%;
    border: 1px solid var(--map-line);
    border-radius: var(--map-radius);
    overflow: hidden;
    background: var(--map-fill);
}

/* Loading overlay -------------------------------------------------------- */
/* The wrapper exists only to give the overlay something to pin to: the overlay can't live
   inside .map-canvas, which is Leaflet's own container. */
.map-shell{ position: relative; }

.map-loading{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    /* Veil rather than hide: the basemap fading in behind the rings reads as progress. */
    background: rgba(255, 255, 255, 0.65);
    border-radius: var(--map-radius);

    /* Over Leaflet's panes (400), under its controls (1000). Hiding this is the `hidden`
       attribute's job, which works because of the [hidden] reset in style.css — without it
       the `display: grid` above would outrank the browser's own rule and the overlay would
       never go away. */
    z-index: 500;
}

/* The rings carry the meaning for sighted users; this keeps the same message available to a
   screen reader without putting a line of text back under the map. */
.map-loading__text{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.map-toolbar{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* "Near me" -------------------------------------------------------------- */
/* button.medium:has(img) trims the right padding, which is right for a trailing icon — what
   the footer buttons have. This icon leads, so mirror the trim: a light glyph needs less room
   before it than the label's edge needs after it. Scoped to this button rather than made
   general because a selector cannot tell the two apart — the label is a text node, so the
   image matches :first-child either way. */
#map-locate{
    padding-left: 20px;
    padding-right: 24px;
}

.map-status{
    color: var(--map-muted);
    font-size: 0.9rem;
    min-height: 1.2em;
}
.map-status--error{ color: #b3261e; }

/* Markers ---------------------------------------------------------------- */
/* divIcon rather than an image pin, so state is a class swap instead of a
   second asset — same approach as the Stroomkaart map. */

.map-pin{
    position: relative;
    width: 32px;
    height: 42px;

    /* The whole pin inherits this: the teardrop fills with it and the count sits
       in it on the white knockout, so one property themes the marker. */
    color: var(--map-pin);

    /* drop-shadow follows the teardrop outline; box-shadow would draw a rectangle. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.map-pin--busy{ color: var(--map-busy); }

/* Teardrop silhouette as a mask over a currentColor fill — same technique as
   .info-icon in style.css, so the shape lives in one asset and the colour stays
   in CSS. An <img> could not be tinted per merchant. */
.map-pin__shape{
    position: absolute;
    inset: 0;

    background-color: currentColor;
    -webkit-mask: url('/icons/common/map-pin.svg') no-repeat center / contain;
    mask: url('/icons/common/map-pin.svg') no-repeat center / contain;
}

/* White face the count sits on. Inside the masked element, fully within the
   teardrop's head, so the mask leaves it untouched. */
.map-pin__shape::after{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--map-surface);
}

.map-pin__count{
    position: absolute;
    inset: 0 0 auto 0;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* Station picker dialog -------------------------------------------------- */

.map-dialog{
    width: min(92vw, 420px);
    padding: 0;
    border: 1px solid var(--map-line);
    border-radius: var(--map-radius);
    background: var(--map-surface);
    color: var(--map-ink);
}
.map-dialog::backdrop{ background: rgba(0, 0, 0, 0.45); }

.map-dialog__head{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--map-line);
}
.map-dialog__title{ margin: 0; font-size: 1.05rem; }
.map-dialog__addr{ margin: 2px 0 0; color: var(--map-muted); font-size: 0.9rem; }

.map-dialog__close{
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--map-line);
    border-radius: 50%;
    background: var(--map-surface);
    color: var(--map-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.map-dialog__list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    max-height: 50vh;
    overflow-y: auto;
}

/* One row per station. Anchor, not a button, so the hand-off to /{stationId}
   is a plain navigation the browser can open in a new tab. */
.map-station{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px;
    border: 1px solid var(--map-line);
    border-radius: var(--map-radius);
    background: var(--map-surface);
    color: var(--map-ink);
    text-decoration: none;
}
.map-station:hover{ background: var(--map-fill); }
.map-station__body{ min-width: 0; flex: 1; }
.map-station__name{
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-station__meta{ display: block; color: var(--map-muted); font-size: 0.85rem; }
.map-station__meta:empty{ display: none; }

.map-badge{
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.map-badge--free{ background: rgba(22, 125, 63, 0.12); color: var(--map-free); }
.map-badge--busy{ background: rgba(0, 0, 0, 0.08); color: var(--map-muted); }