/* Custom Styles for Smart Parking Lot UI */
:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --dark-bg: #1e1e24;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}

.navbar-brand {
    letter-spacing: -0.3px;
}

.card {
    border-radius: 0.6rem;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-pills .nav-link {
    color: #495057;
    border-radius: 0.45rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.nav-pills .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
}

#canvasScrollContainer {
    background-color: #141419 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

#canvasWrapper {
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

#roiCanvas {
    background-color: #000;
}

/* Stat Cards */
.border-4 {
    border-left-width: 4px !important;
}

/* Live stream viewer */
#liveVideoStream {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border: 2px solid #333;
    max-width: 100%;
}

/* Spot list styling */
.list-group-item {
    transition: background-color 0.15s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

/* Animations */
@keyframes pulse-dot {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

.pulse {
    animation: pulse-dot 1.8s infinite;
}