/* ── Sidebar shell ──────────────────────────────────────────────────────────── */
#sb{width:280px;background:rgba(12,20,35,.97);border-right:1px solid var(--b1);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;backdrop-filter:blur(12px);min-height:0;}
.sb-sect{border-bottom:1px solid var(--b1);flex-shrink:0;}
.sb-hd{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:10px 14px 5px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;}
.sb-hd:hover{color:var(--text2);}
.sb-hd .caret{margin-left:auto;font-size:8px;transition:transform .15s;opacity:.5;}
.sb-hd.closed .caret{transform:rotate(-90deg);}
[id^="sb-"].closed{display:none!important;}
#wp-sect.sb-collapsed{flex:0 0 auto;}

.tag{background:var(--s2);border:1px solid var(--b1);border-radius:20px;padding:1px 8px;font-size:10px;font-weight:600;color:var(--text2);}
.tag.ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.2);color:var(--green);}
.route-controls{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px;}
.tag.warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2);color:var(--yellow);}
.tag.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.2);color:var(--red);}

/* ── Route list ─────────────────────────────────────────────────────────────── */
#rt-list{max-height:160px;overflow-y:auto;padding:3px 0;}
.rt-item{padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;border-left:3px solid transparent;transition:background .1s,border-color .1s;position:relative;}
.rt-item:hover{background:var(--s2);}
.rt-item.active{background:rgba(56,189,248,.06);border-left-color:var(--accent);}
.rt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.rt-info{flex:1;min-width:0;}
.rt-name{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rt-meta{font-size:10px;color:var(--muted);margin-top:1px;}
.rt-actions{display:none;gap:2px;align-items:center;}
.rt-item:hover .rt-actions,.rt-item.active .rt-actions{display:flex;}

.cloud-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2);border-radius:20px;padding:1px 7px;}

/* ── Route details ──────────────────────────────────────────────────────────── */
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);margin:8px 14px;border-radius:var(--r);overflow:hidden;}
.rd-cell{background:var(--s2);padding:7px 10px;}
.rd-cell .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;}
.rd-cell .v{font-size:13px;font-weight:600;color:var(--text);margin-top:1px;}

/* ── ETA calculator ─────────────────────────────────────────────────────────── */
.eta-body{padding:9px 14px 12px;}
.eta-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.eta-row label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;width:58px;flex-shrink:0;}
.eta-row input{flex:1;background:var(--s2);color:var(--text);border:1px solid var(--b1);border-radius:6px;padding:7px 10px;font-size:12px;font-family:inherit;}
.eta-row input:focus{outline:none;border-color:rgba(56,189,248,.4);}
.eta-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px;}
.eta-stat{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:7px 9px;}
.eta-stat .el{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;}
.eta-stat .ev{font-size:14px;font-weight:700;color:var(--text);margin-top:1px;}
.eta-stat.wide{grid-column:span 2;}

/* ── Route planner buttons ──────────────────────────────────────────────────── */
.planner-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:9px 14px;}
.planner-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;height:36px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;cursor:pointer;font-size:12px;color:var(--text2);transition:background .15s;}
.planner-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
.planner-btn:disabled{opacity:.3;pointer-events:none;}

/* ── Waypoints table ────────────────────────────────────────────────────────── */
#wp-sect{flex:1;overflow:hidden;display:flex;flex-direction:column;}
#sb-wp{flex:1;overflow:hidden;display:flex;flex-direction:column;}
#wp-wrap{overflow-y:auto;flex:1;}
table{width:100%;border-collapse:collapse;font-size:11px;}
thead th{background:var(--bg);color:var(--muted);padding:5px 9px;text-align:left;position:sticky;top:0;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:9.5px;border-bottom:1px solid var(--b1);}
tbody tr{border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;}
tbody tr:hover{background:var(--s2);}
tbody tr.sel{background:rgba(56,189,248,.06)!important;}
td{padding:4.5px 9px;color:var(--text2);}
td.wid{color:var(--accent);font-weight:700;font-size:12px;}
td.mn{font-family:'SF Mono','Consolas',monospace;font-size:10px;}
.del-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0 2px;font-size:13px;border-radius:3px;transition:color .1s;}
.del-btn:hover{color:var(--red);}