/* styles.css — Bridle-style, accent ม่วง, mobile-first */
:root{
  --violet:#7c3aed; --violet-d:#6d28d9; --violet-l:#ede9fe;
  --ink:#1e1b2e; --muted:#6b7280; --line:#e9e7ee; --bg:#f6f5fa; --card:#fff;
  --green:#16a34a; --red:#dc2626; --amber:#d97706;
  --r:14px; --sh:0 1px 3px rgba(20,10,40,.07),0 1px 2px rgba(20,10,40,.04);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:'Noto Sans Thai',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
#app{max-width:720px;margin:0 auto;min-height:100%}
a{text-decoration:none;color:inherit;cursor:pointer}
button{font-family:inherit;cursor:pointer}
h3,h4{margin:.4rem 0}
small{color:var(--muted);font-weight:400}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.5rem;
  background:#fff;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.35rem;font-weight:700;color:var(--violet)}
.brand svg{width:22px;height:22px}
.grow{flex:1}
.ic{width:38px;height:38px;border:none;background:#f2f0f7;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.ic svg{width:20px;height:20px}
.be-badge{font-size:11px;padding:.15rem .5rem;border-radius:999px;background:#eef;color:#557;font-weight:600}
.be-badge.supabase{background:#dcfce7;color:#166534}
.subbar{padding:.7rem .9rem .2rem;font-size:1.25rem;font-weight:700}

.wrap{padding:.6rem .9rem 5rem}
.trackview{padding-bottom:1rem}

/* stat cards */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.5rem 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem;box-shadow:var(--sh)}
.sl{font-size:.8rem;color:var(--muted)}
.sv{font-size:1.4rem;font-weight:800;margin-top:.2rem}

/* filters */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}
.inp{padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;outline:none}
.inp:focus{border-color:var(--violet)}
.inp.sm{flex:0 0 auto;padding:.5rem}
.inp.grow{flex:1}
.inp.w{width:64px}
.filters .inp:first-child{flex:1;min-width:140px}

/* list + cards */
.list{display:flex;flex-direction:column;gap:.55rem;margin-top:.3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .85rem;box-shadow:var(--sh)}
.crow{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.meta{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.chip{font-size:.72rem;background:var(--violet-l);color:var(--violet-d);padding:.15rem .5rem;border-radius:999px;white-space:nowrap;font-weight:600}
.warn{color:var(--amber);font-weight:600}
.ok{color:var(--green);font-weight:600}
.empty{text-align:center;color:var(--muted);padding:2rem 1rem;background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}

/* fab */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:15;
  background:var(--violet);color:#fff;border:none;border-radius:999px;padding:.85rem 1.4rem;
  font-weight:700;font-size:1rem;box-shadow:0 6px 20px rgba(124,58,237,.4)}
#app{padding-bottom:0}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.6rem .8rem;font-weight:600;font-size:.92rem;color:var(--ink)}
.btn.primary{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn.danger{color:var(--red)}
.btn.danger.ghost{background:#fff;border-color:#f3d4d4}
.btn.ghost{background:#fff}
.btn.wide{width:100%;display:block;margin:.35rem 0}
.btn.big{padding:1rem;font-size:1.05rem;text-align:center}
.btn.sm{padding:.35rem .6rem;font-size:.82rem}
.btn:disabled{opacity:.5}
.btn svg{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}
/* แถวปุ่มในหน้าวัด: เท่ากันทุกปุ่ม สูงเท่ากัน จัดกึ่งกลาง */
.trow.gap{align-items:stretch}
.trow.gap .btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:48px;white-space:nowrap;padding:.6rem .4rem;font-size:.88rem;line-height:1.2}

/* group head + maps */
.ghead{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .85rem;box-shadow:var(--sh);margin-bottom:.6rem}
.minimap{height:240px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:.4rem}
.bigmap{height:46vh;min-height:280px;position:relative;border-bottom:1px solid var(--line)}
.crosshair{position:absolute;inset:0;display:grid;place-items:center;z-index:500;pointer-events:none;
  font-size:2rem;color:var(--violet);text-shadow:0 0 4px #fff,0 0 8px #fff;font-weight:700}

/* Fullscreen: Leaflet container เต็มจอ */
.bigmap:fullscreen,
.bigmap:-webkit-full-screen { height:100vh!important; width:100vw!important; }
/* overlay bar ต้องยังอยู่ในจอตอน fullscreen */
.bigmap:fullscreen .map-overlay-bar,
.bigmap:-webkit-full-screen .map-overlay-bar { z-index:1000; }
/* ปุ่ม fullscreen ใน Leaflet control bar */
.fullscreen-btn { line-height:1!important; }


/* leaflet pin */
.sm-pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  color:#fff;font-size:.7rem;font-weight:700;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* track panel */
.tpanel{padding:.7rem .9rem 2rem}
.trow{display:flex;align-items:center;gap:.5rem}
.trow.gap{gap:.5rem}
.trow.mt{margin-top:.7rem}
.distbar{display:flex;justify-content:space-between;gap:.5rem;margin:.5rem 0;font-size:.9rem;color:var(--muted)}
.distbar b{color:var(--ink);font-size:1.1rem}
.segset{background:#faf9fd;border:1px solid var(--line);border-radius:12px;padding:.5rem;margin:.4rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.25rem 0}
.chip-b{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .7rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.chip-b.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.chip-b.sf.on{background:var(--c,var(--violet));border-color:var(--c,var(--violet))}
.wlab{margin-left:auto;color:var(--muted);font-size:.85rem}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin:.3rem 0}

/* gps */
.gpsbox{margin:.5rem 0}
.gpsstat{text-align:center;font-size:.9rem;padding:.4rem;border-radius:8px;margin-bottom:.4rem;font-weight:600;background:#f2f0f7;color:var(--muted)}
.gpsstat.good{background:#dcfce7;color:#166534}
.gpsstat.wait{background:#fef9c3;color:#854d0e}
.gpsstat.bad{background:#fee2e2;color:#991b1b}

/* segment list */
.seglist{margin-top:.6rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5rem}
.segrow{display:flex;align-items:center;gap:.4rem;font-size:.84rem;padding:.3rem 0;border-top:1px solid var(--line)}
.segrow .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.segrow .x{margin-left:auto;border:none;background:none;color:var(--muted);font-size:1rem}

/* drawer */
.drawer,.modal{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(20,10,40,.4);opacity:0;transition:.25s}
.drawer.open .scrim,.modal.open .scrim{opacity:1}
.dpanel{position:absolute;top:0;left:0;bottom:0;width:78%;max-width:300px;background:#fff;
  transform:translateX(-100%);transition:.25s;padding:1rem;display:flex;flex-direction:column;gap:.3rem}
.drawer.open .dpanel{transform:none}
.dhead{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;padding:.5rem 0 1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.dhead svg{width:26px;height:26px}
.dpanel a{display:flex;align-items:center;gap:.6rem;padding:.7rem .5rem;border-radius:10px;font-weight:600}
.dpanel a:hover{background:var(--violet-l)}
.dpanel a svg{width:20px;height:20px;color:var(--violet)}
.dnote{margin-top:auto;font-size:.78rem;color:var(--muted);padding:.5rem}

/* modal sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
  padding:1.1rem 1rem 1.4rem;transform:translateY(100%);transition:.25s;max-height:88vh;overflow:auto;
  max-width:720px;margin:0 auto}
.modal.open .sheet{transform:none}
.sheet label{display:block;font-size:.8rem;color:var(--muted);margin:.7rem 0 .3rem;font-weight:600}
.sheet .inp{width:100%}
.mrow{display:flex;gap:.5rem;margin-top:1rem}
.mrow .btn{flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:5rem;transform:translate(-50%,1rem);z-index:99;
  background:#1e1b2e;color:#fff;padding:.6rem .8rem;border-radius:999px;font-size:.88rem;
  opacity:0;transition:.3s;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:90%}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* stepper styling */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;height:38px}
.stepper .inp.w{border:none;text-align:center;width:48px;padding:0;font-weight:700;font-size:1.05rem;height:100%}
.stepper input[type=number]::-webkit-inner-spin-button,
.stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}
.step-btn{border:none;background:#f2f0f7;color:var(--ink);width:36px;height:100%;font-size:1.2rem;font-weight:700;display:grid;place-items:center;transition:background .15s}
.step-btn:active{background:var(--violet-l);color:var(--violet-d)}

@media(min-width:560px){
  .bigmap{height:50vh}
  .minimap{height:350px}
}

/* Floating Map Overlay Controls */
.map-overlay-bar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.obar-left, .obar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}
.map-overlay-btn {
  pointer-events: auto;
  border: 2px solid rgba(0,0,0,0.15);
  background: #fff;
  color: var(--ink);
  height: 48px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  padding: 0 1.2rem;
  transition: all 0.15s ease;
}
.map-overlay-btn:active {
  transform: scale(0.95);
  background: #ede9fe;
}
.map-overlay-btn svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.map-overlay-btn.btn-undo {
  width: 48px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
}
.map-overlay-btn.btn-draw {
  background: var(--violet);
  border-color: var(--violet-d);
  color: #fff;
  width: 48px;
  padding: 0;
  border-radius: 50%;
}
.map-overlay-btn.btn-draw:active {
  background: var(--violet-d);
}
.map-overlay-btn.btn-pin {
  width: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--violet);
  border-color: var(--violet-d);
  color: #fff;
  font-size: 1.35rem;
}
.map-overlay-btn.btn-pin:active {
  background: var(--violet-d);
}
.map-overlay-btn.btn-fs {
  width: 48px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
}
.map-overlay-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Floating GPS badge */
.gps-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(30,27,46,0.85);
  color: #fff;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  pointer-events: none;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.gps-badge.ok {
  background: rgba(22,163,74,0.9);
  border-color: rgba(34,197,94,0.3);
}
.gps-badge.bad {
  background: rgba(220,38,38,0.9);
  border-color: rgba(239,68,68,0.3);
}