/* ========== EXPANDING VERTICAL FAB MENU ========== */
.menu-fab{
  position:fixed; right:24px; bottom:28px; z-index:45;
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  pointer-events:none;
}

.menu-fab-toggle{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
  border:2px solid rgba(255,255,255,0.3);
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  box-shadow:0 8px 24px rgba(151,180,94,0.35), 0 4px 8px rgba(151,180,94,0.2);
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding:0;
  margin:0;
  pointer-events:auto;
}

.menu-fab-toggle:hover{
  transform:scale(1.05);
  box-shadow:0 12px 32px rgba(151,180,94,0.4), 0 6px 12px rgba(151,180,94,0.25);
}

.menu-fab-toggle:active{
  transform:scale(0.95);
}

.menu-fab.expanded .menu-fab-toggle{
  background:linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  color:#FFFFFF;
  transform:rotate(45deg);
  border-color:rgba(255,255,255,0.2);
}

.menu-fab-toggle svg{
  display:block;
  margin:0 auto;
  transform:translateY(-1px);
  transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-fab-items{
  display:flex; flex-direction:column; gap:12px;
  align-items:flex-end;
  opacity:0;
  transform:translateY(20px) scale(0.9);
  pointer-events:none;
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-fab.expanded .menu-fab-items{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:none;
}

.menu-fab-item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  cursor:pointer;
  transition:all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
  pointer-events:none;
}

.menu-fab.expanded .menu-fab-item{
  pointer-events:auto;
}

.menu-fab-item:hover{
  transform:translateX(-4px);
}

.menu-fab-item-label{
  font-family:'Noto Sans Thai',sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink-900);
  background:#FFFFFF;
  padding:10px 20px 10px 16px;
  border-radius:28px 0 0 28px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
  white-space:nowrap;
  opacity:0;
  transform:translateX(20px);
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:1;
  margin-right:-16px;
}

.menu-fab.expanded .menu-fab-item-label{
  opacity:1;
  transform:translateX(0);
}

.menu-fab-item-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
  border:2px solid rgba(255,255,255,0.3);
  border-radius:50%;
  color:#fff;
  box-shadow:0 6px 20px rgba(151,180,94,0.3), 0 3px 8px rgba(151,180,94,0.15);
  transition:all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
  flex-shrink:0;
  z-index:2;
}

.menu-fab-item:hover .menu-fab-item-icon{
  transform:scale(1.05);
  box-shadow:0 8px 24px rgba(151,180,94,0.35), 0 4px 10px rgba(151,180,94,0.2);
}

.menu-fab-item:active .menu-fab-item-icon{
  transform:scale(0.95);
}

.menu-fab-item-icon svg{
  width:26px; height:26px;
  stroke-width:2;
}

.menu-fab-item-icon .badge-count{
  position:absolute;
  top:4px; right:4px;
  background:var(--primary-700); color:#FFFFFF;
  font-size:10px; font-weight:900;
  min-width:18px; height:18px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:0 5px;
  box-shadow:0 2px 6px rgba(39,96,47,0.3);
}

/* ========== PLANNER (แผนงาน) - Premium Design ========== */
.plan-fab{
  position:fixed; right:24px; bottom:28px; z-index:45;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--secondary-400) 0%, var(--secondary-300) 100%);
  color:var(--secondary-900); border:none;
  padding:16px 24px; border-radius:999px; cursor:pointer;
  font-family:'Noto Sans Thai',sans-serif; font-weight:800; font-size:15px;
  box-shadow:0 12px 32px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  transition:all .25s var(--ease);
  border:2px solid rgba(255,255,255,0.3);
}

.plan-fab::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.plan-fab:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.25);
}

.plan-fab:hover::before{ opacity:1; }
.plan-fab:active{ transform:translateY(-1px) scale(1); }

.plan-fab .badge-count{
  background:var(--primary-900); color:#fff; font-size:12px; font-weight:900;
  min-width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 6px; transition:.2s;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.plan-panel{
  position:fixed; left:0; top:0; bottom:0; width:min(460px,100%);
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.2);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.2);
  border-right:1px solid var(--glass-border);
  z-index:50; box-shadow:20px 0 60px rgba(0,0,0,0.25);
  transform:translateX(-100%); transition:transform .35s var(--ease); overflow-y:auto;
  display:flex; flex-direction:column;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

.plan-panel.show{ transform:translateX(0); }

.plan-panel-head{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(165deg, var(--primary-800), var(--primary-700));
  color:#fff; padding:24px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}

.plan-panel-head h2{
  margin:0; font-size:20px; font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.plan-panel-actions{
  display:flex; align-items:center; gap:10px;
}

.plan-edit-toggle{
  flex:none; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.15); cursor:pointer;
  transition:all .2s var(--ease);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  color:#fff;
}

.plan-edit-toggle svg{
  width:20px; height:20px;
  transition:transform .2s var(--ease);
}

.plan-edit-toggle:hover{
  background:rgba(255,255,255,0.25);
  transform:scale(1.08);
}

.plan-edit-toggle.active{
  background:rgba(34,181,97,0.3);
}

.plan-edit-toggle.active:hover{
  background:rgba(34,181,97,0.4);
}

.plan-edit-toggle:active{
  transform:scale(0.95);
}

.plan-clear-btn{
  flex:none; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,59,48,0.2); cursor:pointer;
  transition:all .2s var(--ease);
  display:flex; align-items:center; justify-content:center;
  padding:0;
}

.plan-clear-btn svg{
  width:20px; height:20px;
  stroke:#EF4444;
  transition:transform .2s var(--ease);
}

.plan-clear-btn:hover{
  background:rgba(255,59,48,0.35);
  transform:scale(1.08);
  box-shadow:0 4px 12px rgba(255,59,48,0.3);
}

.plan-clear-btn:hover svg{
  transform:scale(1.1);
  stroke:#DC2626;
}

.plan-clear-btn:active{
  transform:scale(0.95);
}

.plan-panel-body{ padding:20px 20px 100px; flex:1; }

.plan-empty{
  text-align:center; color:var(--ink-500); padding:64px 20px;
  font-size:14.5px; line-height:1.75;
}

.plan-card{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:12px;
  transition:box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  will-change:transform;
}

.plan-card:hover{
  border-color:rgba(34,181,97,0.2);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

.plan-card.dragging-card{
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  border:1.5px solid rgba(34,181,97,0.3);
  position:relative; z-index:10;
  transform:scale(1.02);
  transition:none;
  opacity:0.95;
}

.plan-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
  transition:gap .2s var(--ease);
}

.plan-panel-body:not(.edit-mode) .plan-card-head{
  gap:0;
}

.plan-card-handle{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--ink-300); cursor:grab; touch-action:none;
  transition:all .2s var(--ease);
  margin-right:2px;
  opacity:0;
  pointer-events:none;
  width:0;
  overflow:hidden;
}

.plan-panel-body.edit-mode .plan-card-handle{
  opacity:0.5;
  pointer-events:auto;
  width:20px;
  margin-right:2px;
}

.plan-card-handle:hover{
  color:var(--ink-500);
  opacity:1;
}

.plan-card.dragging-card .plan-card-handle{
  cursor:grabbing; color:var(--primary-600);
  opacity:1;
}

.plan-date-field{ display:flex; align-items:center; gap:4px; flex:1; min-width:0; }

.plan-date-prefix{
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:15px;
  color:var(--ink-900); white-space:nowrap; flex-shrink:0;
}

.plan-date-field .plan-date-title{
  flex:1; min-width:0;
  border:none; border-bottom:1.5px solid transparent;
  background:transparent;
  font-family:'Noto Sans Thai',sans-serif; font-size:15px; font-weight:700;
  color:var(--ink-900);
  padding:2px 2px; outline:none;
  cursor:default;
  color-scheme:light;
  transition:border-color .15s var(--ease);
}

.plan-date-field .plan-date-title:disabled{
  opacity:1;
  -webkit-text-fill-color:var(--ink-900);
}

.plan-panel-body.edit-mode .plan-date-field .plan-date-title{
  border-bottom-color:var(--primary-500);
  cursor:pointer;
  background:transparent;
}

.plan-del-btn{
  flex:none; border:none; background:transparent; color:var(--ink-400);
  cursor:pointer; font-size:16px;
  width:28px; height:28px; border-radius:50%;
  transition:all .2s var(--ease);
  opacity:0;
  pointer-events:none;
  width:0;
  overflow:hidden;
}

.plan-panel-body.edit-mode .plan-del-btn{
  opacity:1;
  pointer-events:auto;
  width:28px;
}

.plan-del-btn:hover{
  background:#FFEBEE; color:#EF4444;
  transform:rotate(90deg);
}

.plan-station-list{ display:flex; flex-direction:column; gap:3px; margin-bottom:4px; }

.plan-station-empty{
  font-size:12px; color:var(--ink-500); padding:8px 4px;
  text-align:center; font-style:italic;
}

.plan-station-item{
  display:flex; align-items:center; gap:8px;
  background:#FAFAFA;
  border-radius:8px;
  padding:8px 10px;
  touch-action:pan-y;
  transition:all .2s var(--ease);
  border:1px solid rgba(0,0,0,0.05);
  will-change:transform;
}

.plan-panel-body:not(.edit-mode) .plan-station-item{
  gap:0;
  padding:8px 10px 8px 10px;
}

.plan-station-item:hover{
  background:#FFFFFF;
  border-color:rgba(0,0,0,0.1);
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  transform:translateX(2px);
}

.plan-station-item.dragging{
  background:#FFFFFF;
  box-shadow:0 6px 20px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);
  border:1.5px solid rgba(34,181,97,0.25);
  position:relative; z-index:5;
  transform:scale(1.02);
  transition:none;
  opacity:0.95;
}

.plan-station-handle{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; color:var(--ink-300); cursor:grab; touch-action:none;
  transition:all .2s var(--ease);
  opacity:0;
  pointer-events:none;
  width:0;
  overflow:hidden;
}

.plan-panel-body.edit-mode .plan-station-handle{
  opacity:0.4;
  pointer-events:auto;
  width:18px;
}

.plan-station-handle:hover{
  color:var(--ink-500);
  opacity:1;
}

.plan-station-item.dragging .plan-station-handle{
  cursor:grabbing; color:var(--primary-600);
  opacity:1;
}

.plan-station-item .name{
  flex:1; font-size:13px; color:var(--ink-900); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; font-weight:600;
  transition:color .15s var(--ease);
}
}

.plan-station-item .name:hover{
  text-decoration:underline; color:var(--primary-600);
}

.plan-station-del{
  flex:none; border:none; background:transparent; color:var(--ink-400);
  cursor:pointer; font-size:13px;
  width:22px; height:22px; border-radius:50%;
  transition:all .2s var(--ease);
  opacity:0;
  pointer-events:none;
  width:0;
  overflow:hidden;
}

.plan-panel-body.edit-mode .plan-station-del{
  opacity:1;
  pointer-events:auto;
  width:22px;
}

.plan-station-del:hover{
  background:#FFEBEE; color:#EF4444;
  transform:scale(1.1);
}

.plan-distance-indicator{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  padding:2px 12px 2px 12px;
  font-size:11px;
  font-weight:600;
  color:var(--primary-600);
  margin:0;
}

.plan-distance-indicator svg{
  flex:none;
  width:13px;
  height:13px;
  opacity:0.5;
  color:var(--primary-600);
}

.plan-distance-indicator .distance{
  font-variant-numeric:tabular-nums;
  font-weight:700;
}

.plan-distance-indicator .separator{
  opacity:0.3;
  color:var(--ink-400);
  margin:0 2px;
}

.plan-distance-indicator .time{
  color:var(--ink-500);
  font-weight:600;
}

.plan-add-station-btn{
  width:100%; margin-top:8px;
  border:1.5px dashed rgba(0,0,0,0.15); background:transparent; color:var(--primary-600);
  font-family:'Noto Sans Thai',sans-serif; font-weight:600; font-size:13px;
  padding:10px; border-radius:8px; cursor:pointer;
  transition:all .15s var(--ease);
}

.plan-add-station-btn:hover{
  border-color:var(--primary-500);
  background:#FAFAFA;
  border-style:solid;
  transform:translateY(-1px);
}

.plan-add-new-wrap{
  position:sticky; bottom:0; padding:18px 20px;
  background:linear-gradient(0deg, var(--neutral-50) 70%, rgba(245,247,248,0));
}

.plan-add-new{
  width:100%; border:none;
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color:#fff; font-family:'Noto Sans Thai',sans-serif;
  font-weight:800; font-size:15.5px; padding:16px;
  border-radius:var(--radius-md); cursor:pointer;
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
  transition:all .25s var(--ease);
  position:relative;
  overflow:hidden;
}

.plan-add-new::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.plan-add-new:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.3);
}

.plan-add-new:hover::before{ opacity:1; }
.plan-add-new:active{ transform:translateY(0); }