/* Dark is the default. The Settings tab flips [data-theme] on ; anything theme-dependent must read one of these vars rather than hardcode a hex. */ :root, :root[data-theme="dark"] { --bg: #0f172a; --panel: #1e293b; --panel-alt: #16213a; --border: #2c3a54; --text: #e5edf7; --muted: #93a3bd; --accent: #38bdf8; --red: #f87171; --green: #34d399; --amber: #fbbf24; --purple: #a78bfa; --gray: #94a3b8; --blue: #60a5fa; --input-bg: #0f1a2e; --hover: #22314d; --hover-border: #3a4b6d; --active-bg: #1c3350; --map-bg: #0b1120; --scroll: #34445f; --route-casing: #0b1120; /* dark halo under the route line */ } :root[data-theme="light"] { --bg: #eef2f7; --panel: #ffffff; --panel-alt: #f4f7fb; --border: #d3dbe6; --text: #16233a; --muted: #5b6b83; --accent: #0284c7; --red: #dc2626; --green: #059669; --amber: #b45309; --purple: #7c3aed; --gray: #64748b; --blue: #2563eb; --input-bg: #ffffff; --hover: #e6edf6; --hover-border: #b9c6d8; --active-bg: #dbeafe; --map-bg: #e8eef5; --scroll: #c2ccda; --route-casing: #ffffff; /* light halo reads better on a light basemap */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } #app { display: flex; height: 100vh; width: 100vw; } #map { flex: 1 1 60%; height: 100%; background: var(--map-bg); } #sidebar { flex: 0 0 42%; max-width: 560px; min-width: 300px; height: 100%; background: var(--panel); display: flex; flex-direction: column; } #divider { flex: 0 0 6px; height: 100%; background: var(--border); cursor: col-resize; position: relative; } #divider:hover, #divider.dragging { background: var(--accent); } #divider::after { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; } #sidebar-header { padding: 14px 18px 0; border-bottom: 1px solid var(--border); background: var(--panel-alt); } #sidebar-header h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; } /* Status bar injected by tx-data-source.js (extension or self-hosted web build; absent on a plain static server). #tx-logout-btn only appears in the web build. */ #tx-status { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 11.5px; color: var(--muted); } #tx-conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #d13030; } #tx-conn-text { font-weight: 600; } #tx-updated-wrap { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; } #tx-updated { white-space: nowrap; font-weight: 700; color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; } #tx-updated.stale { color: var(--amber); border-color: rgba(251,191,36,.45); } #tx-updated-at { font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; } #tx-logout-btn { margin-left: 8px; flex: 0 0 auto; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); font-size: 10.5px; cursor: pointer; } #tx-logout-btn:hover { color: var(--text); border-color: var(--accent); } .tabs { display: flex; gap: 4px; margin-top: 10px; } .tab-btn { flex: 1; padding: 8px 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; } .tab-panel.active { display: flex; } #search { margin: 10px 0 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 13.5px; outline: none; } #search::placeholder { color: var(--muted); } #truck-list, #assign-list { overflow-y: auto; flex: 1; padding: 6px 10px 20px; } .stats { font-size: 12px; color: var(--muted); padding: 8px 0 0; } .truck-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 3px 2px; border-radius: 8px; background: var(--panel-alt); border: 1px solid var(--border); cursor: pointer; transition: background .15s, border-color .15s; font-size: 12.5px; } .truck-card:hover { background: var(--hover); border-color: var(--hover-border); } .truck-card.active { border-color: var(--accent); background: var(--active-bg); } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; box-shadow: 0 0 0 2px rgba(255,255,255,0.05); } .dot-driving { background: var(--blue); } .dot-rest { background: var(--gray); } .dot-work { background: var(--purple); } .dot-unknown { background: #4b5875; } .plate { font-weight: 700; font-size: 13px; letter-spacing: .2px; flex: 0 0 auto; white-space: nowrap; } .delay-badge { font-size: 11px; color: var(--muted); white-space: nowrap; } .driver-name { flex: 1 1 auto; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .truck-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; } .status-pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; text-transform: capitalize; white-space: nowrap; } .pill-driving { background: rgba(96,165,250,.18); color: var(--blue); } .pill-rest { background: rgba(148,163,184,.18); color: var(--gray); } .pill-work { background: rgba(167,139,250,.18); color: var(--purple); } .pill-unknown { background: rgba(75,88,117,.3); color: var(--muted); } /* Assignment cards */ .assign-card { padding: 8px 10px; margin: 4px 2px; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); cursor: pointer; } .assign-card.route-shown { border-color: var(--accent); } .assign-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .assign-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } .assign-plate { font-weight: 700; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; } .assign-trailer { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--input-bg); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; white-space: nowrap; } .assign-driver-inline { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .assign-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .rest-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; white-space: nowrap; } .rest-24 { background: rgba(251,191,36,.18); color: var(--amber); } .rest-45 { background: rgba(248,113,113,.18); color: var(--red); } .rest-unknown { background: rgba(148,163,184,.18); color: var(--gray); } .assign-line2 { font-size: 12px; margin-top: 4px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .assign-line2-text { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .assign-sep { color: var(--muted); } .dest-text { color: var(--red); font-weight: 600; } .dest-text.dest-na { color: var(--muted); font-weight: 600; font-style: italic; } .dest-editable-wrap { cursor: pointer; border-bottom: 1px dashed transparent; } .dest-editable-wrap:hover { border-bottom-color: var(--red); } .dest-edit-input { font-size: 12px; font-weight: 600; color: var(--red); background: var(--input-bg); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; min-width: 220px; outline: none; } .dest-edit-container { position: relative; display: inline-block; } .dest-suggest-list { display: none; position: absolute; top: 100%; left: 0; margin-top: 3px; min-width: 260px; max-width: 340px; max-height: 220px; overflow-y: auto; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.45); z-index: 30; } .dest-suggest-list.open { display: block; } .dest-suggest-item { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--border); } .dest-suggest-item:last-child { border-bottom: none; } .dest-suggest-item:hover, .dest-suggest-item.active { background: var(--hover); } .dest-suggest-label { font-size: 12.5px; font-weight: 600; color: var(--text); } .dest-suggest-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); cursor: pointer; transition: background .15s; } .btn:hover { background: #1c2c47; } .btn.primary { background: rgba(56,189,248,.15); border-color: rgba(56,189,248,.4); color: var(--accent); } .btn.primary:hover { background: rgba(56,189,248,.25); } .btn:disabled { opacity: .5; cursor: default; } .btn-icon { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(56,189,248,.4); background: rgba(56,189,248,.15); color: var(--accent); cursor: pointer; transition: background .15s; } .btn-icon:hover { background: rgba(56,189,248,.25); } .btn-icon:disabled { opacity: .5; cursor: default; } .btn-icon svg { width: 14px; height: 14px; display: block; } .assign-loading { font-size: 12px; color: var(--accent); margin-top: 8px; } .assign-error { font-size: 12px; color: var(--red); margin-top: 8px; } #assign-toolbar { padding: 8px 10px 0; display: flex; gap: 8px; } .leaflet-popup-content-wrapper { background: var(--panel-alt); color: var(--text); border-radius: 10px; } .leaflet-popup-tip { background: var(--panel-alt); } .popup-plate { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .popup-row { font-size: 12.5px; color: var(--muted); margin: 2px 0; } #truck-list::-webkit-scrollbar, #assign-list::-webkit-scrollbar { width: 8px; } #truck-list::-webkit-scrollbar-thumb, #assign-list::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; } .empty-msg { text-align: center; color: var(--muted); padding: 30px 10px; font-size: 13px; } .paste-panel { display: none; margin: 8px 0 4px; padding: 10px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; } .paste-panel.open { display: block; } .paste-textarea { width: 100%; min-height: 120px; resize: vertical; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; box-sizing: border-box; } .paste-actions { display: flex; gap: 8px; margin-top: 8px; } .paste-status { font-size: 11.5px; margin-top: 6px; } .paste-status.success { color: var(--green); } .paste-status.error { color: var(--red); } /* ===== Group filter bar (under the tabs) ===== */ #group-bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 0 6px; } .group-chip { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .group-chip:hover { background: var(--hover); color: var(--text); } .group-chip.active { background: rgba(56,189,248,.15); border-color: var(--accent); color: var(--accent); } /* ===== Groups + Settings panels ===== */ .panel-body { overflow-y: auto; flex: 1; padding: 10px; } .group-create { display: flex; gap: 6px; margin: 10px 0; } .group-create input { flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 12.5px; outline: none; } .group-item { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .group-item-top { display: flex; align-items: center; gap: 6px; } .group-item-top input { flex: 1; min-width: 0; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 12.5px; font-weight: 700; outline: none; } .group-count { font-size: 11px; color: var(--muted); white-space: nowrap; } .group-vehicles { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; display: none; } .group-item.open .group-vehicles { display: block; } .group-veh-search { width: 100%; padding: 5px 8px; margin-bottom: 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 12px; outline: none; } .group-veh-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .group-veh-row { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 4px; border-radius: 5px; cursor: pointer; } .group-veh-row:hover { background: var(--hover); } .group-veh-row .plate { font-size: 12px; } .group-veh-row .veh-driver { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .setting-label { font-size: 13px; font-weight: 600; } .setting-row select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 12.5px; outline: none; cursor: pointer; } .setting-actions { display: flex; gap: 6px; } .setting-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; font-style: italic; } .setting-note code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; } /* Draggable route waypoint (Google-Maps-style reroute handle) */ .route-drag-handle { cursor: grab; } .leaflet-interactive.route-line { cursor: grab; }