/* reduced map depth on wide screens to give more room to the summaries */
#map {
    height: 70vh;
    min-height: 420px;
    border-radius: 8px;
}

@media (min-width: 992px) {
    #map {
        height: 60vh;
    }
    /* slightly reduced depth on desktop */
}

.stat-card {
    border-left: 4px solid #0d6efd;
}

.live-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.summary-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#connection-status {
    font-size: 0.75rem;
}

/* Highlight styles for selected previous ride */
.previous-ride-highlight {
    stroke: #00bfff !important;
    color: #00bfff !important;
}

.summary-table .selected-row {
    background: rgba(0, 191, 255, 0.08);
}

/* Totals row style */
.summary-table tfoot tr td {
    font-weight: 700;
    background: #f8f9fa;
}

/* compass arrow */
#compass-needle {
    transition: transform 0.4s ease-out;
    transform-origin: center; /* Crucial for rotating around the middle */
}

/* Small adjustments for the map controls to match page styling */
.leaflet-bottom .btn {
    margin: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
}

/* -------------------------
   Responsive summary table
   -------------------------
   On small screens make the table easier to read:
   - allow horizontal scrolling if content is wide
   - reduce padding/font-size
   - show totals row in a compact layout
*/
@media (max-width: 767.98px) {
    /* allow the table to scroll horizontally inside its card */
    .card-body > .summary-table,
    .card-body > .summary-table-wrapper {
        min-width: 640px;
    }

    /* ensure container allows horizontal scroll (touch-friendly) */
    .card-body {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    /* reduce padding and font size for compact rows */
    .summary-table th,
    .summary-table td {
        padding: 6px 8px;
        font-size: 0.86rem;
    }

    /* shorten headings visually */
    .summary-table thead th {
        white-space: nowrap;
    }

    /* keep numbers readable but prevent wrapping */
    .summary-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    /* make selected row more prominent on touch devices */
    .summary-table .selected-row {
        background: rgba(0, 191, 255, 0.10);
    }

    /* totals row compact */
    .summary-table tfoot tr td {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 0.9rem;
    }

    /* improve hit area for rows on small devices */
    .summary-table tbody tr {
        touch-action: manipulation;
    }
}

/* Optional: improve table readability on medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    .summary-table th,
    .summary-table td {
        padding: 7px 9px;
        font-size: 0.88rem;
    }
}