/* ============================================================================
   Vagrus World Map — styles
   Dark parchment-like theme. Layout: a full-screen canvas with a floating
   control panel (left), a hover tooltip, and a modal note editor.
   ============================================================================ */

/* ---- Base layout ---------------------------------------------------------- */
html, body {
  margin: 0;
  height: 100%;
  background: #14100c;
  color: #e8dcc8;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
#wrap { position: relative; width: 100vw; height: 100vh; }
canvas { display: block; cursor: crosshair; }
canvas.drag { cursor: grabbing; }

/* ---- Control panel (collapsible drawer, top-left) ------------------------- */
#panel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 250px;
  padding: 12px 14px;
  background: rgba(26, 20, 14, .94);
  border: 1px solid #3a2e22;
  border-radius: 10px;
  overflow: visible;
  transition: transform .25s ease;
}
#panelBody { max-height: 82vh; overflow: auto; margin-right: -4px; padding-right: 4px; }
#panel h1 { margin: 0 0 6px; font-size: 17px; color: #f0c060; letter-spacing: .5px; }
#panel .sub { color: #a08a6e; font-size: 11px; margin-bottom: 8px; }

/* Collapse/expand tab on the panel's right edge. */
#panelToggle {
  position: absolute;
  top: 10px;
  right: -28px;
  width: 26px;
  height: 40px;
  background: rgba(26, 20, 14, .94);
  border: 1px solid #3a2e22;
  border-left: none;
  border-radius: 0 9px 9px 0;
  color: #f0c060;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#panelToggle:hover { background: #332619; }
#panel.collapsed { transform: translateX(calc(-100% - 14px)); }

/* Background-alignment controls: only shown in debug mode. */
#calib[hidden] { display: none; }

/* ---- Panel widgets -------------------------------------------------------- */
.leg { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 3px 0; color: #c9b895; }
.dot { border-radius: 50%; flex: none; }
label.ck { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a08a6e; margin-top: 6px; cursor: pointer; }
hr { border: none; border-top: 1px solid #3a2e22; margin: 10px 0; }
.h2 { color: #f0c060; font-size: 13px; font-weight: bold; margin-bottom: 6px; }
.fld { color: #a08a6e; font-size: 11px; display: block; margin: 6px 0 2px; }
input[type=number], input[type=search] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #1e1812;
  color: #e8dcc8;
  border: 1px solid #3a2e22;
  border-radius: 6px;
  font-size: 13px;
}
.rowin { display: flex; gap: 8px; }
.rowin > div { flex: 1; }

button.act {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: #e0a030;
  color: #1a140e;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}
button.act:hover { background: #f0c060; }
button.ghost {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  background: transparent;
  color: #a08a6e;
  border: 1px solid #3a2e22;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
/* Small inline buttons (fine-tune arrows) override the full-width button style. */
.fx { width: auto !important; flex: 1; min-width: 42px; padding: 5px 4px; margin-top: 0 !important; }
#bgCalVals { white-space: pre; }

/* ---- Route panel ---------------------------------------------------------- */
#trip { font-size: 12px; color: #c9b895; margin-top: 8px; line-height: 1.5; }
#trip b { color: #f0c060; }
.big { font-size: 22px; color: #f0c060; font-weight: bold; }
.step { color: #a08a6e; font-size: 11px; }

/* ---- Search autocomplete -------------------------------------------------- */
#sug {
  max-height: 240px;
  overflow: auto;
  margin-top: 4px;
  border: 1px solid #3a2e22;
  border-radius: 6px;
  display: none;
  background: #1a140e;
}
#sug div { padding: 4px 8px; font-size: 12px; cursor: pointer; color: #c9b895; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#sug div:hover, #sug div.sel { background: #2a2016; color: #f0c060; }
#sug .cat { color: #8f7a5a; font-size: 10px; flex: none; }

/* ---- Notes list ----------------------------------------------------------- */
.noterow { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #c9b895; margin: 4px 0; align-items: flex-start; }
.notego { cursor: pointer; flex: 1; line-height: 1.35; }
.notego:hover { color: #f0c060; }
.notego b { color: #f0c060; }
.notedel { cursor: pointer; color: #a0705a; flex: none; }
.notedel:hover { color: #ff6b6b; }

/* ---- Hover tooltip -------------------------------------------------------- */
#tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: none;
  padding: 4px 8px;
  background: rgba(20, 16, 12, .96);
  border: 1px solid #e0a030;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
#tip b { color: #f0c060; }
#tip .note { color: #ffcf3a; display: block; margin-top: 2px; max-width: 240px; white-space: normal; }

/* ---- Save indicator (flashes on every successful save to file) ------------ */
#saveFlash {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 30;
  padding: 5px 12px;
  background: rgba(20, 32, 18, .95);
  border: 1px solid #4a7a3a;
  border-radius: 6px;
  color: #9be08f;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#saveFlash.show { opacity: 1; }
#saveFlash.warn { background: rgba(40, 26, 14, .95); border-color: #a06a30; color: #f0b050; }

/* ---- Bottom hint & links -------------------------------------------------- */
#hint { position: absolute; bottom: 8px; left: 12px; color: #6b5a45; font-size: 11px; }
a.link { color: #5a90c8; cursor: pointer; }

/* ---- Note editor (modal) ----------------------------------------- */
#gp {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, .72);
}
#gpbox {
  width: 560px;
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
  padding: 14px 16px;
  background: #1a140e;
  border: 1px solid #3a2e22;
  border-radius: 10px;
}
#gpbox h2 { margin: 0 0 2px; color: #f0c060; font-size: 16px; }
#gpnotewrap { margin-top: 10px; }
#gpnotewrap label { display: block; color: #f0c060; font-size: 12px; margin-bottom: 3px; }
#gpNote {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #221a12;
  border: 1px solid #3a2e22;
  border-radius: 7px;
  color: #e8dcc4;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}
#gpNote:focus { outline: none; border-color: #f0c060; }
#gpbtns { display: flex; gap: 8px; margin-top: 10px; }
#gpbtns button { flex: 1; }