/* taplan_stil.css – utseende för verktyget TA-plan (VAKonsult.com).
 * Följer sajtens konventioner (action-bar-färger, info-panel, disclaimer, print) men har egen layout kring en stor karta.
 * Samma mönster som dagvattendamm_stil.css, med tp-prefix. */

.tp-sida {
  --tp-ink: #1e293b; --tp-muted: #64748b; --tp-linje: #d9e0e8; --tp-panel: #f8fafc; --tp-vit: #fff;
  --tp-accent: var(--primary, #008cc2); --tp-accent-ljus: #e3f3fa;
  --tp-gron: #15803d; --tp-gul: #b45309; --tp-rod: #b91c1c;
  --tp-vb: 300px; --tp-hb: 260px;
  max-width: 1800px; margin: 0 auto; padding: 8px 12px 24px; color: var(--tp-ink); font-size: 14px; line-height: 1.4;
}
.tp-sida *, .tp-sida *::before, .tp-sida *::after { box-sizing: border-box; }
.tp-sida button, .tp-sida input, .tp-sida select { font: inherit; }
.tp-sida :focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-liten { font-size: 12px; color: var(--tp-muted); }

/* ---------- Titelrad och action-bar ---------- */
.tp-titel { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.tp-titel h1 { font-size: 1.4rem; font-weight: 700; margin: 0; line-height: 1.2; }
.tp-titel p { margin: 2px 0 0; color: var(--tp-muted); font-size: 13px; max-width: 70ch; }
.tp-action-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-btn { border: 0; border-radius: 6px; padding: 8px 14px; color: #fff; cursor: pointer; font-weight: 600; }
.tp-action-bar .btn-share { background: var(--tp-accent); }
.tp-action-bar .btn-export { background: #475569; }
.tp-btn:hover { filter: brightness(1.08); }
.tp-utskrift-huvud { display: none; }

/* ---------- Etapprad ---------- */
.tp-etapprad { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--tp-vit); border: 1px solid var(--tp-linje); border-radius: 8px; margin-bottom: 8px; }
.tp-flikar { display: flex; gap: 4px; flex-wrap: wrap; }
.tp-flik-etapp { display: flex; align-items: center; gap: 6px; border: 1px solid var(--tp-linje); background: var(--tp-panel); border-radius: 6px 6px 0 0; padding: 6px 8px 6px 6px; cursor: pointer; }
.tp-flik-etapp[aria-selected="true"] { background: var(--tp-accent-ljus); border-color: var(--tp-accent); font-weight: 700; }
.tp-flik-grepp { display: flex; align-items: center; justify-content: center; width: 16px; height: 24px; color: var(--tp-muted); cursor: pointer; flex: none; }
.tp-flik-grepp svg circle { fill: currentColor; }
.tp-flik-etapp[aria-selected="true"] .tp-flik-grepp { color: var(--tp-accent); }
.tp-flik-etapp:hover .tp-flik-grepp { color: var(--tp-ink); }
.tp-flik-etapp input[type="text"] { border: 0; background: transparent; width: 9em; font: inherit; font-weight: inherit; padding: 0; }
.tp-flik-etapp input[type="text"]:focus { outline: none; background: #fff; border-radius: 3px; }
.tp-flik-x { border: 0; background: transparent; color: var(--tp-muted); cursor: pointer; border-radius: 4px; width: 20px; height: 20px; line-height: 1; }
.tp-flik-x:hover { background: #fee2e2; color: var(--tp-rod); }
.tp-etappknappar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-bock-rad { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }

/* ---------- Hjälptext ---------- */
.tp-hjalp { border: 1px solid var(--tp-linje); border-radius: 8px; background: var(--tp-accent-ljus); margin-bottom: 8px; }
.tp-hjalp > summary { cursor: pointer; padding: 7px 12px; font-weight: 700; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 6px; color: var(--tp-ink); }
.tp-hjalp > summary::-webkit-details-marker { display: none; }
.tp-hjalp > summary::before { content: '▸'; display: inline-block; color: var(--tp-accent); transition: transform .15s ease; }
.tp-hjalp[open] > summary::before { transform: rotate(90deg); }
.tp-hjalp p { margin: 0 12px 10px; font-size: 13px; color: var(--tp-ink); max-width: 90ch; }

/* ---------- Layout ---------- */
.tp-app {
  display: grid; height: var(--tp-hojd, 700px); min-height: 520px;
  grid-template-columns: var(--tp-vb) minmax(0, 1fr) var(--tp-hb);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "vanster karta hoger";
  border: 1px solid var(--tp-linje); border-radius: 8px; overflow: hidden; background: var(--tp-vit);
  transition: grid-template-columns .2s ease;
}
.tp-app.tp-v-stangd { --tp-vb: 44px; }
.tp-app.tp-h-stangd { --tp-hb: 44px; }
.tp-vanster { grid-area: vanster; border-right: 1px solid var(--tp-linje); }
.tp-hoger { grid-area: hoger; border-left: 1px solid var(--tp-linje); }
.tp-kartyta { grid-area: karta; position: relative; min-height: 0; margin: 0; }
#tp-karta { position: absolute; inset: 0; }

/* ---------- Paneler ---------- */
.tp-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tp-panel); }
.tp-panelhuvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--tp-linje); background: var(--tp-vit); min-height: 40px; flex: none; }
.tp-panelhuvud-knappar { display: flex; gap: 4px; }
.tp-panelinnehall { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 14px; }
.tp-panelknapp { border: 1px solid var(--tp-linje); background: var(--tp-vit); border-radius: 6px; width: 28px; height: 28px; line-height: 1; cursor: pointer; color: var(--tp-muted); flex: none; }
.tp-panelknapp:hover { background: var(--tp-accent-ljus); }
.tp-panelknapp[aria-pressed="true"] { background: var(--tp-accent-ljus); color: var(--tp-accent); }
.tp-panel { overflow: hidden; }
/* hopfälld panel: bara en smal list med fällknappen, allt annat göms så inget sticker ut bakom kartan */
.tp-v-stangd .tp-vanster .tp-panelinnehall, .tp-v-stangd .tp-vanster .tp-panelhuvud strong, .tp-v-stangd .tp-vanster #tp-kompakt,
.tp-h-stangd .tp-hoger .tp-panelinnehall, .tp-h-stangd .tp-hoger .tp-panelhuvud strong { display: none; }
.tp-v-stangd .tp-vanster .tp-panelhuvud, .tp-h-stangd .tp-hoger .tp-panelhuvud { justify-content: center; padding: 6px 0; }

/* ---------- Verktygsrad ---------- */
.tp-verktyg { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; background: var(--tp-vit); border: 1px solid var(--tp-linje); border-radius: 8px; align-items: center; margin-bottom: 8px; position: relative; }
.tp-vgrupp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 10px; border-right: 1px solid var(--tp-linje); position: relative; }
.tp-vgrupp:last-child { border-right: 0; }
.tp-vgrupp-namn { display: none; }
.tp-v { border: 1px solid var(--tp-linje); background: var(--tp-vit); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; color: var(--tp-ink); }
.tp-v:hover:not(:disabled) { background: var(--tp-accent-ljus); border-color: #a9d6ea; }
.tp-v[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-v:disabled { opacity: .45; cursor: not-allowed; }
.tp-v-primar { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; font-weight: 700; }
.tp-v-primar:hover:not(:disabled) { background: var(--tp-accent); filter: brightness(1.1); }
.tp-dropdown { position: relative; }
.tp-dropdown-meny { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--tp-linje); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.15); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.tp-dropdown-meny[hidden] { display: none; }
.tp-dropdown-meny .tp-v { text-align: left; border-color: transparent; }
.tp-dropdown-meny .tp-v:hover:not(:disabled) { border-color: #a9d6ea; }

/* ---------- Karta ---------- */
.tp-status { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); max-width: min(720px, 90%); background: rgba(30,41,59,.92); color: #fff; padding: 7px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; z-index: 5; }
.tp-status:empty { display: none; }
.tp-status.tp-varning { background: rgba(180,83,9,.95); }
.tp-status.tp-fel { background: rgba(185,28,28,.95); }

/* Skyltmarkör: fast storlek på skärmen, roterar runt fotpunkten */
.tp-skylt-marker { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: grab; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tp-skylt-marker img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.tp-skylt-marker.tp-vald { outline: 3px solid var(--tp-accent); outline-offset: 2px; border-radius: 6px; }
.tp-skylt-marker.tp-skugga { opacity: .35; pointer-events: none; filter: grayscale(.2); }
.tp-skylt-marker:active { cursor: grabbing; }

/* Textruta */
.tp-text-marker { font-family: Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1.2; white-space: pre; padding: 2px 6px; cursor: grab; text-align: center; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.tp-text-marker.tp-text-bg { border: 1px solid rgba(15,23,42,.5); border-radius: 3px; text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.tp-text-marker.tp-vald { outline: 3px solid var(--tp-accent); outline-offset: 2px; }
.tp-text-marker.tp-skugga { opacity: .35; pointer-events: none; }

/* Anordning/fordon: verklig storlek i meter, skalar med kartan (storlek sätts via JS efter zoom) */
.tp-anordning-marker { display: flex; align-items: center; justify-content: center; cursor: grab; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tp-anordning-marker img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.tp-anordning-marker.tp-vald { outline: 3px solid var(--tp-accent); outline-offset: 2px; }
.tp-anordning-marker.tp-skugga { opacity: .35; pointer-events: none; filter: grayscale(.2); }
.tp-anordning-marker:active { cursor: grabbing; }

/* Rotationshandtag */
.tp-rotationshandtag { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--tp-accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: grab; z-index: 6; }
.tp-rotationshandtag:active { cursor: grabbing; }
.tp-rotationslinje { position: absolute; width: 2px; background: var(--tp-accent); transform-origin: top center; opacity: .7; pointer-events: none; z-index: 5; }

/* Inspektor: mini-verktygsrad för markerat objekt */
.tp-inspektor { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7; background: #fff; border: 1px solid var(--tp-linje); border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.18); padding: 6px 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tp-inspektor[hidden] { display: none; }
.tp-inspektor strong { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-inspektor input[type="number"] { width: 4.5em; padding: 3px 5px; border: 1px solid #c3ccd6; border-radius: 5px; }
.tp-inspektor select { padding: 3px 5px; border: 1px solid #c3ccd6; border-radius: 5px; max-width: 14em; }
.tp-inspektor input[type="range"] { width: 6.5em; vertical-align: middle; }
.tp-inspektor input[type="color"] { width: 34px; height: 26px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 5px; vertical-align: middle; }
.tp-inspektor label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tp-inspektor .tp-knapp { border: 1px solid #c3ccd6; background: #fff; border-radius: 5px; padding: 3px 8px; cursor: pointer; }
.tp-inspektor .tp-knapp:hover { background: var(--tp-accent-ljus); }
.tp-inspektor .tp-knapp.tp-farlig:hover { background: #fee2e2; border-color: #fca5a5; }

/* ---------- Palett ---------- */
.tp-palett-sok { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; margin-bottom: 8px; }
.tp-palett-grupp { border: 1px solid var(--tp-linje); border-radius: 8px; background: var(--tp-vit); margin-bottom: 8px; }
.tp-palett-grupp > summary { cursor: pointer; padding: 8px 10px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tp-palett-grupp > summary::-webkit-details-marker { display: none; }
.tp-palett-grupp > summary::after { content: '+'; color: var(--tp-muted); font-weight: 400; }
.tp-palett-grupp[open] > summary::after { content: '–'; }
.tp-palett-badge { font-size: 11px; color: var(--tp-muted); font-weight: 400; margin-left: auto; }
.tp-palett-lista { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 4px 8px 10px; }
.tp-kompakt .tp-palett-lista { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.tp-palett-post { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; background: none; text-align: left; width: 100%; }
.tp-palett-post:hover { background: var(--tp-accent-ljus); }
.tp-palett-post.tp-vald-i-palett { border-color: var(--tp-accent); background: var(--tp-accent-ljus); }
.tp-palett-post img, .tp-palett-post .tp-ikon-platshallare { width: 28px; height: 28px; object-fit: contain; flex: none; }
.tp-palett-post-text { min-width: 0; flex: 1; }
.tp-palett-post-kod { font-weight: 700; font-size: 12px; }
.tp-palett-post-namn { font-size: 12px; color: var(--tp-muted); white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }   /* hela texten syns, med radbrytning */
/* stjärnan sitter till vänster och knappen tar resten av raden (får inte tryckas ut under kartan) */
.tp-palett-post-rad > .tp-palett-post, .tp-egna-post > .tp-palett-post { flex: 1 1 0; min-width: 0; width: auto; }
.tp-kompakt .tp-palett-post { flex-direction: column; padding: 6px 2px; gap: 2px; }
.tp-kompakt .tp-palett-post img, .tp-kompakt .tp-palett-post .tp-ikon-platshallare { width: 34px; height: 34px; }
.tp-kompakt .tp-palett-post-text { display: none; }
.tp-sida .tp-favorit-stjarna { border: 0; background: transparent; cursor: pointer; color: #cbd5e1; font-size: 30px; line-height: 1; flex: none; padding: 0 2px; }
.tp-favorit-stjarna:hover { color: #f59e0b; }
.tp-favorit-stjarna.tp-aktiv { color: #d97706; }
.tp-kompakt .tp-favorit-stjarna { display: none; }
.tp-palett-tom { color: var(--tp-muted); font-size: 13px; padding: 6px 2px; }
.tp-palett-kommer-snart { opacity: .55; }
.tp-palett-kommer-snart .tp-palett-post { cursor: not-allowed; }

/* ---------- Legend ---------- */
.tp-lg-rubrik { font-size: 13px; font-weight: 700; margin: 10px 0 6px; }
.tp-lg-rubrik:first-child { margin-top: 0; }
.tp-lg-tom { color: var(--tp-muted); font-size: 13px; }
.tp-lg-rad { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.tp-lg-rad img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.tp-lg-namn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-lg-antal { color: var(--tp-muted); font-variant-numeric: tabular-nums; }

/* ---------- Dialog ---------- */
.tp-dlg { border: 0; border-radius: 10px; padding: 0; width: min(480px, 94vw); box-shadow: 0 20px 60px rgba(15,23,42,.35); color: var(--tp-ink); }
.tp-dlg::backdrop { background: rgba(15,23,42,.45); }
.tp-dlg-inre { padding: 18px 18px 14px; display: grid; gap: 12px; }
.tp-dlg h2 { font-size: 1.1rem; margin: 0; }
.tp-dlg-knappar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.tp-falt { display: grid; gap: 4px; }
.tp-falt > label, .tp-falt > .tp-falt-namn { font-size: 13px; font-weight: 600; }
.tp-falt select, .tp-falt input[type="text"] { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.tp-falt input[type="color"] { width: 52px; height: 32px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.tp-falt input[type="range"] { width: 100%; }
.tp-falt textarea { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; font: inherit; resize: vertical; }
.tp-rad { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.tp-forhandsvisning { display: flex; justify-content: center; padding: 8px; background: repeating-conic-gradient(#e2e8f0 0 25%, #f8fafc 0 50%) 0 0 / 16px 16px; border: 1px solid var(--tp-linje); border-radius: 8px; min-height: 90px; }
.tp-forhandsvisning canvas, .tp-forhandsvisning img { max-width: 100%; height: auto; max-height: 180px; }
.tp-tabell { width: 100%; border-collapse: collapse; font-size: 13px; }
.tp-tabell th, .tp-tabell td { border: 1px solid var(--tp-linje); padding: 4px 8px; text-align: left; vertical-align: middle; }
.tp-tabell th { background: #f1f5f9; }
.tp-tabell td.tp-num, .tp-tabell th.tp-num { text-align: right; font-variant-numeric: tabular-nums; }
.tp-tabell img { max-width: 70px; max-height: 40px; display: block; }
.tp-dlg.tp-bred { width: min(860px, 96vw); }
.tp-egna-post { position: relative; }
.tp-egna-ta-bort { position: absolute; right: 2px; top: 2px; border: 0; background: transparent; color: var(--tp-muted); cursor: pointer; font-size: 12px; }
.tp-falt label.tp-bock-rad { font-weight: 600; }
.tp-val { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-val button { border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.tp-val button[aria-checked="true"] { background: var(--tp-accent-ljus); border-color: var(--tp-accent); color: var(--tp-accent); font-weight: 700; }
.tp-knapp.tp-v-primar { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; font-weight: 700; }
.tp-knapp.tp-v-primar:hover { background: var(--tp-accent); filter: brightness(1.1); }

/* ---------- Legend: dölj/visa ---------- */
.tp-lg-rubrik { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tp-lg-grupp { border-radius: 6px; }
.tp-lg-rad { display: flex; align-items: center; gap: 6px; }
.tp-lg-barn { margin: 0 0 4px 22px; border-left: 2px solid var(--tp-linje); padding-left: 6px; }
.tp-lg-barnrad { padding: 1px 0; }
.tp-lg-fokus, .tp-lg-namn[data-fokus] { cursor: pointer; }
.tp-lg-fokus:hover, .tp-lg-namn[data-fokus]:hover { text-decoration: underline; }
.tp-lg-vaxla, .tp-lg-vaxla-tom { width: 16px; flex: none; }
.tp-lg-vaxla { border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--tp-muted); font-size: 12px; line-height: 1; }
.tp-lg-oga { flex: none; border: 0; background: transparent; cursor: pointer; padding: 2px; border-radius: 4px; color: var(--tp-accent); line-height: 0; }
.tp-lg-oga:hover { background: var(--tp-accent-ljus); }
.tp-lg-oga.tp-lg-dold { color: #94a3b8; }
.tp-lg-oga.tp-lg-delvis { color: var(--tp-accent); opacity: .55; }
.tp-lg-dimmad > .tp-lg-rad > *:not(.tp-lg-oga):not(.tp-lg-vaxla), .tp-lg-barnrad.tp-lg-dimmad > .tp-lg-namn { opacity: .45; }
.tp-lg-dolda { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 7px 9px; font-size: 12px; margin-bottom: 8px; }
.tp-lg-dolda .tp-knapp { margin-top: 5px; border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.tp-lg-dolda .tp-knapp:hover { background: var(--tp-accent-ljus); }

.tp-matt-ruta { position: absolute; left: 10px; top: 10px; z-index: 6; max-width: min(420px, calc(100% - 20px)); background: #fff; color: #4c1d95; border: 2px solid #7c3aed; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(15,23,42,.25); pointer-events: none; }
.tp-matt-ruta[hidden] { display: none; }

/* ---------- Projektinfo, logotyp, spara, export ---------- */
.tp-dlg input[type="date"] { padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; font: inherit; }
.tp-logo-ruta { border: 1px solid var(--tp-linje); border-radius: 8px; padding: 8px 12px 12px; display: grid; gap: 6px; }
.tp-logo-ruta legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.tp-logo-val { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tp-logo-under { margin-left: 22px; }
.tp-logo-under small { color: var(--tp-muted); font-size: 12px; line-height: 1.4; }
.tp-rek { background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.tp-x-grupp { border: 1px solid var(--tp-linje); border-radius: 8px; padding: 6px 12px 8px; display: grid; gap: 3px; }
.tp-x-forhands { display: grid; gap: 6px; }
.tp-x-forhands[hidden] { display: none; }
.tp-x-forhands-huvud { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tp-x-forhands iframe { width: 100%; height: min(62vh, 560px); border: 1px solid var(--tp-linje); border-radius: 6px; background: #e2e8f0; }
.tp-x-grupp legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.tp-dlg .tp-varning { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 0; }
.tp-dlg select { padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; font: inherit; }
.tp-planlista .tp-plan-knappar { white-space: nowrap; }
.tp-planlista tr[hidden] { display: none; }
.tp-falt input[type="search"] { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; font: inherit; }
.tp-dlg .tp-knapp { border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.tp-dlg a.tp-knapp { display: inline-block; text-decoration: none; }
.tp-dlg a.tp-knapp:not(.tp-v-primar) { color: inherit; }
.tp-dlg .tp-knapp:hover:not(:disabled):not(.tp-v-primar):not(.tp-farlig) { background: var(--tp-accent-ljus); }
.tp-dlg .tp-knapp.tp-farlig:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }
.tp-dlg .tp-knapp.tp-v-primar { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; font-weight: 700; }
.tp-dlg .tp-knapp.tp-v-primar:hover:not(:disabled) { background: var(--tp-accent); color: #fff; filter: brightness(1.12); }
.tp-dlg .tp-knapp:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Info-panel och disclaimer ---------- */
.info-panel { margin-top: 16px; background: #f1f5f9; border-left: 4px solid var(--tp-accent, #008cc2); border-radius: 6px; padding: 12px 16px; }
.info-panel h2 { font-size: 1.05rem; margin: 0; }
.info-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.info-panel > summary::-webkit-details-marker { display: none; }
.info-panel > summary::before { content: '▸'; display: inline-block; color: var(--tp-accent); transition: transform .15s ease; }
.info-panel[open] > summary { margin-bottom: 6px; }
.info-panel[open] > summary::before { transform: rotate(90deg); }
.info-panel ol { margin: 0 0 8px 1.1em; padding: 0; }
.info-panel li { margin-bottom: 4px; }
.info-panel p { margin: 0 0 6px; max-width: 110ch; }
.disclaimer { margin-top: 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 10px 14px; font-size: 13px; }

/* ---------- Smala skärmar: en kolumn ---------- */
/* ---------- Trafikbuffert (taplan_buffert.js) ---------- */
.tp-bf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 14px; align-items: start; }
.tp-bf-bild { align-items: center; min-height: 340px; }
.tp-bf-bild img { display: block; width: 100%; max-width: 480px; height: auto; max-height: 340px; object-fit: contain; }
.tp-bf-val { display: grid; gap: 10px; min-width: 0; }
.tp-bf-val .tp-val button { min-width: 40px; font-size: 15px; }
.tp-bf-bockar { display: grid; gap: 6px; }
.tp-bf-val p { margin: 0; }
@media (max-width: 640px) { .tp-bf { grid-template-columns: 1fr; } .tp-bf-bild { min-height: 200px; } .tp-bf-bild img { max-height: 220px; } }

/* ---------- Skyltvagn (taplan_vagn.js) ---------- */
.tp-vg { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 14px; align-items: start; }
.tp-vg-vanster { display: grid; gap: 8px; }
.tp-vg-hoger { display: grid; gap: 8px; min-width: 0; }
.tp-vg-yta { position: relative; width: 100%; aspect-ratio: 420 / 540; border: 1px solid var(--tp-linje); border-radius: 8px; overflow: hidden; touch-action: none; user-select: none;
  background: linear-gradient(#eef6fb, #eef6fb 92%, #cbd5e1 92%); }
.tp-vg-yta.tp-vg-over { outline: 3px dashed var(--tp-accent); outline-offset: -3px; }
.tp-vg-yta > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tp-vg-mittlinje { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed var(--tp-accent); display: none; pointer-events: none; }
.tp-vg-mittlinje.tp-vg-syns { display: block; }
.tp-vg-mark { position: absolute; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.tp-vg-mark:active { cursor: grabbing; }
.tp-vg-mark img { display: block; width: 100%; height: auto; pointer-events: none; }
.tp-vg-mark.tp-vg-vald { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-vg-handtag { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--tp-accent); cursor: nwse-resize; touch-action: none; }
.tp-vg-kryss { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #b91c1c; color: #fff; font-size: 11px; line-height: 20px; padding: 0; cursor: pointer; }
.tp-vg-valt { display: flex; flex-wrap: wrap; gap: 6px; visibility: hidden; }
.tp-vg-valt.tp-vg-aktiv { visibility: visible; }
.tp-vg-valt .tp-knapp { padding: 4px 8px; font-size: 12px; }
.tp-vg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; max-height: 330px; overflow: auto; padding: 4px; border: 1px solid var(--tp-linje); border-radius: 8px; background: var(--tp-panel); }
.tp-vg-post { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 1px solid transparent; border-radius: 6px; background: #fff; cursor: grab; touch-action: none; font-size: 11px; color: var(--tp-ink); }
.tp-vg-post:hover { border-color: var(--tp-accent); }
.tp-vg-post img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.tp-vg-lista .tp-palett-tom { grid-column: 1 / -1; }
.tp-vg-spoke { position: fixed; transform: translate(-50%, -50%); pointer-events: none; opacity: .85; z-index: 10; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
@media (max-width: 640px) { .tp-vg { grid-template-columns: 1fr; } .tp-vg-lista { max-height: 200px; } }

@media (max-width: 991px) {
  .tp-app, .tp-app.tp-v-stangd, .tp-app.tp-h-stangd { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .tp-kartyta { order: 1; height: 62vh; min-height: 340px; flex: none; }
  .tp-vanster { order: 2; border-right: 0; border-top: 1px solid var(--tp-linje); }
  .tp-hoger { order: 3; border-left: 0; border-top: 1px solid var(--tp-linje); }
  .tp-panelknapp[data-panel] { display: none; }
  .tp-v-stangd .tp-panelinnehall, .tp-h-stangd .tp-panelinnehall { display: block; }
  .tp-vgrupp { border-right: 0; }
  .tp-etapprad { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) { .tp-app { transition: none; } }

/* ---------- Utskrift ---------- */
@media print {
  header, footer, nav, .navbar, .tp-titel, .tp-hjalp, .tp-etapprad, .tp-verktyg, .tp-vanster, .tp-panelknapp, #tp-info,
  .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .tp-status, .tp-inspektor { display: none !important; }
  .tp-sida { padding: 0; max-width: none; font-size: 11px; }
  .tp-utskrift-huvud { display: block; border-bottom: 2px solid #111; margin-bottom: 8px; padding-bottom: 4px; }
  .tp-utskrift-huvud h1 { font-size: 16px; margin: 0; }
  .tp-app, .tp-app.tp-v-stangd, .tp-app.tp-h-stangd { display: block; height: auto; border: 0; overflow: visible; }
  .tp-kartyta { height: 160mm; break-inside: avoid; margin-bottom: 6px; }
  .tp-hoger { display: block; border: 0; background: #fff; break-inside: avoid; }
  .tp-hoger .tp-panelinnehall { display: block !important; overflow: visible; padding: 0; }
  .tp-panelhuvud { border: 0; padding: 0; min-height: 0; }
  .disclaimer { break-inside: avoid; font-size: 10px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}