/* ===== rc_gps_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.
   The form's rules and the styling a template may not hold as inline style= attributes live here.

   SCOPE. Every rule is :where(.rc-gps), the private root class added beside the shared .rc-section.
   :where() adds no specificity, so it cannot change which rule wins. Scoping on .rc-section alone
   would be a no-op: the parent declares it and five section roots wear it.

   Two rules carry a second class on purpose. rotacloud.css sorts AFTER this file, so an
   equal-specificity rule here LOSES the order tie. The doubled class buys back the one point of
   specificity. Both are written
   inside the :where() scope, which adds nothing, so the arithmetic is unaffected. */

/* =============================================
   GPS LAYOUT
   ============================================= */
:where(.rc-gps) .rc-gps-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    :where(.rc-gps) .rc-gps-layout {
        grid-template-columns: 1fr 380px;
    }
}

/* From the header's inline style= attributes. */
:where(.rc-gps) .rc-gps-stats {
    display: flex;
    gap: 1.5rem;
}

:where(.rc-gps) .rc-gps-stat {
    text-align: center;
}

/* Beats the parent's .rc-kpi-meta-value { color: var(--px-text-primary) } — see the note above. */
:where(.rc-gps) .rc-kpi-meta-value.rc-gps-total-violations {
    color: var(--px-chart-coral);
}

:where(.rc-gps) .rc-map-container {
    height: 400px;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--px-border);
    position: relative;
}

/* From the map div's inline style= attribute. */
:where(.rc-gps) .rc-map-canvas {
    height: 100%;
    width: 100%;
}

/* Leaflet is the one dependency of this section that can fail on its own, and
   only the map needs it. renderGPS puts this in the map's box and renders the
   rest, so an empty grey rectangle never reads as "no violations". */
:where(.rc-gps) .rc-map-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--px-chart-coral);
}

:where(.rc-gps) .rc-map-container .leaflet-container {
    background: var(--px-bg-elevated);
    height: 100%;
    width: 100%;
}

:where(.rc-gps) .rc-map-reset-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--px-border);
    background: var(--px-bg-card);
    color: var(--px-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

:where(.rc-gps) .rc-map-reset-btn:hover {
    background: var(--px-chart-cyan);
    border-color: var(--px-chart-cyan);
    color: var(--px-chart-btn-text);
}

:where(.rc-gps) .rc-offenders-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

:where(.rc-gps) .rc-offender-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: var(--px-bg-elevated);
    border: 1px solid var(--px-border);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    gap: 0.75rem;
}

:where(.rc-gps) .rc-offender-item:hover {
    background: var(--px-bg-deep);
    border-color: var(--px-chart-coral);
    transform: translateX(3px);
}

:where(.rc-gps) .rc-offender-item.selected {
    background: var(--px-chart-coral);
    border-color: var(--px-chart-coral);
    color: var(--px-chart-btn-text);
}

:where(.rc-gps) .rc-offender-item.selected .rc-offender-name,
:where(.rc-gps) .rc-offender-item.selected .rc-offender-role,
:where(.rc-gps) .rc-offender-item.selected .rc-offender-rank,
:where(.rc-gps) .rc-offender-item.selected .rc-offender-count {
    color: var(--px-chart-btn-text);
}

/* Coral or amber badge text vanishes on the coral selected fill; outline it in the fill's ink instead. */
:where(.rc-gps) .rc-offender-item.selected .rc-distance-badge {
    background: transparent;
    color: var(--px-chart-btn-text);
    box-shadow: inset 0 0 0 1px currentColor;
}

:where(.rc-gps) .rc-offender-rank {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(220,38,38,0.1);
    color: var(--px-danger-ink);
    flex-shrink: 0;
}

:where(.rc-gps) .rc-offender-info {
    flex: 1;
    min-width: 0;
}

:where(.rc-gps) .rc-offender-name {
    font-weight: 600;
    color: var(--px-text-primary);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(.rc-gps) .rc-offender-role {
    font-size: 0.7rem;
    color: var(--px-text-secondary);
}

:where(.rc-gps) .rc-offender-stats {
    text-align: right;
    flex-shrink: 0;
}

:where(.rc-gps) .rc-offender-count {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--px-chart-coral);
}

:where(.rc-gps) .rc-distance-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

:where(.rc-gps) .rc-distance-badge.severe {
    background: rgba(220,38,38,0.1);
    color: var(--px-danger-ink);
}

:where(.rc-gps) .rc-distance-badge.moderate {
    background: rgba(217,119,6,0.1);
    color: var(--px-warning-text);
}

:where(.rc-gps) .rc-success-state {
    color: var(--px-warning-ink);
}

/* Leaflet's own sheet supplies the light controls for print. */
@media not print {
:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar a {
    background-color: var(--px-bg-card);
    border-bottom-color: var(--px-border);
    color: var(--px-text-primary);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar a:hover,
:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar a:focus {
    background-color: var(--px-bg-elevated);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar a:focus-visible {
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 2px;
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar {
    border-color: var(--px-border);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-bar a.leaflet-disabled {
    background-color: var(--px-bg-disabled);
    color: var(--px-text-disabled);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-popup-content-wrapper,
:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-popup-tip {
    background: var(--px-bg-card);
    color: var(--px-text-primary);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-container a.leaflet-popup-close-button {
    color: var(--px-text-secondary);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--px-bg-card) 80%, transparent);
    color: var(--px-text-secondary);
}

:where([data-theme="dark"] .rc-gps) .rc-map-container .leaflet-control-attribution a {
    color: var(--px-link);
}
}

/* =============================================
   INDIVIDUAL VIOLATIONS TABLE
   ============================================= */
:where(.rc-gps) .rc-violations-block {
    margin-top: 1.5rem;
}

:where(.rc-gps) .rc-violations-wrap {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--px-border);
    border-radius: 12px;
}

/* Print shows every row: each scroll box grows to its whole list. */
@media print {
    :where(.rc-gps) .rc-violations-wrap,
    :where(.rc-gps) .rc-offenders-list { max-height: none; overflow: visible; }
}

/* From the distance header cell's inline style= attribute. Beats the parent's
   .rc-drill-table th { text-align: left } — see the note above. */
:where(.rc-gps) .rc-drill-table th.rc-th-right {
    text-align: right;
}

:where(.rc-gps) .rc-violation-row.dimmed td {
    color: var(--px-text-disabled);
}

/* !important beats the distance cell's inline coral/amber colour. */
:where(.rc-gps) .rc-violation-row.dimmed td.rc-violation-distance {
    color: var(--px-text-disabled) !important;
}

:where(.rc-gps) .rc-violation-row.dimmed .rc-violation-type {
    background: var(--px-bg-disabled);
    color: var(--px-text-disabled);
    border-color: var(--px-border-disabled);
}

:where(.rc-gps) .rc-violation-when {
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
}

:where(.rc-gps) .rc-violation-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--px-bg-elevated);
    color: var(--px-text-secondary);
    border: 1px solid var(--px-border);
}

:where(.rc-gps) .rc-violation-distance {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-align: right;
}

:where(.rc-gps) .rc-violations-wrap::-webkit-scrollbar {
    width: 6px;
}

:where(.rc-gps) .rc-violations-wrap::-webkit-scrollbar-track {
    background: transparent;
}

:where(.rc-gps) .rc-violations-wrap::-webkit-scrollbar-thumb {
    background: var(--px-border);
    border-radius: 3px;
}

/* =============================================
   SCROLLBAR
   ============================================= */
:where(.rc-gps) .rc-offenders-list::-webkit-scrollbar {
    width: 6px;
}

:where(.rc-gps) .rc-offenders-list::-webkit-scrollbar-track {
    background: transparent;
}

:where(.rc-gps) .rc-offenders-list::-webkit-scrollbar-thumb {
    background: var(--px-border);
    border-radius: 3px;
}

:where(.rc-gps) .rc-offenders-list::-webkit-scrollbar-thumb:hover {
    background: var(--px-text-muted);
}