/* =========================================================================
   App-specific styles. Foundation tokens live in css/rallytrack.css;
   this file holds residual styles that aren't yet componentised.
   ========================================================================= */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--green);
}

.invalid {
    outline: 1px solid var(--rally-red);
}

.validation-message {
    color: var(--rally-red);
}

.blazor-error-boundary {
    background: var(--rally-red);
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--line-strong);
}

/* ── Live map ───────────────────────────────────────────────────────────── */

/* Full-viewport map layout — same pattern as .rt-results-layout (see
   rallytrack.css §"Results page"): the page fills the viewport below the
   public topbar so the map fills as much screen real estate as possible.
   The :has() rule on rt-public-main strips the PublicLayout's max-width
   and padding when this layout is on the page. */
html body main.rt-public-main:has(.rt-map-layout) {
    max-width: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.rt-map-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    padding: var(--s-4) var(--s-5);
    box-sizing: border-box;
    overflow: hidden;
    gap: var(--s-3);
}

.rt-map-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rt-map-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    flex-shrink: 0;
}

/* When inside .rt-map-layout the container expands to fill remaining
   flex space rather than the legacy 70vh cap. position: relative anchors
   the absolutely-positioned loading spinner overlay. */
.rt-map-layout .rt-map-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    position: relative;
}

.rt-map-container {
    height: 70vh;
    min-height: 400px;
    border-radius: var(--r-md);
    overflow: hidden;
}

/* §9.5 competitor marker — rounded white rectangle with a bold black car
   number always upright, plus a small triangular chevron on one edge
   pointing in the direction of travel. Border colour and chevron colour
   are driven by data-freshness; .stopped fills the whole rectangle red
   for cars stopped on a stage. The marker box itself is 44×38 (28×22
   rectangle + 8px chevron room on each axis) — Leaflet's iconAnchor
   centres it on the lat/lng. */
.competitor-marker {
    position: relative;
    width: 28px;
    height: 22px;
    margin: 8px;
    background: #ffffff;
    border: 2px solid #16a34a;  /* default green; overridden by freshness class */
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    cursor: pointer;
}

.competitor-marker .number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Chevron: 8px solid triangle attached to one edge. Colour matches the
   border via currentColor so the freshness colour classes flow through. */
.competitor-marker .chevron {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.competitor-marker .chevron-north {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid currentColor;
}

.competitor-marker .chevron-east {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid currentColor;
}

.competitor-marker .chevron-south {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
}

.competitor-marker .chevron-west {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid currentColor;
}

/* §9.5 freshness classes. Border + chevron colour are driven by the time
   since last update. Beyond red (>300s) the JS hides the marker entirely. */
.competitor-marker.freshness-green  { border-color: #16a34a; color: #16a34a; }
.competitor-marker.freshness-yellow { border-color: #eab308; color: #eab308; }
.competitor-marker.freshness-red    { border-color: #dc2626; color: #dc2626; }

/* §9.5 stopped-on-stage override: fill the rectangle red, white number,
   red chevron. Differentiates "stopped on a competitive stage" from the
   border-only freshness signal. Wins over any freshness colour. */
.competitor-marker.stopped {
    background: #dc2626;
    border-color: #dc2626;
    color: #dc2626;  /* chevron */
}

.competitor-marker.stopped .number {
    color: #ffffff;
}

/* §9.5 in-transit (liaison) fill: light grey so transit cars read distinctly
   from racing cars without competing with the stopped-red. The freshness
   border colour still shows through. */
.competitor-marker.transit {
    background: #c8ccd2;
}

/* "Updated HH:mm:ss" line in the competitor popup — muted, monospace. */
.rt-veh-updated {
    color: var(--fg-muted, #9aa0a6);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* §9.5 live-map legend: small marker-style swatches explaining the icon
   colours, sat at the right end of the controls bar above the map. */
.rt-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-left: auto;
    font-size: 12px;
    color: var(--fg-muted, #9aa0a6);
}

.rt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.rt-legend-swatch {
    width: 18px;
    height: 13px;
    border-radius: 4px;
    border: 2px solid #16a34a;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    flex-shrink: 0;
}

.rt-legend-swatch.sw-green  { border-color: #16a34a; }
.rt-legend-swatch.sw-amber  { border-color: #eab308; }
.rt-legend-swatch.sw-red    { border-color: #dc2626; }
.rt-legend-swatch.sw-stopped { background: #dc2626; border-color: #dc2626; }
.rt-legend-swatch.sw-transit { background: #c8ccd2; border-color: #16a34a; }

/* v2.13.6 / §9.2: rt-tc-pin and rt-stage-pin* CSS removed — TC, SS, SF
   markers now render as L.icon PNGs from /img/map/ (TimeControl.png,
   StageStart.png, StageFinish.png) directly. No bespoke CSS pin remains. */

/* §9.3: permanent tooltip labels above each LocationPoint marker. The
   Leaflet default tooltip is white with a directional arrow — override
   for the dark theme. Fixed pixel sizing keeps labels legible at every
   zoom level (Leaflet renders tooltips outside the tile-zoom layer so
   they don't scale with the map). Always visible: map.js clusters
   co-located markers in screen space and re-clusters on every zoom, so
   labels never overlap and don't need to be hidden at any zoom. */
.leaflet-tooltip.rt-map-label {
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: 0;
    box-shadow: none;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* pre (not pre-line): honour the \n between stacked labels but never wrap
       a single label like "SS3/6 Start" at its space — one control per line. */
    white-space: pre;
    pointer-events: none;
}

/* Hide the Leaflet tooltip arrow when on our dark-theme variant. The default
   ::before pseudo-element draws a small triangle pointing toward the marker;
   on the dark background it reads as a stray white wedge, so suppress it. */
.leaflet-tooltip.rt-map-label::before {
    display: none;
}

/* §9.5 spotlight pulse — expanding box-shadow halo on a competitor marker.
   Applied by map.js via _applyHighlight() when a car is spotlighted
   (Highlight Leader mode or car # text input). */
@keyframes rt-marker-pulse {
    0%, 100% {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(22, 163, 74, .25), 0 1px 4px rgba(0, 0, 0, .5);
    }
}

.competitor-marker.pulsing {
    animation: rt-marker-pulse 1.2s ease-in-out infinite;
}