/* /karte/ -- the tile map in the /models shell. Colours come only
   from tokens.css (guarded by tests/test_karte_beta_page.py). */

/* The map takes the whole stage column; /models shrink-wraps the column
   to a PNG's natural width, which a map does not have. */
body.tm .stage-col { flex: 1; width: auto; }
body.tm .stage { padding: 0; display: block; flex: 1; min-height: 320px; }
body.tm #map { position: absolute; inset: 0; background: var(--map-bg); }
body.tm .stage-msg { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
body.tm .paywall { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: calc(100% - 32px); }

@media (min-width: 821px) {
  body.tm .layout { justify-content: stretch; }
  body.tm .stage-col { width: auto; }
  body.tm .stage { flex: 1; }
}

/* ---- layers card ---- */
.tm-card {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: min(290px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-1); font-size: 13px; color: var(--ink);
}
.tm-card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px; cursor: pointer; user-select: none; font-weight: 500; }
.tm-card-body { padding: 4px 10px 10px; border-top: 1px solid var(--line); }
.tm-card.collapsed .tm-card-body { display: none; }
.tm-card label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
/* label + select on one line (the basemap choice) */
.tm-card .tm-row { justify-content: space-between; cursor: default; }
.tm-card .tm-row select { margin-left: 0; }
.tm-card select { margin-left: 22px; font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.tm-note { color: var(--muted); font-size: 12px; margin: 4px 0; }
.lg { margin-top: 8px; }
/* The end ticks (left:0%/100%, a linear legend's last stop always lands on
   100%) are centred under their mark like every other tick; that hangs
   half the label past the card edge. A side margin on the bar AND the
   ticks track (kept equal so the ticks still line up under the bar) gives
   that overhang somewhere to go without touching interior ticks -- unlike
   re-anchoring just the end ticks, which crowds them into their neighbour.
   The title carries the same side margin so it still lines up over the bar
   instead of the bar looking indented against it. */
.lg-title { font-size: 12px; color: var(--muted); margin: 0 15px 3px; }
.lg-steps, .lg-grad, .lg-ticks { margin: 0 15px; }
.lg-steps { display: flex; height: 12px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.lg-steps span { flex: 1; }
.lg-grad { height: 12px; border: 1px solid var(--line); border-radius: 3px; }
.lg-ticks { position: relative; height: 15px; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.lg-ticks i { position: absolute; transform: translateX(-50%); top: 1px; white-space: nowrap; font-style: normal; }
.lg-cls { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; }
.lg-cls span { display: flex; gap: 4px; align-items: center; }
.lg-cls i { width: 14px; height: 11px; border-radius: 2px; display: inline-block; }

/* ---- pointer readout: follows the cursor, never eats a drag ---- */
.tm-readout {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 9px; font-size: 13px; font-variant-numeric: tabular-nums;
  white-space: nowrap; box-shadow: 0 2px 10px var(--shadow-1);
}
.tm-readout .muted { color: var(--muted); font-size: 12px; }

/* ---- non-modal notice ("nearest step", "no such map") ---- */
.tm-notice {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; color: var(--ink); box-shadow: 0 2px 10px var(--shadow-1);
}

/* ---- products the current model does not have ---- */
.product-btn.unavail { opacity: .42; }
.product-btn.unavail.active { opacity: .7; }

/* ---- model picker sits beside the run picker ---- */
.model-select .run-btn { font-weight: 500; }
@media (max-width: 820px) {
  body.tm .runinfo .model-select .run-btn { max-width: 34vw; overflow: hidden; }
  .tm-card { width: min(250px, calc(100% - 20px)); }
}

/* ---- cursor: a large cross while hovering (reading values), the hand only
   while the button is down and the map is being dragged. The cross is black
   with a white outline so it shows over any field colour; the system
   crosshair is the fallback. Overrides maplibre-gl.css's grab/grabbing.
   The same on /usporedba/'s panel maps (.tcmp-map). */
body.tm #map .maplibregl-canvas-container.maplibregl-interactive,
body.tm #map .maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer,
.tcmp-map .maplibregl-canvas-container.maplibregl-interactive,
.tcmp-map .maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Cpath%20d='M16.5%201v30M1%2016.5h30'%20stroke='white'%20stroke-width='3'/%3E%3Cpath%20d='M16.5%201v30M1%2016.5h30'%20stroke='black'%20stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair;
}
body.tm #map .maplibregl-canvas-container.maplibregl-interactive:active,
.tcmp-map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

/* ---- collapsible product groups ---- */
body.tm .group-title.toggle { cursor: pointer; user-select: none; }
body.tm .group-title.toggle:hover { color: var(--ink); }
body.tm .group-title.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.tm .group-title .caret { display: inline-block; width: 1.1em; }

/* ---- time chip: valid time (+lead) and model · init, over the top-centre
   of the map, between the zoom buttons and the layers card. Fixed
   breakpoints cannot track both the card's width (290/250 px, itself
   taller expanded than collapsed) and the sidebar's overlay -> inline
   switch at 821 px, so top/left/max-width are set by placeChip() in
   tilemap.js by measurement; this only sets the look and a sane
   pre-JS/no-JS fallback position (review fix round 1, 2026-09-23). ---- */
.tm-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-1); padding: 5px 12px; text-align: center;
  pointer-events: none; white-space: nowrap;
}
.tm-chip-when { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; }
.tm-chip-when b { color: var(--accent); font-weight: 600; }
.tm-chip-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
/* The model and run menus open leftward from their button (app.css
   .run-menu right: 0); on a phone both buttons sit left of centre, so the
   menus spilled off the left edge, entries invisible (operator,
   2026-09-23). There: a full-width panel right under the header. */
@media (max-width: 600px) {
  body.tm #modelMenu, body.tm #runMenu {
    position: fixed; top: 50px; left: 8px; right: 8px;
    width: auto; min-width: 0; max-width: none;
    max-height: calc(100dvh - 66px); overflow-y: auto;
  }
}
@media (max-width: 600px) {
  /* on phones the time chip sits at the bottom (tilemap.js placeChip):
     notices go above it */
  .tm-notice { bottom: 60px; }
  .tm-chip { padding: 3px 8px; }
  .tm-chip-when { font-size: 13px; }
  .tm-chip-meta { font-size: 11px; }
}

/* ---- share image (📷): the chip, layers card, readout and notice have no
   place in the image, so framing mode hides them while it is open. ---- */
.snapping #tmChip, .snapping #tmCard, .snapping #tmReadout, .snapping #tmNotice { display: none; }

/* ---- framing overlay: a centred square, dimmed surroundings, guide bands
   at the header/footer proportions of the final image, a bar of buttons
   below. Everything but the bar ignores pointer events so the map underneath
   stays pannable/zoomable. ---- */
.tm-snap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tm-snap-frame {
  position: absolute; border: 2px solid var(--panel);
  box-shadow: 0 0 0 100vmax var(--backdrop); pointer-events: none;
}
.tm-snap-head, .tm-snap-foot {
  position: absolute; left: 0; right: 0; background: var(--panel); opacity: .55; pointer-events: none;
}
.tm-snap-head { top: 0; }
.tm-snap-foot { bottom: 0; }
.tm-snap-bar {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-1); padding: 6px 12px; pointer-events: auto;
}
.tm-snap-hint { font-size: 13px; color: var(--muted); }
.tm-snap-bar button {
  min-width: 34px; height: 30px; font-size: 13px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink);
}
.tm-snap-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tm-snap-bar button:disabled { opacity: .35; cursor: default; }
.tm-snap-bar button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---- result dialog ---- */
.tm-snap-dialog {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px; max-width: 92vw;
}
.tm-snap-dialog::backdrop { background: var(--backdrop); }
.tm-snap-dialog img {
  display: block; width: 100%; max-width: min(90vw, 70vh); aspect-ratio: 1;
  margin: 0 auto 10px; border-radius: 4px;
}
.tm-snap-filename {
  font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 10px; word-break: break-all;
}
.tm-snap-dialog-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tm-snap-dialog-btns a, .tm-snap-dialog-btns button {
  min-width: 34px; height: 34px; padding: 0 14px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.tm-snap-dialog-btns a:hover, .tm-snap-dialog-btns button:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
}
.tm-snap-dialog-btns a.primary, .tm-snap-dialog-btns button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* custom map pickers: label left, select right, select may shrink */
.tm-card .tm-row select { max-width: 60%; min-width: 0; text-overflow: ellipsis; }

/* ---- saved areas (★ "Moja područja") ---- */
.tm-areas {
  position: absolute; left: 50px; top: 10px; z-index: 4;
  width: min(280px, calc(100% - 60px)); max-height: calc(100% - 20px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-1); font-size: 13px; color: var(--ink);
}
.tm-areas-head { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px 6px 10px; font-weight: 500; border-bottom: 1px solid var(--line); }
.tm-areas-x { font-size: 16px; line-height: 1; padding: 2px 6px; color: var(--muted); }
.tm-areas-body { padding: 6px 10px 10px; }
.tm-areas-body .paywall-cta { font-size: 13px; padding: 5px 14px; }
.tm-areas-list { list-style: none; margin: 0 0 6px; padding: 0; }
.tm-areas-list li { display: flex; align-items: center; gap: 2px; }
.tm-areas-go { flex: 1; min-width: 0; text-align: left; padding: 4px 4px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tm-areas-go:hover { background: var(--panel-hover); color: var(--accent); }
.tm-areas-icon { padding: 2px 6px; color: var(--muted); border-radius: 4px; }
.tm-areas-icon:hover { color: var(--accent); background: var(--panel-hover); }
.tm-areas-label { font-size: 12px; color: var(--muted); margin: 6px 0 3px; }
.tm-areas-form { display: flex; gap: 6px; flex: 1; }
.tm-areas-form input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; }
.tm-areas-form button { font: inherit; padding: 3px 10px; border-radius: 4px;
  background: var(--accent); color: var(--on-accent); }
.tm-areas-form button:disabled { opacity: 0.6; }
.tm-areas-err { color: var(--stale); }