:root {
            --primary: #2c3e50;
            --accent: #3498db;
            --success: #27ae60;
            --danger: #e74c3c;
            --bg: #f4f7f6;
            --border: #ddd;
        }

        body { margin: 0; padding: 0; display: flex; height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); overflow: hidden; }
        
        #sidebar {
            width: 400px;
            background: #ffffff;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            z-index: 1000;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        #sidebar.collapsed {
            transform: translateX(-100%);
            position: absolute;
            height: 100%;
        }

        #sidebar.collapsed ~ #menu-toggle {
            display: block;
        }

        #menu-toggle {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 1001;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            display: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        @media (max-width: 768px) {
            #sidebar {
                position: absolute;
                height: 100%;
                width: 300px;
                transform: translateX(-100%);
            }
            #sidebar.active {
                transform: translateX(0);
            }
            #menu-toggle {
                display: block;
            }
        }

        header { padding: 15px; background: var(--primary); color: white; text-align: center; position: relative; }
        header h2 { margin-left: 30px; } /* Space for toggle when sidebar is active on mobile */
        h2 { margin: 0; font-size: 1.2rem; letter-spacing: 1px; }

        /* Tabs Navigation */
        .tabs { display: flex; background: #eee; border-bottom: 1px solid var(--border); }
        .tab-btn {
            flex: 1; padding: 12px; border: none; background: none;
            cursor: pointer; font-weight: bold; color: #7f8c8d; transition: 0.3s;
            text-decoration: none; text-align: center; box-sizing: border-box;
        }
        span.tab-btn { cursor: default; } /* "you are here" label, not a link */
        .tab-btn.active { background: white; color: var(--accent); border-bottom: 3px solid var(--accent); }

        .tab-content { flex-grow: 1; display: none; flex-direction: column; overflow: hidden; }
        .tab-content.active { display: flex; }

        /* Group Filter */
        #group-filter { padding: 8px 15px; background: #f9f9f9; border-bottom: 1px solid var(--border); }
        #group-filter label { margin-bottom: 4px; }
        #group-filter select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; }

        /* History Controls */
        #history-controls { padding: 15px; background: #f9f9f9; border-bottom: 1px solid var(--border); }
        .control-group { margin-bottom: 12px; }
        label { font-size: 0.7rem; font-weight: bold; color: #95a5a6; text-transform: uppercase; margin-bottom: 4px; display: block; }
        select, input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; }
        
        .btn-row { display: flex; gap: 8px; }
        button.action-btn { flex: 1; padding: 10px; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; transition: 0.2s; }
        .btn-plot { background: var(--accent); }
        .btn-plot:hover { background: #2980b9; }
        .btn-clear { background: var(--danger); }
        .btn-clear:hover { background: #c0392b; }

        /* Timeline & List Containers */
        #device-list, #history-timeline { flex-grow: 1; overflow-y: auto; background: white; }

        /* Item Styling */
        .item-row {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: 0.2s;
        }
        .item-row:hover { background: #f8fbff; }

        /* Live Item Specifics */
        .live-item { border-left: 5px solid transparent; }
        .live-item.active { border-left-color: var(--success); }
        .live-item.stale { border-left-color: #bdc3c7; opacity: 0.7; }

        /* Timeline Item Specifics */
        .timeline-item { display: flex; justify-content: space-between; align-items: center; }
        .time-label { font-weight: bold; color: var(--primary); font-size: 0.95rem; }

        /* Legend */
        #history-legend { padding: 10px 15px; display: flex; flex-wrap: wrap; gap: 5px; background: #fff; }
        .legend-card { padding: 4px 8px; border-radius: 4px; color: white; font-size: 0.75rem; font-weight: bold; }

        /* Shared device row (popup.js deviceRowHtml): colored block on the left,
           optional info column, battery/charging/signal badge at the top-right.
           Used by the live sidebar rows and the history legend rows. */
        .device-row { display: flex; align-items: center; gap: 12px; }
        /* Badge content (bars, hops, Sats) must never break to a new line:
           the badge never shrinks/wraps; a too-long device name shrinks its
           font (fitDeviceTitles) and finally ellipsizes instead. min-width:0
           is required — without it the nowrap title forces the flex column
           to its full text width and pushes the badge out of the row. */
        .device-badge { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; margin-left: auto; align-self: flex-start; padding-top: 2px; font-size: 0.6rem; font-weight: bold; line-height: 1; }
        .device-row .index-flex-grow { min-width: 0; }
        .device-row .index-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Reverse-geocoded place line (live rows): one line, overflow hidden */
        .index-place-line { font-size: 0.7rem; color: #7f8c8d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        #map { flex-grow: 1; }

        /* Login Overlay */
        #login-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(44, 62, 80, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
            text-align: center;
        }
        .login-card {
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            color: var(--primary);
        }
        .small-label {
            background: rgba(255,255,255,0.92) !important;
            border: 1px solid #aaa !important;
            border-radius: 3px !important;
            padding: 1px 5px !important;
            font-size: 10px !important;
            font-weight: 600;
            color: #333 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
            white-space: nowrap;
            pointer-events: none;
        }