:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1c2126;
  --muted: #6b7280;
  --border: #dfe3e8;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --danger: #dc2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-header { padding: 1.25rem 1.5rem 0.5rem; }
.app-header h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
.muted { color: var(--muted); margin: 0; }

.layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  padding: 1rem 1.5rem 2rem;
  align-items: start;
}
.layout.viewer { grid-template-columns: 1fr; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.panel h2 {
  font-size: 0.95rem;
  margin: 1.1rem 0 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.panel h2:first-child { margin-top: 0; }

.field { display: block; font-size: 0.85rem; margin-bottom: 0.7rem; }
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}
.hint { font-size: 0.78rem; color: var(--muted); margin: -0.4rem 0 0.7rem; }
.field.checkbox { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.field.checkbox input[type="checkbox"] { width: auto; }
.field.checkbox input[type="number"] { width: 4em; display: inline-block; }

/* The panel itself can be narrower than the table needs (320px sidebar,
   narrower still on mobile where .layout collapses to one column) — five
   columns of inputs squeezed to fit there is what made selects/buttons
   overlap the text. Instead of shrinking columns below usable width, give
   the table a min-width per column and let .poi-table-scroll scroll
   horizontally on narrow viewports. */
.poi-table-scroll { overflow-x: auto; margin-bottom: 0.5rem; }
.poi-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 0; }
.poi-table th, .poi-table td { padding: 0.25rem; text-align: left; }
.poi-table th:nth-child(1), .poi-table td:nth-child(1) { width: 4rem; }
.poi-table th:nth-child(3), .poi-table td:nth-child(3) { width: 6rem; }
.poi-table th:nth-child(4), .poi-table td:nth-child(4) { width: 5rem; }
.poi-table th:nth-child(5), .poi-table td:nth-child(5) { width: 3.5rem; }
.poi-table input, .poi-table select {
  width: 100%; padding: 0.25rem; border: 1px solid var(--border); border-radius: 4px; font: inherit;
}

.btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.tiny { padding: 0.15rem 0.4rem; font-size: 0.8rem; line-height: 1.4; flex: none; }
.poi-actions { display: flex; gap: 0.25rem; align-items: center; white-space: nowrap; }
.poi-rotation-cell { display: flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
.poi-rotation-cell .poi-rotation { width: 3.2rem; flex: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-block { display: block; text-align: center; text-decoration: none; }

/* Section 1 presents "upload a GPX" and "plan one from scratch" as two
   equally-weighted alternatives (not one buried as a hint under the other),
   per the choice a user makes for how they even get a route in the first
   place — the divider is purely visual, not a real form control. */
.source-option { padding: 0.3rem 0; }
.source-divider {
  text-align: center; color: var(--muted); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 0.2rem 0;
}
.source-divider::before, .source-divider::after {
  content: ''; display: inline-block; width: 32%; height: 1px; background: var(--border);
  vertical-align: middle; margin: 0 0.5rem;
}
.hint-secondary { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }

.share-box textarea { font-family: monospace; font-size: 0.75rem; }
.status { min-height: 1.2em; font-size: 0.85rem; }
.status.error { color: var(--danger); }

.itinerary-time-settings { display: flex; gap: 1rem; margin: 0.6rem 0; flex-wrap: wrap; align-items: center; }
.itinerary-time-settings .field { flex: 0 0 auto; }

.plan-waypoint-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #f59e0b; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.5);
  cursor: move;
}
.plan-waypoint-dot.selected { box-shadow: 0 0 0 3px #2563eb, 0 0 3px rgba(0,0,0,.5); }

.plan-toolbar { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.btn-icon { width: 2.3rem; height: 2.3rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }

/* The planner page devotes most of its width/height to the map — it's the
   whole point of the page, unlike the editor where the map is one of
   several equally-important preview blocks. */
body.plan-page .layout { grid-template-columns: 280px 1fr; }
body.plan-page .map { height: min(75vh, 720px); }

/* Photoshop-style layer list for the detour planner's multiple detour
   segments over one background route — each row is a distinct detour,
   toggle its "eye" to show/hide it, click the row to make it the one that
   map clicks/drags edit, trash removes it. Hidden for "plan a new route"
   (kind=new), which only ever has one implicit route/layer. */
.layers-panel { margin: 0.6rem 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.layer-row {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border); font-size: 0.82rem; cursor: pointer;
}
.layer-row:last-of-type { border-bottom: none; }
.layer-row.active { background: #eef2ff; }
.layer-row .layer-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.layer-row .layer-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.layer-row button { background: none; border: none; cursor: pointer; padding: 0.1rem 0.25rem; line-height: 1; font-size: 0.95rem; }
#btnAddLayer { display: block; width: calc(100% - 0.8rem); margin: 0.4rem; }

.preview-block { margin-bottom: 1.25rem; }
.map { position: relative; height: 360px; border-radius: 8px; border: 1px solid var(--border); }
.profile {
  width: 100%;
  height: 220px;
  display: block;
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.color-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.color-row select { flex: 1 1 auto; min-width: 0; }
.color-row input[type="color"] {
  width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}

.export-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.export-row select { width: auto; }
.export-row .btn { white-space: nowrap; }

/* Point 5 (superseded — see point 11 below): the profile used to be folded
   into the bottom of the map as one combined overlay widget instead of
   stacked below it. That was reverted at the user's request: side by side
   with the editor/standalone-viewer preview (map box, profile box, each
   with its own frame) the overlay read worse on both mobile and desktop.
   The map's height is still a plain CSS px value, not derived from the
   actual <iframe> element's own rendered height — that part of the
   original reasoning still holds: an <iframe>'s box height is entirely up
   to the *embedding* page, and plenty of CMS/theme setups drop or override
   the `height="…"` attribute in the pasted snippet (sanitizers, "responsive
   iframe" wrappers, etc.), so the map's height is baked in server-side from
   the route's own saved setting (`--embed-map-height`, set inline by
   view.php from settings.embedMapHeight — see the "Výška mapy v iframe"
   field in the editor) rather than left to fill whatever box the page
   hands the iframe. The profile now gets its own separate height below the
   map (the base .profile rule's 220px) instead of a slice of the map's —
   see the embedHeight calc in app.js for how the generated <iframe> code's
   suggested height accounts for both boxes stacked. */
body.embed .preview-block { position: relative; margin-bottom: 0.5rem; }
body.embed .preview-block .map {
  height: var(--embed-map-height, 500px);
  min-height: 200px;
  /* Guards against a route saved with a tall "Výška mapy" being shown on a
     phone-sized <iframe> that's genuinely short (vh here reflects the
     iframe's own viewport, which — unlike height:100% used elsewhere —
     this fixed-px value has no other way to respect). */
  max-height: 90vh;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .mcp-badge { padding: 2px 4px; top: 4px; right: 4px; }
  .mcp-badge img { width: 48px; }
}

.hidden { display: none !important; }

.poi-marker { display: flex; align-items: center; justify-content: center; }
.poi-rotate { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.poi-flag {
  border-radius: 50% 50% 50% 0;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.poi-flag > * { transform: rotate(-45deg); }
.poi-circle {
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  border: 2px solid #fff;
}

/* Font-size control (point 8) also scales Leaflet's own DOM tooltips —
   POI labels and km-marker labels — not just the canvas-drawn profile. */
.leaflet-tooltip { font-size: calc(12px * var(--poi-font-scale, 1)); }

/* Km-marker labels are permanent (always shown, not just on hover), so keep
   them compact and out of the way of the route line underneath. */
.km-marker-label {
  padding: 0 4px;
  font-size: calc(10px * var(--poi-font-scale, 1));
  font-weight: 600;
  color: #333;
}

.viewer-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

/* Point 2: small branding badge in the corner of the map box itself (not
   the outer embed frame) in the iframe embed preview only (view.php only
   renders the <picture> markup, as a child of #mapFull, when embed=1).
   .map is position:relative so this anchors to the map's own corner even
   though the profile canvas below it can be taller. Sits above Leaflet's
   own panes (up to z-index 700) and the folded-in profile overlay above
   (z-index 1000). */
.mcp-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1001;
  line-height: 0;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: 3px 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.mcp-badge img { display: block; width: 69px; height: auto; }

body.embed .app-header, body.embed .viewer-toolbar { display: none; }
body.embed .panel { border: none; border-radius: 0; padding: 0.5rem; }
body.embed .layout { padding: 0.5rem; }
.full-width { width: 100%; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}

@media print {
  .viewer-toolbar, .app-header { display: none; }
  .map { height: 320px; }
  .panel { border: none; }
}