*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#222;
  overflow:hidden;
}

/* ============ Map ============ */
#map{
  position:absolute;
  top:48px;left:0;right:340px;bottom:220px;
  z-index:1;
}

/* ============ Chart panel (under map) ============ */
#chartPanel{
  position:absolute;
  left:0;right:340px;bottom:0;height:220px;
  background:#1e1e1e;
  border-top:1px solid #444;
  z-index:2;
  display:flex;flex-direction:column;
}
#chartHeader{
  height:22px;flex:0 0 auto;
  padding:0 12px;
  display:flex;align-items:center;gap:14px;
  background:#2a2a2a;color:#bbb;
  font:11px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.3px;
}
#chartToggles{display:flex;gap:10px;align-items:center}
#chartToggles label{
  display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;user-select:none;color:#ddd;
}
#chartToggles input{margin:0;cursor:pointer}
#chartToggles .sw{
  display:inline-block;width:10px;height:10px;border-radius:2px;
}
#imuChart{
  flex:1 1 auto;
  width:100%;height:100%;
  display:block;
}

/* ============ Top bar ============ */
#topbar{
  position:absolute;
  top:0;left:0;right:0;height:48px;
  background:#1e2733;color:#fff;
  display:flex;align-items:center;
  padding:0 12px;gap:12px;
  z-index:2000;              /* always above sidebar/backdrop */
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
#topbar .brand{font-weight:600;font-size:14px}
#deviceSelect{
  flex:0 0 auto;min-width:140px;max-width:240px;
  padding:6px 10px;border-radius:4px;border:1px solid #555;
  background:#2a3441;color:#fff;font-size:13px;
}
#viewToggle{
  display:flex;border:1px solid #555;border-radius:4px;overflow:hidden;
  margin-left:auto;
}
#viewToggle button{
  background:transparent;color:#bbb;border:0;
  padding:6px 14px;cursor:pointer;font-size:12px;
  border-right:1px solid #555;
}
#viewToggle button:last-child{border-right:0}
#viewToggle button.active{background:#3498db;color:#fff}
#viewToggle button:hover:not(.active){background:#2a3441;color:#fff}

/* ============ Sidebar (desktop) ============ */
#sidebar{
  position:absolute;
  top:48px;right:0;bottom:0;width:340px;
  background:#f5f5f7;
  border-left:1px solid #ddd;
  display:flex;flex-direction:column;
  z-index:500;
}
#sheetGrip{display:none}

/* ===== Tabs ===== */
#tabs{
  display:flex;
  background:#eaeaee;
  border-bottom:1px solid #ccc;
  flex:0 0 auto;
}
#tabs .tab{
  flex:1 1 auto;
  padding:10px 4px;
  border:0;background:transparent;cursor:pointer;
  font-size:11px;color:#666;
  border-bottom:2px solid transparent;
  transition:background .15s, color .15s, border .15s;
  text-align:center;
  white-space:nowrap;
}
#tabs .tab:hover{background:#dde}
#tabs .tab.active{
  color:#1e2733;font-weight:600;
  border-bottom-color:#3498db;
  background:#f5f5f7;
}
#tabs .tab.hidden{display:none}
#tabBody{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:120px;
}
.tabpane{display:none}
.tabpane.active{display:block}

.panel{
  padding:10px 14px;
  border-bottom:1px solid #ddd;
  flex:0 0 auto;
}
.panel h3{
  margin:0 0 8px;
  font-size:11px;font-weight:700;
  color:#666;letter-spacing:.5px;
  text-transform:uppercase;
}
.panel.hidden{display:none}

.row{
  display:flex;justify-content:space-between;
  padding:3px 0;
  font:12px/1.4 ui-monospace,Menlo,monospace;
}
.row b{color:#000}

.unit-toggle{
  background:#eaeaee;border:1px solid #ccc;
  font-size:10px;padding:1px 6px;
  border-radius:3px;cursor:pointer;
  color:#555;font-weight:500;
  margin-left:2px;
}
.unit-toggle:hover{background:#dde;color:#000}
.unit-toggle:active{background:#3498db;color:#fff}

.bignum{
  display:flex;align-items:baseline;gap:6px;
  padding:6px 0 2px;
}
.bignum b{
  font:700 32px/1 ui-monospace,Menlo,monospace;
  color:#1e2733;
}
.bignum .unit{color:#888;font-size:12px;font-weight:600;letter-spacing:.5px}

.bar{
  height:6px;background:#e0e0e0;
  border-radius:3px;overflow:hidden;
  margin-top:6px;
}
.bar>div{
  height:100%;width:0;
  background:#27ae60;
  transition:width .3s;
}
.bar.warn>div{background:#f39c12}
.bar.danger>div{background:#e74c3c}

.badge{
  display:inline-block;
  padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:600;letter-spacing:.3px;
}
.b-ok{background:#27ae60;color:#fff}
.b-warn{background:#f39c12;color:#fff}
.b-bad{background:#e74c3c;color:#fff}
.b-gray{background:#bbb;color:#fff}

.btn{
  padding:6px 12px;cursor:pointer;
  border:1px solid #ccc;background:#fff;
  border-radius:4px;font-size:12px;
  margin-top:6px;
}
.btn:hover{background:#eee}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.btnrow .btn{margin-top:0}
.danger-btn{background:#fee;border-color:#e74c3c;color:#c0392b}
.danger-btn:hover{background:#fdd}

/* Control tab: uniform 2-column grid for AT-button groups */
.ctrl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:6px;
}
.ctrl-grid .btn{
  margin:0;
  padding:9px 8px;
  font-size:12px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.ctrl-row{display:flex;gap:6px;margin-top:6px;align-items:center}
.ctrl-row .text-input{flex:1 1 auto;margin:0}
.ctrl-row .btn{margin:0;flex:0 0 auto}

/* Topbar 管理 button */
#manageDevicesBtn{
  background:#2a3441;color:#fff;border:1px solid #555;
  padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;
}
#manageDevicesBtn:hover{background:#3a4a5e}
#manageDevicesBtn.hidden{display:none}

/* Modal overlay */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.modal.hidden{display:none}
.modal-card{
  background:#fff;border-radius:8px;
  max-width:720px;width:100%;max-height:85vh;
  display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  overflow:hidden;
}
.modal-head{
  padding:12px 16px;
  background:#1e2733;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h3{margin:0;font-size:14px;font-weight:600;letter-spacing:.3px;color:#fff;text-transform:none}
.modal-close{
  background:transparent;border:0;color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
  padding:0 6px;
}
.modal-close:hover{color:#e74c3c}
.modal-body{
  padding:14px 16px;overflow-y:auto;
}
.text-input{
  width:100%;padding:6px 8px;
  border:1px solid #ccc;border-radius:4px;
  font:12px ui-monospace,Menlo,monospace;
}

input[type=file]{font-size:11px;width:100%}

.status{margin-top:6px;font-size:11px;color:#666;min-height:1em}

/* ============ Devices table ============ */
.devtbl{
  width:100%;border-collapse:collapse;font-size:11px;
  margin-top:4px;
}
.devtbl th{
  text-align:left;padding:4px 6px;
  background:#eaeaee;color:#555;
  border-bottom:1px solid #ccc;
  font-weight:600;
}
.devtbl td{
  padding:4px 6px;vertical-align:middle;
  border-bottom:1px solid #ddd;
  background:#fff;
}
.devtbl code{font:11px ui-monospace,Menlo,monospace}
.devtbl .devname{padding:3px 6px;font-size:11px;width:100%;min-width:90px}
.devtbl .devactions{white-space:nowrap}
.devtbl .devactions button{
  padding:2px 6px;font-size:13px;
  border:1px solid #ccc;background:#fff;
  border-radius:3px;cursor:pointer;
  margin:0 1px;
}
.devtbl .devactions button:hover:not(:disabled){background:#eee}
.devtbl .devactions button:disabled{opacity:.4;cursor:not-allowed}
.devtbl .devactions button.danger-btn{background:#fee;border-color:#e74c3c}

/* ============ Firmware list ============ */
.fwfile{
  padding:6px 8px;background:#fff;
  border:1px solid #ddd;border-radius:4px;
  margin-top:6px;font-size:11px;
}
.fwfile .name{font-weight:600;margin-bottom:4px}
.fwfile .actions{display:flex;flex-wrap:wrap;gap:4px}
.fwfile button{padding:3px 8px;font-size:11px}

/* ============ Device list (overview mode) ============ */
.devrow{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;background:#fff;
  border:1px solid #ddd;border-radius:4px;
  margin-top:4px;cursor:pointer;
  font-size:12px;
}
.devrow:hover{background:#eef}
.devrow.active{background:#dfe9f5;border-color:#3498db}
.devrow .dot{width:10px;height:10px;border-radius:50%}
.devrow .name{flex:1 1 auto;font-weight:600;font-family:ui-monospace,Menlo,monospace}
.devrow .meta{color:#666;font-size:11px}

/* ============ Logs (collapsible + resizable) ============ */
#logsPanel{
  flex:0 0 auto;
  display:flex;flex-direction:column;
  border-top:1px solid #ccc;
  height:200px;
  position:relative;
  background:#1e1e1e;
  transition:height .15s ease;
}
#logsPanel.closed{height:32px !important}   /* override inline height set by drag */
#logsResize{
  height:5px;
  background:#bbb;
  cursor:ns-resize;
  flex:0 0 auto;
  transition:background .15s;
}
#logsResize:hover,#logsResize.dragging{background:#3498db}
#logsPanel.closed #logsResize{display:none}
#logsHeader{
  height:27px;
  padding:0 12px;
  display:flex;align-items:center;gap:8px;
  background:#2a2a2a;color:#bbb;
  font-size:11px;font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  flex:0 0 auto;
  user-select:none;
}
#logsHeader:hover{background:#333;color:#fff}
#logsToggle{
  display:inline-block;
  transition:transform .15s;
  font-size:10px;
}
#logsPanel.closed #logsToggle{transform:rotate(180deg)}
#logsHint{
  margin-left:auto;color:#888;font-weight:400;font-size:10px;
}
#logsPanel.closed #logsHint::before{content:'點擊展開';display:inline}
#logsPanel:not(.closed) #logsHint::before{content:'點擊收合 / 拖拉灰線調高度';display:inline}
#logsHint{display:inline}
#logsHint::before{display:inline}
#logsPanel #logsHint{font-size:10px}
#logsPanel.closed #logs{display:none}
#logs{
  flex:1 1 auto;
  margin:0;padding:8px 12px;
  background:#1e1e1e;color:#0f0;
  font:11px/1.4 ui-monospace,Menlo,monospace;
  white-space:pre;overflow-y:auto;
}

/* ============ Mobile menu button + backdrop (desktop hidden) ============ */
#mobileMenuBtn{display:none}
#mobileBackdrop{display:none}

/* ============ Mobile (<768px) ============ */
@media (max-width:767px){
  /* Map fills screen above chart; bottom reserved for sidebar peek + chart */
  #map{right:0;bottom:172px}         /* 120 chart + 52 peek */
  #chartPanel{right:0;height:120px;bottom:52px}  /* sits above the sidebar peek */
  #chartHeader{height:20px;font-size:10px;padding:0 8px}

  /* Topbar: compact, only essentials */
  #topbar{padding:0 6px;gap:6px}
  #topbar .brand{display:none}
  #deviceSelect{flex:1 1 auto;min-width:0;max-width:none}
  #viewToggle{margin-left:0;flex:0 0 auto}
  #viewToggle button{padding:6px 8px;font-size:11px}

  /* Hamburger menu button — opens the drawer */
  #mobileMenuBtn{
    display:block;
    background:#2a3441;border:1px solid #555;color:#fff;
    width:36px;height:32px;
    border-radius:4px;cursor:pointer;
    font-size:20px;line-height:1;
    flex:0 0 auto;
  }
  #mobileMenuBtn:hover{background:#3a4a5e}

  /* Sidebar: peek 52px from bottom (grip+tabs visible), tap to fully open */
  #sidebar{
    top:auto;left:0;right:0;bottom:0;
    width:100%;height:80vh;max-height:80vh;
    border-left:0;border-top:1px solid #ccc;
    border-radius:14px 14px 0 0;
    box-shadow:0 -3px 12px rgba(0,0,0,.2);
    transform:translateY(calc(100% - 52px));
    transition:transform .3s ease;
    z-index:600;            /* above map, below topbar (z-index:2000) */
  }
  #sidebar.open{transform:translateY(0)}

  /* Grab handle — visible indicator + large touch target */
  #sheetGrip{
    display:block;
    height:20px;           /* large tap zone */
    padding:8px 0 0;
    flex:0 0 auto;
    cursor:pointer;
    background:transparent;
  }
  #sheetGrip::after{
    content:'';
    display:block;
    width:40px;height:4px;
    background:#bbb;border-radius:2px;
    margin:0 auto;
  }

  /* Backdrop: dim background while drawer open; tap to close */
  #mobileBackdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    z-index:1400;
  }
  #mobileBackdrop.show{display:block}

  #tabs .tab{font-size:10px;padding:8px 2px}
  #sheetHandle{display:none !important}

  /* Device management modal: tighter on mobile */
  .modal{padding:12px}
  .modal-card{max-height:90vh}
}

/* ============ Boat marker (rotating arrow) ============ */
.boat-divicon { background:transparent !important; border:0 !important }
.boat-marker {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--c);
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.boat-marker .boat-arrow {
  position:absolute;
  top:-9px; left:50%;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid var(--c);
  margin-left:-6px;
  transform-origin:6px 23px;       /* rotate around marker center */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
  transition:transform .15s ease-out;
}
.boat-marker.stationary .boat-arrow { display:none }
.boat-marker .boat-label {
  color:#fff; font-weight:700; font-size:11px;
  pointer-events:none;
}

/* ============ Leaflet popup tweaks ============ */
.leaflet-popup-content{
  font:12px/1.4 ui-monospace,Menlo,monospace;
  margin:8px 12px;
}
.leaflet-popup-content .pop-id{
  font-weight:700;font-size:13px;margin-bottom:4px;
}
.leaflet-popup-content button{
  padding:3px 8px;font-size:11px;
  margin-top:4px;margin-right:4px;
  cursor:pointer;border:1px solid #ccc;background:#fff;
  border-radius:3px;
}
.leaflet-popup-content button:hover{background:#eee}