* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: #1a1a2e;
    background: #f0f0f5;
}

#app {
    display: flex;
    height: 100vh;
}

/* Sidebar */
#sidebar {
    width: 340px;
    min-width: 340px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    overflow: hidden;
}

#sidebar.collapsed {
    display: none;
}

#sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

#sidebar-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#sidebar-header h1 {
    font-size: 18px;
    margin-bottom: 0;
    color: #16213e;
}

#btn-collapse-sidebar {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 8px;
    color: #666;
}

#btn-collapse-sidebar:hover {
    background: #f0f0f5;
    color: #333;
}

/* Collapsed sidebar strip */
#sidebar-collapsed {
    width: 48px;
    min-width: 48px;
    background: #fff;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 12px;
}

#sidebar-collapsed.hidden {
    display: none;
}

#btn-expand-sidebar {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 8px;
    color: #666;
}

#btn-expand-sidebar:hover {
    background: #f0f0f5;
    color: #333;
}

#collapsed-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.collapsed-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.collapsed-alerts {
    margin-top: 4px;
}

.collapsed-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Tabs */
#tabs {
    display: flex;
    gap: 4px;
}

.tab {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ddd;
    background: #f8f8fa;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-size: 13px;
    position: relative;
}

.tab.active {
    background: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}

.badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.badge.hidden {
    display: none;
}

/* Tab content */
.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.tab-content.active {
    display: block;
}

/* Device list */
.device-item {
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.device-item:hover {
    background: #f5f5ff;
}

.device-item.selected {
    border-color: #3498db;
    background: #ebf5fb;
}

.device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.device-name {
    font-weight: 600;
    font-size: 14px;
}

.device-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #aaa;
    padding: 0 4px;
    line-height: 1;
}

.device-edit-btn:hover {
    color: #3498db;
}

.device-name-input {
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #3498db;
    border-radius: 3px;
    padding: 0 4px;
    outline: none;
    width: 140px;
}

.device-imei {
    font-size: 11px;
    color: #888;
}

.device-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background: #2ecc71;
}

.status-dot.offline {
    background: #bdc3c7;
}

.device-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.device-fresh {
    /* A ticking seconds field must not jitter its neighbours. */
    font-variant-numeric: tabular-nums;
}

/* Same amber the live share viewer uses for an overdue fix (live.css:188). */
.device-fresh.stale {
    color: #f39c12;
    font-weight: 600;
}

.battery-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.battery-bar {
    width: 20px;
    height: 10px;
    border: 1px solid #888;
    border-radius: 2px;
    position: relative;
    display: inline-block;
}

.battery-fill {
    display: block;
    height: 100%;
    border-radius: 1px;
}

.battery-fill.high { background: #2ecc71; }
.battery-fill.medium { background: #f39c12; }
.battery-fill.low { background: #e74c3c; }

/* Alerts */
#alert-controls {
    padding: 4px 0 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#alert-device-filter {
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.alert-item {
    padding: 8px 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
}

.alert-item:hover {
    background: #f5f5ff;
}

.alert-device {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.alert-item.critical {
    border-left: 3px solid #e74c3c;
}

.alert-item.warning {
    border-left: 3px solid #f39c12;
}

.alert-item.info {
    border-left: 3px solid #3498db;
}

.alert-item.acknowledged {
    opacity: 0.5;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-type {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}

.alert-time {
    font-size: 11px;
    color: #888;
}

.alert-message {
    margin-top: 4px;
}

.alert-actions {
    margin-top: 6px;
}

.btn-ack {
    font-size: 11px;
    padding: 2px 8px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-ack:hover {
    background: #2980b9;
}

/* Geofences */
.geofence-item {
    padding: 8px 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 6px;
}

.geofence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.geofence-name {
    font-weight: 600;
}

.geofence-actions {
    display: flex;
    gap: 4px;
}

.geofence-actions button {
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
}

.geofence-actions button.delete:hover {
    background: #fee;
    border-color: #e74c3c;
}

/* History panel */
#history-panel {
    padding: 12px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

#history-panel h3 {
    font-size: 14px;
    margin-bottom: 8px;
}

#history-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#history-controls input[type="datetime-local"] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

#playback-controls {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

#playback-slider {
    width: 100%;
}

#playback-time {
    font-size: 12px;
    color: #666;
}

/* Buttons */
.btn {
    padding: 6px 14px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn:hover {
    background: #2980b9;
}

.btn-secondary {
    background: #95a5a6;
}

.btn-secondary:hover {
    background: #7f8c8d;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 380px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-bottom: 16px;
}

.modal-content label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
}

.modal-content input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 2px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

#gf-devices {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 6px;
}

#gf-devices label {
    margin-bottom: 4px;
    font-weight: normal;
}

/* Device speed in sidebar */
.device-speed {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

/* Address and coordinates in sidebar */
.device-address {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-coords {
    font-size: 11px;
    color: #888;
    font-family: monospace;
    margin-top: 1px;
}

/* Address and coordinates in map popups */
.popup-address {
    font-size: 12px;
    color: #444;
    margin: 2px 0 4px;
    max-width: 260px;
    word-wrap: break-word;
}

.popup-coords {
    font-size: 11px;
    color: #777;
    font-family: monospace;
    margin-bottom: 4px;
}

/* Map */
#map-container {
    flex: 1;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

/* Direction arrow markers */
.device-marker {
    background: none !important;
    border: none !important;
}

.device-marker-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid #2ecc71;
    margin: 2px auto 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.device-marker-arrow.stationary {
    border-bottom-color: #95a5a6;
}

/* Staleness is opacity, NOT another colour. The arrow's colour means motion,
   so folding "has stopped reporting" into the existing grey would make a parked
   device and a dead one the same pixel — which is the defect this replaced.
   Opacity is also the one property that needs no geometry, so it can live here
   without touching the arrow sizes and icon anchors that live.css deliberately
   differs on (see the SOS note below). */
.device-marker-arrow.stale {
    opacity: 0.45;
}

.device-marker-arrow.moving {
    border-bottom-color: #2ecc71;
}

/* On satellite imagery the grey arrow nearly vanishes, and a stale one at 0.45
   opacity more so. A white edge keeps both visible. It is drawn only while
   imagery shows (js/basemaps.js sets the class on the map), so the street map
   looks exactly as before. The arrow is a CSS border triangle, so `outline`
   would draw a box: stacked drop-shadows follow its shape. The last shadow is
   the one above, kept. */
.basemap-imagery .device-marker-arrow {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)
            drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* SOS marker — phone panic presses only. A Teltonika hardware SOS raises an
   Alert but creates no PanicSession row, so it never sets panic_active and is
   visible in the alerts panel alone.

   These rules look identical to the ones in live.css and are NOT: the two
   maps use different arrow sizes and different icon anchors, so the ring
   offset differs on purpose. Duplicated rather than shared because there is
   no common stylesheet and no build step. Do not "fix" the inconsistency.

                 viewer (live.css)   dashboard (here)
     arrow       10px / 24px         8px / 20px
     iconSize    [20, 26]            [24, 24]
     iconAnchor  [10, 13]            [12, 12]                                */
.marker-wrap {
    position: relative;
    width: 24px;
    height: 24px;
}

.device-marker-arrow.sos {
    border-bottom-color: #e74c3c;
}

.sos-ring {
    position: absolute;
    left: 50%;
    top: 12px;                     /* the iconAnchor — NOT live.css's 13px */
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 3px solid #e74c3c;
    border-radius: 50%;
    pointer-events: none;          /* never eat map drags */
    /* Only transform and opacity animate, so this is compositor-driven and
       the count that matters is devices in SOS — realistically one — not
       markers on the map. */
    animation: sos-ring 2s ease-out infinite;
}

.sos-ring.delay {
    animation-delay: 1s;
}

@keyframes sos-ring {
    from { transform: scale(0.4); opacity: 0.85; }
    to   { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sos-ring { animation: none; transform: scale(1.6); opacity: 0.5; }
    .sos-ring.delay { display: none; }
}

/* Re-center button */
.btn-recenter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 8px 20px;
    background: rgba(52, 152, 219, 0.9);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.15s;
}

.btn-recenter:hover {
    background: rgba(41, 128, 185, 0.95);
}

.btn-recenter.hidden {
    display: none;
}

/* Config tab */
#config-device-select {
    margin-bottom: 8px;
}

#config-device-select label {
    font-size: 13px;
    font-weight: 600;
}

#config-device-dropdown {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 4px;
}

#config-status {
    margin-bottom: 8px;
    font-size: 12px;
}

.config-online {
    color: #2ecc71;
    font-weight: 600;
}

.config-offline {
    color: #e74c3c;
    font-weight: 600;
}

.config-success {
    color: #2ecc71;
    font-weight: 600;
}

.config-error {
    color: #e74c3c;
    font-weight: 600;
}

.config-pending {
    color: #f39c12;
    font-weight: 600;
}

.config-category {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.config-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #f8f8fa;
    border-bottom: 1px solid #eee;
}

.config-category-header h4 {
    font-size: 13px;
    margin: 0;
}

.config-category-actions {
    display: flex;
    gap: 4px;
}

.btn-sm {
    padding: 3px 8px;
    font-size: 11px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-sm:hover {
    background: #2980b9;
}

.config-param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f5f5f5;
}

.config-param-row:last-child {
    border-bottom: none;
}

.config-param-info {
    flex: 1;
    min-width: 0;
}

.config-param-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.config-param-desc {
    display: block;
    font-size: 11px;
    color: #888;
}

.config-param-control {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.config-input {
    width: 80px;
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

.config-input:focus {
    border-color: #3498db;
    outline: none;
}

select.config-input {
    width: 140px;
}

.config-unit {
    font-size: 11px;
    color: #888;
}

/* Raw commands section */
#config-raw-commands {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

#config-raw-commands h4 {
    font-size: 13px;
    margin-bottom: 6px;
}

.config-commands-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.config-response {
    margin-top: 6px;
    padding: 6px 8px;
    background: #f8f8fa;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

.config-response.hidden {
    display: none;
}

/* Command history */
#config-history {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

#config-history h4 {
    font-size: 13px;
    margin-bottom: 6px;
}

.config-empty {
    font-size: 12px;
    color: #999;
    padding: 8px 0;
}

.config-history-item {
    padding: 6px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

.config-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.config-history-header code {
    font-size: 11px;
    color: #333;
}

.config-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}

.config-status-badge.success {
    background: #d4edda;
    color: #155724;
}

.config-status-badge.error {
    background: #f8d7da;
    color: #721c24;
}

.config-status-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.config-history-meta {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

.config-history-response {
    margin-top: 4px;
    padding: 4px 6px;
    background: #f8f8fa;
    border-radius: 3px;
    font-family: monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 60px;
    overflow-y: auto;
}

/* Login overlay */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.login-overlay.hidden {
    display: none;
}

.login-card {
    background: #fff;
    padding: 32px 36px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 340px;
}

.login-card h2 {
    font-size: 20px;
    color: #16213e;
    margin-bottom: 20px;
    text-align: center;
}

.login-card label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 4px;
}

.login-card input:focus {
    border-color: #3498db;
    outline: none;
}

.login-card .btn {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    margin-top: 4px;
}

.login-error {
    color: #e74c3c;
    font-size: 13px;
    margin-bottom: 8px;
    text-align: center;
}

.login-error.hidden {
    display: none;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    #app {
        flex-direction: column;
    }

    #sidebar {
        width: 100%;
        min-width: unset;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    #map-container {
        height: 60vh;
    }

    #btn-collapse-sidebar,
    #sidebar-collapsed {
        display: none !important;
    }
}