/* style.css — ธีมขาว-ฟ้า กรมเจ้าท่า */

:root {
  --blue: #0b5ea8;
  --blue-d: #084a86;
  --blue-l: #eaf4ff;
  --ink: #103a5c;
  --ink-s: #5c7d99;
  --line: #d7e5f2;
  --bg: #f4f8fc;
  --white: #fff;
  --warn: #b0740f;
  --warn-bg: #fdf3e2;
  --err: #b3261e;
  --err-bg: #fdeceb;
}

* { box-sizing: border-box; }

/* ต้องมาก่อนทุกกฎที่ตั้ง display — ไม่งั้น display:grid/flex ข้างล่างจะไปทับ
   display:none ที่ attribute hidden ให้มา แล้วสั่งซ่อนจะไม่ซ่อนจริง */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- หน้าโยนไฟล์ ---------- */
#drop {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #dceaf8 0%, transparent 60%),
    var(--bg);
  overflow-y: auto;
}
.drop-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(16, 58, 92, .08);
  padding: 34px 32px 26px;
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.drop-logo { width: 74px; height: auto; }
.drop-card h1 { font-size: 25px; margin: 12px 0 2px; color: var(--blue); }
.sub { margin: 0 0 22px; color: var(--ink-s); font-size: 14px; }

#dz {
  border: 2px dashed #a9cbe8;
  border-radius: 12px;
  background: #f8fbfe;
  color: var(--blue);
  padding: 34px 20px;
  transition: background .15s, border-color .15s, transform .15s;
}
#dz:hover, #dz:focus-visible { background: var(--blue-l); border-color: var(--blue); }
#dz.over { background: var(--blue-l); border-color: var(--blue); transform: scale(1.015); }
.dz-main { font-size: 16px; margin-top: 8px; }
.dz-main b { color: var(--blue-d); }
.dz-sub { font-size: 13px; color: var(--ink-s); margin-top: 3px; }

.hint { font-size: 12px; color: var(--ink-s); line-height: 1.6; margin: 14px 0 0; }
.err {
  margin: 14px 0 0; padding: 11px 13px; text-align: left;
  background: var(--err-bg); border-left: 4px solid var(--err);
  border-radius: 0 6px 6px 0; color: var(--err); font-size: 13px; line-height: 1.6;
}

/* ---------- หน้าดูพื้นผิว ---------- */
#app { height: 100%; display: flex; }
#panel {
  width: 320px; flex: 0 0 320px;
  background: var(--white);
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 10px rgba(16, 58, 92, .05);
  padding: 14px 16px 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 54px; height: auto; }
.brand-t { font-size: 21px; font-weight: 700; color: var(--blue); line-height: 1.25; }
.brand-s { font-size: 13px; color: var(--ink-s); }

.meta {
  font-size: 12px; color: var(--ink-s); line-height: 1.65;
  background: #f7fbff; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}
.meta b { color: var(--ink); font-weight: 600; }
.meta .warn { color: var(--warn); }

.row { display: flex; flex-direction: column; gap: 7px; }
.lab { font-size: 13px; font-weight: 600; }
select {
  width: 100%; padding: 6px 8px; font-size: 13px;
  border: 1px solid #c3d8ea; border-radius: 6px; background: var(--white); color: var(--ink);
}
button.primary, button.ghost {
  width: 100%; padding: 8px 10px; font-size: 13px; border-radius: 6px;
  border: 1px solid var(--blue); background: var(--blue); color: #fff; font-weight: 600;
}
button.primary:hover { background: var(--blue-d); }
button.primary.on { background: #0d7a3e; border-color: #0d7a3e; }
button.ghost { background: var(--white); color: var(--blue); font-weight: 500; }
button.ghost:hover { background: var(--blue-l); }
button:disabled { opacity: .5; cursor: not-allowed; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 6px 4px; font-size: 12.5px;
  border: 1px solid #c3d8ea; border-radius: 6px; background: var(--white); color: var(--ink);
}
.seg button:hover { background: var(--blue-l); }
.seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.sld { display: flex; align-items: center; gap: 7px; }
.sld span { font-size: 12px; width: 32px; color: var(--ink-s); }
.sld input[type=range] { flex: 1; accent-color: var(--blue); min-width: 0; }
.sld output {
  font-size: 12px; width: 58px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.chk input { accent-color: var(--blue); }

.foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.attrib { font-size: 10.5px; color: #93aec5; line-height: 1.5; }

#plotwrap { flex: 1; min-width: 0; position: relative; }
#plot { width: 100%; height: 100%; }

/* เข็มทิศมุมขวาบนของพื้นที่ 3D — เข็มแดงชี้ทิศเหนือจริงตามมุมกล้อง */
#compass {
  position: absolute; top: 12px; right: 14px; width: 50px; height: 50px; z-index: 5;
  background: rgba(255, 255, 255, .85); border-radius: 50%;
  box-shadow: 0 1px 6px rgba(16, 58, 92, .25); pointer-events: none;
}
#compass svg { width: 100%; height: 100%; display: block; }
.cmp-ring { fill: none; stroke: #c3d8ea; stroke-width: 2; }
.cmp-n { fill: #d23b3b; }
.cmp-s { fill: #9db6cb; }
.cmp-lbl { fill: #fff; font: 700 11px "Segoe UI", sans-serif; text-anchor: middle; }
#cmpRose { transition: transform .12s linear; }
@media (prefers-reduced-motion: reduce) { #cmpRose { transition: none; } }

/* ---------- แผนที่ 2D ---------- */
#mapview { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
#map { position: absolute; inset: 0; }
.mapbtn {
  position: absolute; top: 12px; right: 12px; z-index: 1000;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--blue); border-radius: 6px;
  background: var(--white); color: var(--blue);
  box-shadow: 0 2px 8px rgba(16, 58, 92, .2);
}
.mapbtn:hover { background: var(--blue-l); }

/* ---------- สถานะกำลังทำงาน ---------- */
#busy {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(244, 248, 252, .82);
  display: grid; place-items: center;
}
.busy-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16, 58, 92, .14);
  padding: 22px 26px; min-width: 260px; text-align: center;
  font-size: 13.5px; color: var(--ink);
}
.spin {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.bar {
  margin-top: 12px; height: 4px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .15s; }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  #dz, .bar i { transition: none; }
}

/* ---------- จอแคบ ---------- */
@media (max-width: 780px) {
  #app { flex-direction: column; }
  #panel {
    width: 100%; flex: 0 0 auto; max-height: 46%;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  #plotwrap { flex: 1; }
}