/* DPV Dive Planner - light, flat, pastel. No gradients. */

:root {
  --bg:        #f7f8fa;
  --panel:     #ffffff;
  --ink:       #26303a;
  --ink-soft:  #66727e;
  --line:      #dfe4ea;
  --line-firm: #c2cbd4;
  --accent:    #7fb3d5;   /* pastel blue */
  --accent-dk: #4a86ad;
  --accent-bg: #eaf2f8;
  --mint:      #a8d5ba;
  --sand:      #f2d7a8;
  --rose:      #edaeae;
  --lilac:     #c3b8de;
  --shallow:   #cfe6f2;
  --deep:      #6f9fc0;
  --right-w:   560px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: .2px; white-space: nowrap; }
h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
     color: var(--ink-soft); margin: 0 0 8px; }
h3 { font-size: 13px; font-weight: 600; margin: 14px 0 8px; }

/* ---------- layout ---------- */

.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar-actions { display: flex; gap: 8px; }
.topbar-status { margin-left: auto; color: var(--ink-soft); font-size: 12px; text-align: right; }

.layout {
  display: grid;
  grid-template-columns: 260px 1fr var(--right-w);
  height: calc(100% - 48px);
}

.panel { background: var(--panel); overflow-y: auto; padding: 14px; }
.panel-left  { border-right: 1px solid var(--line); }
.panel-right { border-left: 1px solid var(--line); }
.block { margin-bottom: 22px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.block-head h2 { margin: 0; }

.map-wrap { position: relative; }
#map { position: absolute; inset: 0; background: var(--bg); }

/* View tabs - only used on narrow screens */
.viewtabs { display: none; gap: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.viewtabs button {
  font: inherit; font-size: 13px; padding: 7px 14px;
  border: none; border-right: 1px solid var(--line);
  background: var(--panel); color: var(--ink-soft); cursor: pointer;
}
.viewtabs button:last-child { border-right: none; }
.viewtabs button.active { background: var(--accent); color: #fff; }

/* ---------- controls ---------- */

.btn {
  font: inherit; font-size: 13px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: #f0f3f6; }
.btn-sm { font-size: 12px; padding: 4px 8px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn-danger { color: #a15252; border-color: #e3c4c4; }
.btn-danger:hover { background: #fbf1f1; }
.btn.active { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.field { display: block; margin-bottom: 10px; }
.field > span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.field input, .field select, select, input[type="text"], input[type="number"] {
  font: inherit; width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink);
}
.hint { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin: 8px 0 0; }

/* speed slider */
.slider-field > span { font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.slider-field output { font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"] {
  width: 100%; margin: 0; padding: 0;
  accent-color: var(--accent-dk);
  height: 22px; background: transparent;
}

.toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; font-size: 13px; }
.toggle input { width: 16px; height: 16px; accent-color: var(--accent-dk); margin: 0; }

.wkt-out {
  width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px;
  background: #fbfcfd; color: var(--ink); resize: vertical; margin-top: 8px;
}

/* ---------- route list ---------- */

.route-list { list-style: none; margin: 0; padding: 0; }
.route-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.route-list li:hover { background: #f0f3f6; }
.route-list li.selected { background: var(--accent-bg); border-color: var(--accent); }
.vis-toggle {
  width: 15px; height: 15px; flex: none; margin: 0;
  accent-color: var(--accent-dk); cursor: pointer;
}
.route-list li.hidden-route .rname,
.route-list li.hidden-route .rmeta { color: var(--ink-soft); opacity: .55; }
.route-list li.hidden-route .swatch { opacity: .3; }

.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.route-list .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-list .rmeta { font-size: 11px; color: var(--ink-soft); flex: none; }

/* ---------- segments table ---------- */
/* Deliberately larger than a normal data table: this is the thing you read
   through a mask at depth, and the thing that gets printed and laminated. */

.table-scroll { overflow-x: auto; }

.seg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.seg-table th, .seg-table td {
  padding: 8px 7px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.seg-table th {
  color: var(--ink-soft); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--line-firm);
  /* headers carry the units, so let them wrap rather than force every column
     as wide as its label - the numbers below stay on one line */
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.25;
}
.seg-table td { font-variant-numeric: tabular-nums; }
.seg-table td.c-num { font-weight: 600; text-align: left; color: var(--ink-soft); width: 1%; }
.seg-table td.c-hdg { font-size: 18px; font-weight: 600; }
.seg-table td.c-time { font-weight: 600; }
.seg-table th:nth-child(2), .seg-table td.c-mode { text-align: left; }
.seg-table tbody tr:hover { background: #f5f8fa; }
.seg-table tbody tr.hl { background: var(--accent-bg); }
.seg-table tfoot td {
  font-weight: 700; font-size: 15px;
  border-top: 2px solid var(--line-firm); border-bottom: none;
  padding-top: 10px;
}
.seg-table select, .seg-table input {
  font: inherit; font-size: 12px; padding: 3px 4px; width: 100%; min-width: 78px;
  border: 1px solid var(--line); border-radius: 3px;
}
.seg-table input { min-width: 46px; text-align: right; }
/* a value pinned to this segment, no longer following the speed slider */
.seg-table input.overridden { border-color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.warn { color: #a15252; }

.seg-del {
  font: inherit; font-size: 15px; line-height: 1;
  padding: 2px 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: 3px;
  background: none; color: var(--ink-soft);
}
.seg-del:hover { background: #fbf1f1; border-color: #e3c4c4; color: #a15252; }
.seg-table td:last-child { width: 1%; padding-left: 2px; padding-right: 2px; }

/* ---------- profile ---------- */

#profile svg { display: block; width: 100%; height: auto; }
.profile-axis  { stroke: var(--line-firm); stroke-width: 1; }
.profile-grid  { stroke: #eef1f4; stroke-width: 1; }
.profile-label { fill: var(--ink-soft); font-size: 9px; }
.profile-seabed{ fill: var(--shallow); stroke: var(--deep); stroke-width: 1; }
.profile-diver { fill: none; stroke: #d98a8a; stroke-width: 1.6; }
.profile-legsep{ stroke: #c9d2da; stroke-width: 1; stroke-dasharray: 2 2; }
.profile-cap   { stroke: #b39ddb; stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; }

/* ---------- misc ---------- */

.draw-hint {
  position: absolute; z-index: 500; left: 50%; transform: translateX(-50%); top: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 10px; font-size: 12px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100% - 20px);
}

/* ---------- accounts ---------- */

.account { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }

#login-dialog h2, #contact-dialog h2 {
  font-size: 15px; text-transform: none; letter-spacing: 0;
  color: var(--ink); margin-bottom: 6px;
}

/* a button that reads as a link, for inline actions inside prose */
.linklike {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent-dk); text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--ink); }

.storage-note {
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  margin: 10px 0 0; padding: 8px 10px;
  background: var(--accent-bg); border: 1px solid var(--line); border-radius: 4px;
}

/* honeypot: present in the DOM for bots, never shown to a person */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-ok {
  font-size: 12px; color: #3f6f52; background: #eef6f0;
  border: 1px solid #c9e0d2; border-radius: 4px; padding: 6px 8px; margin: 0 0 4px;
}

.login-error {
  font-size: 12px; color: #a15252; background: #fbf1f1;
  border: 1px solid #e3c4c4; border-radius: 4px; padding: 6px 8px; margin: 0 0 4px;
}

.dlg {
  border: 1px solid var(--line); border-radius: 6px; padding: 18px;
  width: min(460px, 92vw); background: var(--panel); color: var(--ink);
}
.dlg::backdrop { background: rgba(38,48,58,.25); }
.dlg-scroll { max-height: 62vh; overflow-y: auto; }
.dlg hr { border: none; border-top: 1px solid var(--line); margin: 16px 0 4px; }

.leaflet-container { font-family: inherit; background: #eef2f5; }
.leaflet-control-layers, .leaflet-bar a {
  border-radius: 4px; border-color: var(--line); color: var(--ink);
}
.leaflet-control-layers-expanded { font-size: 12px; padding: 8px 10px; max-height: 70vh; overflow-y: auto; }
.drawmode {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  min-width: 190px;
  box-shadow: none;
}
.dm-modes { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.dm-modes button {
  flex: 1; font: inherit; font-size: 12px; padding: 7px 8px;
  border: none; border-right: 1px solid var(--line);
  background: var(--panel); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.dm-modes button:last-child { border-right: none; }
.dm-modes button.active { background: var(--accent); color: #fff; font-weight: 600; }
.dm-depth { margin-top: 8px; }
.dm-depth > label > span { display: block; margin-bottom: 4px; color: var(--ink); }
.dm-depth output { font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-depth input[type="range"] { width: 100%; accent-color: var(--accent-dk); }
.dm-hint { margin: 4px 0 0; font-size: 11px; line-height: 1.4; }
.dm-check { display: flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer; color: var(--ink); }
.dm-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent-dk); }

/* Only meaningful when the list is expanded; Leaflet hides the body otherwise. */
.layers-close {
  display: none;
  width: 100%; margin-top: 8px; padding: 7px;
  font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--ink-soft); cursor: pointer;
}
.layers-close:hover { background: #f0f3f6; }
.leaflet-control-layers-expanded .layers-close { display: block; }

.depth-readout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  min-width: 150px;
  box-shadow: none;
}
.depth-readout span { display: block; }
.depth-readout .dr-depth {
  font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.depth-readout .dr-pos { font-family: ui-monospace, Consolas, monospace; font-size: 10px; }
.depth-readout .dr-src { font-size: 10px; }
.depth-readout .dr-survey { font-size: 10px; color: var(--accent-dk); max-width: 240px; }
.depth-readout .dr-survey:empty, .depth-readout .dr-src:empty { display: none; }

.vertex-label {
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  padding: 0 3px; font-size: 10px; color: var(--ink-soft); box-shadow: none;
}

/* ---------- narrow screens ---------- */

/* Tablet / small laptop: drop the right panel under the map, keep the map
   usable rather than letting the three-column grid crush it. */
@media (max-width: 1240px) and (min-width: 861px) {
  .layout { grid-template-columns: 240px 1fr; grid-template-rows: 1fr auto; }
  .panel-left { grid-row: 1 / 3; }
  .panel-right { grid-column: 2; border-left: none; border-top: 1px solid var(--line); max-height: 46vh; }
}

/* Phone / narrow: one thing at a time, chosen with the view tabs. The map gets
   the full viewport because pinch-zooming a 200 px strip is useless. */
@media (max-width: 860px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
  .topbar h1 { font-size: 15px; }
  .topbar-status { width: 100%; margin-left: 0; text-align: left; order: 5; }
  .viewtabs { display: flex; }

  .layout { display: block; height: calc(100% - 92px); }
  .panel, .map-wrap { height: 100%; }
  .panel-left, .panel-right { border: none; }

  body[data-view="map"]   #panel-route,
  body[data-view="map"]   #panel-plan,
  body[data-view="route"] #panel-map,
  body[data-view="route"] #panel-plan,
  body[data-view="plan"]  #panel-map,
  body[data-view="plan"]  #panel-route { display: none; }

  /* touch targets */
  .btn { padding: 8px 13px; font-size: 14px; }
  .btn-sm { padding: 6px 10px; font-size: 13px; }
  .route-list li { padding: 11px 8px; }
  .seg-table th, .seg-table td { padding: 10px 6px; }
  .seg-table select, .seg-table input { padding: 6px 4px; font-size: 13px; }
  .field input, .field select { padding: 8px 7px; }
  input[type="range"] { height: 32px; }
}

/* ---------- print: the navboard card ---------- */

#print-card { display: none; }

@media print {
  @page { margin: 10mm; }

  body { background: #fff; }
  .topbar, .layout, .dlg { display: none !important; }

  #print-card {
    display: block;
    color: #000;
    font-size: 12pt;
  }

  .pc-head { border-bottom: 2px solid #000; padding-bottom: 6pt; margin-bottom: 8pt; }
  .pc-head h3 { font-size: 18pt; margin: 0 0 3pt; }
  .pc-params { font-size: 10pt; color: #333; }

  .pc-table { width: 100%; border-collapse: collapse; }
  .pc-table th {
    font-size: 9pt; text-transform: uppercase; letter-spacing: .5px;
    text-align: right; padding: 3pt 4pt; border-bottom: 1.5pt solid #000;
  }
  .pc-table th:first-child, .pc-table th:last-child { text-align: left; }
  .pc-table td {
    text-align: right; padding: 6pt 4pt; border-bottom: .5pt solid #999;
    font-variant-numeric: tabular-nums;
  }
  .pc-table td:first-child { text-align: left; font-weight: 700; }
  .pc-table td:last-child, .pc-table th:last-child { text-align: left; font-size: 10pt; padding-left: 10pt; }
  .pc-table td.c-hdg { font-size: 16pt; font-weight: 700; }
  .pc-table td.c-time { font-weight: 700; }
  .pc-table tfoot td {
    font-weight: 700; border-top: 1.5pt solid #000; border-bottom: none; padding-top: 7pt;
  }
  .pc-table tbody tr { page-break-inside: avoid; }

  .pc-foot { font-size: 9pt; color: #333; margin-top: 10pt; }
}