/* va-ritning_stil.css – utseende för verktyget VA-ritning (VAKonsult.com).
 * Samma layout och komponenter som taplan_stil.css (verktygsrad, vänsterpalett, rityta, höger-lista, dialoger,
 * info-panel, disclaimer), med vr-prefix. */

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

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

/* ---------- Verktygsrad ---------- */
.vr-verktyg { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; background: var(--vr-vit); border: 1px solid var(--vr-linje); border-radius: 8px; align-items: center; margin-bottom: 8px; position: relative; z-index: 3; }
.vr-vgrupp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 10px; border-right: 1px solid var(--vr-linje); position: relative; }
.vr-vgrupp:last-child { border-right: 0; }
.vr-v { border: 1px solid var(--vr-linje); background: var(--vr-vit); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; color: var(--vr-ink); display: inline-flex; align-items: center; gap: 5px; }
.vr-v:hover:not(:disabled) { background: var(--vr-accent-ljus); border-color: #a9d6ea; }
.vr-v[aria-pressed="true"], .vr-v.vr-aktiv { background: var(--vr-accent); border-color: var(--vr-accent); color: #fff; }
.vr-v:disabled { opacity: .45; cursor: not-allowed; }
.vr-v-primar { background: var(--vr-accent); border-color: var(--vr-accent); color: #fff; font-weight: 700; }
.vr-v-primar:hover:not(:disabled) { background: var(--vr-accent); filter: brightness(1.1); }
.vr-dropdown { position: relative; }
.vr-dropdown-meny { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--vr-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; }
.vr-dropdown-meny[hidden] { display: none; }
.vr-dropdown-meny .vr-v { text-align: left; border-color: transparent; justify-content: flex-start; }
.vr-dropdown-meny .vr-v[aria-pressed="true"] { color: #fff; }

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

/* ---------- Layout ---------- */
.vr-app {
  display: grid; height: max(560px, calc(100vh - 250px)); min-height: 520px;
  grid-template-columns: var(--vr-vb) minmax(0, 1fr) var(--vr-hb);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "vanster rityta hoger";
  border: 1px solid var(--vr-linje); border-radius: 8px; overflow: hidden; background: var(--vr-vit);
  transition: grid-template-columns .2s ease;
}
.vr-app.vr-v-stangd { --vr-vb: 44px; }
.vr-app.vr-h-stangd { --vr-hb: 44px; }
.vr-vanster { grid-area: vanster; border-right: 1px solid var(--vr-linje); }
.vr-hoger { grid-area: hoger; border-left: 1px solid var(--vr-linje); }
.vr-rityta { grid-area: rityta; position: relative; min-height: 0; margin: 0; overflow: hidden; }

/* ---------- Paneler ---------- */
.vr-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--vr-panel); overflow: hidden; }
.vr-panelhuvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--vr-linje); background: var(--vr-vit); min-height: 40px; flex: none; }
.vr-panelinnehall { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 14px; }
.vr-panelknapp { border: 1px solid var(--vr-linje); background: var(--vr-vit); border-radius: 6px; width: 28px; height: 28px; line-height: 1; cursor: pointer; color: var(--vr-muted); flex: none; }
.vr-panelknapp:hover { background: var(--vr-accent-ljus); }
.vr-v-stangd .vr-vanster .vr-panelinnehall, .vr-v-stangd .vr-vanster .vr-panelhuvud strong,
.vr-h-stangd .vr-hoger .vr-panelinnehall, .vr-h-stangd .vr-hoger .vr-panelhuvud strong { display: none; }
.vr-v-stangd .vr-vanster .vr-panelhuvud, .vr-h-stangd .vr-hoger .vr-panelhuvud { justify-content: center; padding: 6px 0; }

/* ---------- Palett ---------- */
.vr-palett-sok { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; margin-bottom: 8px; }
.vr-palett-grupp { border: 1px solid var(--vr-linje); border-radius: 8px; background: var(--vr-vit); margin-bottom: 8px; }
.vr-palett-grupp > summary { cursor: pointer; padding: 8px 10px 8px 6px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 6px; }
.vr-palett-grupp > summary::-webkit-details-marker { display: none; }
.vr-palett-grupp > summary::after { content: '+'; color: var(--vr-muted); font-weight: 400; margin-left: 6px; }
.vr-palett-grupp[open] > summary::after { content: '–'; }
.vr-palett-egna > summary { padding-left: 10px; }
.vr-palett-badge { font-size: 11px; color: var(--vr-muted); font-weight: 400; margin-left: auto; }
.vr-palett-under { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vr-muted); padding: 8px 10px 2px; }
.vr-palett-lista { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 2px 6px 6px; }
.vr-palett-post { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; cursor: pointer; background: none; text-align: left; width: 100%; color: var(--vr-ink); }
.vr-palett-post:hover { background: var(--vr-accent-ljus); }
.vr-palett-post.vr-vald-i-palett { border-color: var(--vr-accent); background: var(--vr-accent-ljus); }
.vr-palett-post .vr-ikon { flex: none; }
.vr-palett-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.vr-palett-kod { font-weight: 700; font-size: 12px; }
.vr-palett-namn { font-size: 12px; color: var(--vr-muted); line-height: 1.25; overflow-wrap: anywhere; }
.vr-ovanlig { opacity: .75; }
.vr-palett-egen { display: flex; align-items: center; gap: 2px; }
.vr-palett-egna .vr-palett-lista > .vr-knapp { margin-top: 6px; }
.vr-palett-egna .vr-palett-lista > .vr-liten { margin: 4px 2px 0; }

/* grip-handtag (FontAwesome grip-vertical) och dra-och-släpp */
.vr-grip { color: #94a3b8; cursor: grab; padding: 0 3px; flex: none; line-height: 1; }
.vr-grip:hover { color: var(--vr-ink); }
.vr-slapp-fore { box-shadow: 0 -3px 0 var(--vr-accent); }
.vr-slapp-efter { box-shadow: 0 3px 0 var(--vr-accent); }
.vr-drar { opacity: .5; }
.vr-gruppfarg { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------- Rityta ---------- */
.vr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.vr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.vr-rityta.vr-slapp-fil::after { content: 'Släpp filen för att importera den'; position: absolute; inset: 8px; border: 3px dashed var(--vr-accent); border-radius: 10px; background: rgba(227,243,250,.75); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--vr-accent); z-index: 9; pointer-events: none; }
.vr-svg.vr-panorerar { cursor: grabbing; }
.vr-svg.vr-verktyg-ledning, .vr-svg.vr-verktyg-punkt, .vr-svg.vr-verktyg-linje, .vr-svg.vr-verktyg-pil, .vr-svg.vr-verktyg-matt, .vr-svg.vr-verktyg-text, .vr-svg.vr-verktyg-placeraImport { cursor: crosshair; }
.vr-svg.vr-verktyg-markera .vr-obj { cursor: pointer; }
.vr-import-vald, .vr-import-hover, .vr-import-framhavd { fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.vr-import-vald { stroke: var(--vr-accent); stroke-width: 6px; stroke-opacity: .45; }
.vr-import-hover { stroke: var(--vr-accent); stroke-width: 5px; stroke-opacity: .22; }
.vr-import-framhavd { stroke: #facc15; stroke-width: 9px; stroke-opacity: .7; }
.vr-importtips { font: 600 11px Arial, Helvetica, sans-serif; fill: #334155; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.vr-importram { fill: rgba(0,140,194,.06); stroke: var(--vr-accent); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.vr-sym * { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
.vr-sym text { stroke: none; }
.vr-sym .vr-sym-tjock { stroke-width: 2.4px; }
.vr-sym .vr-sym-streckad { stroke-dasharray: 3 2; }
.vr-traff { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; }
.vr-traff-yta { fill: transparent; stroke: none; pointer-events: all; }
.vr-ledning.vr-hover .vr-traff, .vr-ritobj.vr-hover .vr-traff { stroke: rgba(0,140,194,.16); }
.vr-valhalo { fill: none; stroke: var(--vr-accent); stroke-opacity: .28; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.vr-framhavd { fill: none; stroke: #facc15; stroke-opacity: .75; stroke-width: 12px; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.vr-framhavd-ring { fill: none; stroke: #facc15; stroke-width: 5px; stroke-opacity: .85; pointer-events: none; }
.vr-valring { fill: none; stroke: var(--vr-accent); stroke-width: 2.5px; pointer-events: none; }
.vr-hoverring { fill: none; stroke: var(--vr-accent); stroke-width: 2px; stroke-dasharray: 4 3; pointer-events: none; }
.vr-etikett { font: 600 11px Arial, Helvetica, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.vr-fritext { font-family: Arial, Helvetica, sans-serif; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.vr-fritext.vr-hover { text-decoration: underline; }
.vr-vald-text { stroke: #bae6fd; stroke-width: 6px; }
.vr-lasikon path { stroke: #475569; stroke-width: 1.6; }
.vr-lasikon rect { fill: #475569; }
.vr-lasikon { pointer-events: none; }
.vr-grepp { fill: #fff; stroke: var(--vr-accent); stroke-width: 2; cursor: move; }
.vr-grepp:hover { fill: var(--vr-accent-ljus); }
.vr-grepp-ande { stroke-width: 2.5; }
.vr-grepp-fast { fill: var(--vr-accent); }
.vr-grepp-mitt { cursor: copy; }
.vr-grepp-mitt circle { fill: #fff; stroke: #94a3b8; stroke-width: 1.5; }
.vr-grepp-mitt path { stroke: #64748b; stroke-width: 1.5; }
.vr-grepp-mitt:hover circle { stroke: var(--vr-accent); fill: var(--vr-accent-ljus); }
.vr-ritar { fill: none; stroke-width: 2.4; stroke-linejoin: round; opacity: .8; pointer-events: none; }
.vr-ritpunkt { fill: #fff; stroke: #0f172a; stroke-width: 1.5; pointer-events: none; }
.vr-ritlangd { font: 600 12px Arial, Helvetica, sans-serif; fill: #0f172a; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.vr-snapring { fill: rgba(250,204,21,.25); stroke: #ca8a04; stroke-width: 2; pointer-events: none; }
.vr-snaptext { font: 600 11px Arial, Helvetica, sans-serif; fill: #854d0e; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.vr-band { fill: rgba(0,140,194,.08); stroke: var(--vr-accent); stroke-dasharray: 4 3; pointer-events: none; }
.vr-mattlinje { fill: none; stroke: #7c3aed; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.vr-mattpunkt { fill: #fff; stroke: #7c3aed; stroke-width: 2; pointer-events: none; }

/* överlägg på ritytan */
.vr-status { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); max-width: min(720px, 90%); background: rgba(30,41,59,.94); color: #fff; padding: 7px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; z-index: 6; }
.vr-status:empty { display: none; }
.vr-status.vr-varning { background: rgba(180,83,9,.96); }
.vr-status.vr-fel { background: rgba(185,28,28,.96); }
.vr-koord { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: var(--vr-muted); background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px; pointer-events: none; font-variant-numeric: tabular-nums; z-index: 4; }
.vr-koord:empty { display: none; }
.vr-skala { position: absolute; right: 10px; bottom: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vr-ink); background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px; pointer-events: none; z-index: 4; }
.vr-skalstock { height: 6px; border: 1.5px solid var(--vr-ink); border-top: 0; }
.vr-skalatal { color: var(--vr-muted); }
.vr-matt { position: absolute; left: 10px; top: 10px; z-index: 6; max-width: min(460px, 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; }
.vr-matt[hidden] { display: none; }
.vr-ritbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 7; background: #fff; border: 1px solid var(--vr-linje); border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.16); padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.vr-ritbar[hidden] { display: none; }
.vr-ritbar label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vr-ritbar input[type="text"], .vr-ritbar select { padding: 3px 5px; border: 1px solid #c3ccd6; border-radius: 5px; max-width: 16em; }
.vr-ritbar input[type="color"] { width: 32px; height: 24px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 5px; }
.vr-rb-langd { font-weight: 700; color: var(--vr-accent); font-variant-numeric: tabular-nums; }
.vr-ritbar .vr-knapp { margin-left: auto; }

/* ---------- Högerpanelen: flikar Egenskaper | Grupper ---------- */
.vr-flikar { display: flex; gap: 2px; background: #f1f5f9; border-radius: 7px; padding: 2px; }
.vr-flik { border: 0; background: transparent; border-radius: 5px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--vr-muted); cursor: pointer; }
.vr-flik[aria-selected="true"] { background: #fff; color: var(--vr-ink); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.vr-flik:hover:not([aria-selected="true"]) { color: var(--vr-ink); }
.vr-h-stangd .vr-hoger .vr-flikar { display: none; }
.vr-panelinnehall[hidden] { display: none; }

/* ---------- Egenskapspanel ---------- */
.vr-egenskaper { padding: 0; background: #fff; }
.vr-p-tom { padding: 16px 14px; color: var(--vr-muted); font-size: 13px; }
.vr-p-huvud { display: flex; align-items: center; gap: 10px; padding: 10px 8px 8px 12px; border-bottom: 1px solid var(--vr-linje); position: sticky; top: 0; background: #fff; z-index: 1; }
.vr-p-ikon { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--vr-muted); }
.vr-p-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vr-p-titel strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.vr-p-stang { border: 0; background: transparent; cursor: pointer; color: var(--vr-muted); border-radius: 6px; width: 28px; height: 28px; flex: none; }
.vr-p-stang:hover { background: #f1f5f9; color: var(--vr-ink); }
.vr-p-innehall { padding: 10px 12px 16px; display: grid; gap: 10px; }
.vr-p-falt { display: grid; gap: 3px; min-width: 0; }
.vr-p-falt > label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--vr-ink); }
.vr-p-falt input[type="text"], .vr-p-falt select, .vr-p-falt textarea { width: 100%; padding: 5px 7px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; font-weight: 400; font-size: 13px; }
.vr-p-falt input:disabled, .vr-p-falt select:disabled, .vr-p-falt textarea:disabled { background: #f1f5f9; color: var(--vr-muted); }
.vr-p-falt input[type="color"] { width: 44px; height: 30px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.vr-p-falt input[type="range"] { width: 100%; }
.vr-p-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; align-items: end; }
.vr-p-grupp { border-top: 1px solid var(--vr-linje); padding-top: 8px; display: grid; gap: 6px; }
.vr-p-rubrik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vr-muted); }
.vr-p-etikett { font-size: 12px; font-weight: 600; }
.vr-p-varde { font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.vr-p-info { background: var(--vr-accent-ljus); border-left: 3px solid var(--vr-accent); border-radius: 4px; padding: 6px 8px; font-size: 12px; margin: 0; }
.vr-p-varning { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 0; color: #7c2d12; }
.vr-p-varning-liten { color: var(--vr-gul); font-weight: 600; }
.vr-p-knappar { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-p-bred { width: 100%; }
.vr-namnrad { display: flex; align-items: stretch; }
.vr-kodprefix { display: flex; align-items: center; padding: 0 8px; background: #f1f5f9; border: 1px solid #c3ccd6; border-right: 0; border-radius: 6px 0 0 6px; font-weight: 700; font-size: 13px; }
.vr-namnrad input[type="text"] { border-radius: 0 6px 6px 0; }
.vr-vg { width: 100%; border-collapse: collapse; font-size: 12px; }
.vr-vg td { border-top: 1px solid var(--vr-linje); padding: 4px 3px; vertical-align: middle; }
.vr-vg td:nth-child(2) { width: 6.5em; }
.vr-vg td:nth-child(3) { width: 28px; }
.vr-vg input { width: 100%; padding: 3px 5px; border: 1px solid #c3ccd6; border-radius: 5px; font-size: 12px; }
.vr-vg tr:hover td, .vr-vg tr:focus-within td { background: #fefce8; }
.vr-riktning { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; background: #e2e8f0; border-radius: 3px; padding: 0 3px; }
.vr-linjeprick { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.vr-bock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; font-weight: 400; }

/* knappar */
.vr-knapp { border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-size: 13px; color: var(--vr-ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.vr-knapp:hover:not(:disabled) { background: var(--vr-accent-ljus); }
.vr-knapp:disabled { opacity: .5; cursor: not-allowed; }
.vr-knapp.vr-farlig:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }
.vr-knapp.vr-primar { background: var(--vr-accent); border-color: var(--vr-accent); color: #fff; font-weight: 700; }
.vr-knapp.vr-primar:hover:not(:disabled) { background: var(--vr-accent); filter: brightness(1.1); }
.vr-knapp-liten { padding: 3px 8px; font-size: 12px; }
.vr-ikonknapp { border: 0; background: transparent; cursor: pointer; color: var(--vr-accent); border-radius: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12px; }
.vr-ikonknapp:hover:not(:disabled) { background: var(--vr-accent-ljus); }
.vr-ikonknapp.vr-av { color: #94a3b8; }
.vr-ikonknapp.vr-pa { color: var(--vr-gul); }
.vr-ikonknapp.vr-farlig { color: #94a3b8; }
.vr-ikonknapp.vr-farlig:hover:not(:disabled) { background: #fee2e2; color: var(--vr-rod); }
.vr-ikonknapp:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Höger-lista ---------- */
.vr-lista-huvud { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.vr-lgrupp { border: 1px solid var(--vr-linje); border-radius: 8px; background: var(--vr-vit); margin-bottom: 6px; }
.vr-grupprad { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 2px; }
.vr-vaxla { border: 0; background: transparent; cursor: pointer; color: var(--vr-muted); width: 18px; padding: 0; font-size: 12px; flex: none; }
.vr-gruppnamn { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.vr-antal { font-size: 11px; color: var(--vr-muted); background: #f1f5f9; border-radius: 999px; padding: 0 6px; flex: none; }
.vr-gruppobjekt { border-top: 1px solid var(--vr-linje); padding: 2px 0; }
.vr-objrad { display: flex; align-items: center; gap: 3px; padding: 1px 4px 1px 22px; font-size: 12px; }
.vr-objrad:hover { background: #f8fafc; }
.vr-objrad.vr-vald { background: var(--vr-accent-ljus); }
.vr-radikonruta { width: 20px; display: flex; justify-content: center; flex: none; color: var(--vr-muted); }
.vr-radnamn { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; cursor: pointer; padding: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vr-ink); font-size: 12px; }
.vr-radnamn:hover { text-decoration: underline; }
.vr-radinfo { color: var(--vr-muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr-radvarning { color: var(--vr-gul); font-weight: 700; flex: none; }
.vr-dimmad > .vr-grupprad > :not(.vr-ikonknapp):not(.vr-grip), .vr-objrad.vr-dimmad > :not(.vr-ikonknapp) { opacity: .45; }
.vr-mangd { margin-top: 12px; border-top: 1px solid var(--vr-linje); padding-top: 8px; }
.vr-mangd-rubrik { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.vr-mangdtabell { width: 100%; border-collapse: collapse; font-size: 12px; }
.vr-mangdtabell td { padding: 3px 3px; border-top: 1px solid var(--vr-linje); vertical-align: top; }
.vr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Importgrupp i listan ---------- */
.vr-importinfo { margin: 4px 8px 4px 24px; }
.vr-lagerrad { display: flex; align-items: center; gap: 3px; padding: 1px 4px 1px 6px; font-size: 12px; }
.vr-lagerrad:hover { background: #f8fafc; }
.vr-lagernamn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-lagerobjekt .vr-objrad { padding-left: 40px; }

/* ---------- Import och kodmappning ---------- */
#vr-imp-enhet { max-width: 16em; }
.vr-imp-koord { font-size: 13px; background: #f8fafc; border: 1px solid var(--vr-linje); border-radius: 6px; padding: 7px 10px; }
.vr-mapp-rulla { max-height: 46vh; overflow: auto; border: 1px solid var(--vr-linje); border-radius: 8px; }
.vr-mapp { width: 100%; border-collapse: collapse; font-size: 13px; }
.vr-mapp th { position: sticky; top: 0; background: #f1f5f9; text-align: left; font-size: 12px; padding: 5px 6px; z-index: 1; }
.vr-mapp td { padding: 4px 6px; vertical-align: top; }
.vr-mapp tr[data-kod] td { border-top: 1px solid var(--vr-linje); }
.vr-mapp input[type="text"], .vr-mapp select { width: 100%; padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 5px; background: #fff; font-size: 13px; }
.vr-mapp select:disabled { background: #f1f5f9; color: var(--vr-muted); }
.vr-mapp input[type="color"] { width: 36px; height: 28px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 5px; }
.vr-mapp input[type="color"]:disabled { opacity: .35; }
.vr-mapp-kod { white-space: nowrap; }
.vr-mapp-noter td { padding-top: 0; }
.vr-mapp-noter p { margin: 0 0 3px; font-size: 12px; }
.vr-mapp-varning { color: #9a3412; }
.vr-mapp-info { color: var(--vr-muted); }
.vr-dlg.vr-bred .vr-mapp th:nth-child(2) { width: 24%; }
.vr-dlg.vr-bred .vr-mapp th:nth-child(3) { width: 34%; }

/* ---------- Export ---------- */
#vr-exp-dxf { display: grid; gap: 6px; }
#vr-exp-dxf > .vr-bock { display: flex; }
.vr-exp-lista { margin: 4px 0 0 1.1em; padding: 0; }
.vr-exp-lista li { margin-bottom: 4px; }
.vr-exp-lista .vr-liten { display: block; }

/* ---------- Kombolista (material, dimension) ---------- */
.vr-kombo { position: fixed; z-index: 1000; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--vr-line, #cbd5e1); border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: 4px 0; font-size: 13px; }
.vr-kombo-rubrik { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vr-muted, #64748b); padding: 6px 10px 2px; }
.vr-kombo-val { padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.vr-kombo-val:hover, .vr-kombo-val.vr-aktiv { background: #e0f2fe; }

/* ---------- Panel: lutning, fakta, rotation ---------- */
.vr-p-lutning { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; }
.vr-p-lutning strong { font-size: 18px; }
.vr-p-lutning.vr-fel { background: #fef2f2; border-color: #fecaca; }
.vr-p-fakta { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 6px; }
.vr-p-fakta th { text-align: left; font-weight: 400; color: var(--vr-muted, #64748b); padding: 2px 8px 2px 0; width: 45%; }
.vr-p-fakta td { padding: 2px 0; }
.vr-lasfalt { background: #f1f5f9; color: #334155; }
.vr-rotrad { display: flex; gap: 8px; align-items: center; }
.vr-rotrad input[type=range] { flex: 1; }

/* ---------- Materiallista ---------- */
.vr-mangd-filter { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.vr-mangd-filter fieldset { flex: 1 1 260px; }
.vr-mangdlista { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.vr-mangdlista th, .vr-mangdlista td { border-bottom: 1px solid #e2e8f0; padding: 4px 6px; text-align: left; }
.vr-mangdlista th { font-size: 11px; font-weight: 700; color: var(--vr-muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }
.vr-mangdlista .vr-num { text-align: right; white-space: nowrap; }
.vr-mangdlista tfoot td { font-weight: 700; border-top: 2px solid #cbd5e1; border-bottom: 0; }
#vr-mangd-innehall h3 { font-size: 15px; margin: 14px 0 4px; }
.vr-mangd .vr-knapp-liten { margin-top: 6px; }

/* ---------- Spara och Mina ritningar ---------- */
.vr-ritningsrad { margin: 4px 0 0; font-size: 13px; min-height: 1.2em; }
.vr-ritningsrad .vr-liten { margin-left: 4px; }
.vr-osparat { color: #c2410c; font-weight: 600; margin-left: 8px; }
.vr-btn.vr-osparad { box-shadow: 0 0 0 2px #f97316; }
.vr-ritningslista { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.vr-ritningslista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #e2e8f0; }
.vr-ritningslista li > div { display: flex; flex-direction: column; min-width: 0; }
.vr-ritningslista strong { overflow: hidden; text-overflow: ellipsis; }
.vr-ritningsknappar { display: flex; align-items: center; gap: 4px; flex: none; }
.vr-markering { display: inline-block; align-self: flex-start; font-size: 11px; background: #dcfce7; color: #166534; border-radius: 3px; padding: 0 4px; }
.vr-lista-punkter { margin: 6px 0 10px 1.2em; padding: 0; }
.vr-dlg-knappar a.vr-knapp { text-decoration: none; }

/* ---------- Bakgrundskarta ---------- */
.vr-karta { position: absolute; inset: 0; background: #fff; pointer-events: none; }
.vr-karta[hidden] { display: none; }
.vr-kartkalla { position: absolute; right: 6px; top: 6px; z-index: 5; font-size: 10px; color: #334155; background: rgba(255,255,255,.8); padding: 1px 5px; border-radius: 3px; }
.vr-kartkalla[hidden] { display: none; }
.vr-kartkalla a { color: inherit; }
.vr-karta-meny { width: 320px; padding: 10px 12px; gap: 8px; }
.vr-karta-meny .vr-falt { margin: 0; }
.vr-karta-meny select, .vr-karta-meny input[type=search] { width: 100%; }
.vr-sokrad { display: flex; gap: 6px; }
.vr-sokresultat { list-style: none; margin: 4px 0 0; padding: 0; max-height: 180px; overflow-y: auto; }
.vr-sokresultat li { margin: 0; }
.vr-sokval { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #e2e8f0; padding: 5px 2px; font-size: 12px; cursor: pointer; color: var(--vr-ink, #0f172a); }
.vr-sokval:hover { background: #e0f2fe; }

/* ---------- Vyer: profil och 3D ---------- */
.vr-sida[data-vy="profil"] .vr-bara-plan, .vr-sida[data-vy="3d"] .vr-bara-plan { display: none !important; }
.vr-app.vr-utan-vanster { --vr-vb: 0px; }
.vr-app.vr-utan-vanster .vr-vanster { display: none; }
.vr-profil, .vr-3d { position: absolute; inset: 0; background: #fff; z-index: 5; }
.vr-profil[hidden], .vr-3d[hidden] { display: none; }
.vr-profil { overflow: auto; padding: 10px 14px 24px; }
.vr-prof-verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 10px; }
.vr-prof-fran { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.vr-prof-fran label { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.vr-prof-tom { max-width: 760px; font-size: 14px; }
.vr-prof-stracka { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px 10px; margin-bottom: 16px; }
.vr-prof-huvud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; }
.vr-prof-namnfalt { font-weight: 700; font-size: 15px; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; min-width: 200px; }
.vr-prof-namnfalt:hover, .vr-prof-namnfalt:focus { border-color: #cbd5e1; }
.vr-prof-graf { overflow-x: auto; }
.vr-prof-svg { display: block; font-family: Arial, Helvetica, sans-serif; }
.vr-prof-rut { stroke: #eef2f6; stroke-width: 1; }
.vr-prof-axel { font-size: 10px; fill: #64748b; }
.vr-prof-mark { fill: none; stroke: #92400e; stroke-width: 1.4; stroke-dasharray: 6 4; }
.vr-prof-etikett { font-size: 10.5px; fill: #1e293b; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.vr-prof-etikett.vr-fel { fill: #b91c1c; }
.vr-prof-nod { font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.vr-prof-obj { cursor: pointer; }
.vr-prof-obj:hover { filter: drop-shadow(0 0 2px rgba(14,116,144,.8)); }
.vr-prof-tabeller { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.vr-prof-tabell { border-collapse: collapse; font-size: 12.5px; }
.vr-prof-tabell caption { caption-side: top; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vr-muted, #64748b); padding-bottom: 2px; }
.vr-prof-tabell th, .vr-prof-tabell td { border-bottom: 1px solid #e2e8f0; padding: 3px 6px; text-align: left; white-space: nowrap; }
.vr-prof-tabell th { font-size: 11px; color: var(--vr-muted, #64748b); font-weight: 700; }
.vr-prof-tabell input { font-size: 12.5px; padding: 2px 4px; }
.vr-prof-tabell .vr-num { text-align: right; }
.vr-prof-tabell .vr-fel { color: #b91c1c; font-weight: 700; }
.vr-3d { display: flex; flex-direction: column; }
.vr-3d-duk { position: relative; flex: 1; min-height: 0; }
.vr-3d-duk canvas { display: block; touch-action: none; }
.vr-3d-kontroller { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 13px; max-width: calc(100% - 20px); }
.vr-3d-kontroller label { display: flex; align-items: center; gap: 4px; }
.vr-3d-info { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #334155; background: rgba(255,255,255,.9); border-radius: 4px; padding: 2px 6px; max-width: calc(100% - 20px); }

/* ---------- Projektinfo och PDF ---------- */
.vr-logo-ruta { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px 10px; margin-top: 6px; }
.vr-logo-ruta legend { font-weight: 700; padding: 0 4px; }
.vr-logo-under { margin: 2px 0 8px 1.6em; display: flex; flex-direction: column; gap: 3px; }
.vr-logo-under input[type=text] { width: 100%; }
.vr-rek { display: inline-block; font-size: 11px; background: #dcfce7; color: #166534; border-radius: 3px; padding: 0 5px; margin-left: 4px; }
.vr-logo-forhands { min-height: 40px; padding: 6px; border: 1px dashed #cbd5e1; border-radius: 6px; font-size: 12px; color: #64748b; display: flex; align-items: center; }
.vr-pdf-norr { border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; padding: 8px 10px; }
.vr-pdf-norr .vr-rad { align-items: center; }
#vr-exp-pdf .vr-rad { display: flex; flex-wrap: wrap; gap: 8px 14px; }

/* ---------- Dialog ---------- */
.vr-dlg { border: 0; border-radius: 10px; padding: 0; width: min(500px, 94vw); box-shadow: 0 20px 60px rgba(15,23,42,.35); color: var(--vr-ink); }
.vr-dlg.vr-bred { width: min(860px, 96vw); }
.vr-dlg::backdrop { background: rgba(15,23,42,.45); }
.vr-dlg-inre { padding: 18px 18px 14px; display: grid; gap: 12px; }
.vr-dlg h2 { font-size: 1.1rem; margin: 0; }
.vr-dlg p { margin: 0; }
.vr-dlg-knappar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.vr-dlg-knappar > span { display: flex; gap: 8px; flex-wrap: wrap; }
.vr-falt { display: grid; gap: 4px; min-width: 0; }
.vr-falt > label, .vr-falt > legend { font-size: 13px; font-weight: 600; }
.vr-falt input[type="text"], .vr-falt input[type="number"], .vr-falt select, .vr-falt textarea { width: 100%; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.vr-falt input[type="color"] { width: 52px; height: 34px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.vr-falt[hidden] { display: none; }
.vr-rad { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.vr-vaxa { flex: 1; }
.vr-radiorad { border: 1px solid var(--vr-linje); border-radius: 8px; padding: 6px 10px 8px; margin: 0; display: grid; gap: 4px; }
.vr-forhandsvisning { display: flex; justify-content: center; padding: 8px; background: repeating-conic-gradient(#eef2f6 0 25%, #f8fafc 0 50%) 0 0 / 16px 16px; border: 1px solid var(--vr-linje); border-radius: 8px; }
.vr-dlg .vr-varning { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 0; }
.vr-kodlista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; max-height: 50vh; overflow: auto; }
.vr-kodval { display: flex; align-items: center; gap: 8px; border: 1px solid var(--vr-linje); background: #fff; border-radius: 6px; padding: 5px 8px; cursor: pointer; text-align: left; font-size: 13px; color: var(--vr-ink); }
.vr-kodval:hover { background: var(--vr-accent-ljus); }
.vr-kodval.vr-vald-i-palett { border-color: var(--vr-accent); background: var(--vr-accent-ljus); }

/* ---------- Info-panel och disclaimer (samma som övriga verktyg) ---------- */
.info-panel { margin-top: 16px; background: #f1f5f9; border-left: 4px solid var(--vr-accent, #008cc2); border-radius: 6px; padding: 12px 16px; }
.info-panel h2 { font-size: 1.05rem; margin: 0 0 6px; }
.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 ---------- */
@media (max-width: 991px) {
  .vr-app, .vr-app.vr-v-stangd, .vr-app.vr-h-stangd { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .vr-rityta { order: 1; height: 64vh; min-height: 360px; flex: none; }
  .vr-vanster { order: 2; border-right: 0; border-top: 1px solid var(--vr-linje); max-height: 60vh; }
  .vr-hoger { order: 3; border-left: 0; border-top: 1px solid var(--vr-linje); max-height: 70vh; }
  .vr-panelknapp[data-panel] { display: none; }
  .vr-v-stangd .vr-panelinnehall, .vr-h-stangd .vr-panelinnehall { display: block; }
  .vr-vgrupp { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .vr-app { transition: none; } }