/* dagvattendamm_stil.css – utseende för verktyget Dagvattendamm (VAKonsult.com).
 * Följer sajtens konventioner (action-bar-färger, info-panel, disclaimer, print) men har egen layout kring en stor karta. */

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

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

/* ---------- Layout ---------- */
.dvd-app {
  display: grid; height: var(--dvd-hojd, 740px); min-height: 560px;
  grid-template-columns: var(--dvd-vb) minmax(0, 1fr) var(--dvd-hb);
  grid-template-rows: auto minmax(0, 1fr) var(--dvd-nb);
  grid-template-areas: "vanster verktyg hoger" "vanster karta hoger" "vanster nere hoger";
  border: 1px solid var(--dvd-linje); border-radius: 8px; overflow: hidden; background: var(--dvd-vit);
  transition: grid-template-columns .2s ease, grid-template-rows .2s ease;
}
.dvd-app.dvd-v-stangd { --dvd-vb: 40px; }
.dvd-app.dvd-h-stangd { --dvd-hb: 40px; }
.dvd-app.dvd-n-stangd { --dvd-nb: 40px; }
.dvd-app.dvd-n-hog { --dvd-nb: 480px; }
.dvd-vanster { grid-area: vanster; border-right: 1px solid var(--dvd-linje); }
.dvd-hoger { grid-area: hoger; border-left: 1px solid var(--dvd-linje); }
.dvd-nere { grid-area: nere; border-top: 1px solid var(--dvd-linje); }
.dvd-verktyg { grid-area: verktyg; }
.dvd-kartyta { grid-area: karta; position: relative; min-height: 0; margin: 0; }
#dvd-karta { position: absolute; inset: 0; }

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

.dvd-flikar { display: flex; gap: 2px; flex-wrap: wrap; }
.dvd-flik { border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--dvd-muted); font-weight: 600; }
.dvd-flik[aria-selected="true"] { background: var(--dvd-accent-ljus); color: var(--dvd-accent); }

/* ---------- Verktygsrad ---------- */
.dvd-verktyg { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; background: var(--dvd-vit); border-bottom: 1px solid var(--dvd-linje); align-items: center; }
.dvd-vgrupp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 10px; border-right: 1px solid var(--dvd-linje); }
.dvd-vgrupp:last-child, .dvd-vgrupp:nth-last-child(2) { border-right: 0; }
.dvd-vgrupp-namn { display: none; }
.dvd-v { border: 1px solid var(--dvd-linje); background: var(--dvd-vit); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; color: var(--dvd-ink); }
.dvd-v:hover:not(:disabled) { background: var(--dvd-accent-ljus); border-color: #b6d0ea; }
.dvd-v[aria-pressed="true"] { background: var(--dvd-accent); border-color: var(--dvd-accent); color: #fff; }
.dvd-v:disabled { opacity: .45; cursor: not-allowed; }
.dvd-v-primar { background: var(--dvd-accent); border-color: var(--dvd-accent); color: #fff; font-weight: 700; }
.dvd-v-primar:hover:not(:disabled) { background: var(--dvd-accent); filter: brightness(1.1); }
.dvd-bock-rad { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; cursor: pointer; }
.dvd-zonrad { flex-basis: 100%; border-right: 0; padding: 6px 0 0; border-top: 1px dashed var(--dvd-linje); }
.dvd-zonrad[hidden] { display: none; }
.dvd-zonknapp { display: inline-flex; align-items: center; gap: 6px; }
.dvd-zonknapp i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.35); display: inline-block; }

/* ---------- Karta ---------- */
.dvd-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; }
.dvd-status:empty { display: none; }
.dvd-status.dvd-varning { background: rgba(180,83,9,.95); }
.dvd-status.dvd-fel { background: rgba(185,28,28,.95); }
.dvd-etikett { font-size: 12px; font-weight: 600; color: #0f172a; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: pre; pointer-events: none; text-align: center; line-height: 1.15; }

/* ---------- Inställningar ---------- */
.dvd-grupp { border: 1px solid var(--dvd-linje); border-radius: 8px; background: var(--dvd-vit); margin-bottom: 8px; }
.dvd-grupp > summary { cursor: pointer; padding: 8px 10px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.dvd-grupp > summary::-webkit-details-marker { display: none; }
.dvd-grupp > summary::after { content: '+'; color: var(--dvd-muted); font-weight: 400; }
.dvd-grupp[open] > summary::after { content: '–'; }
.dvd-grupp-innehall { padding: 2px 10px 10px; display: grid; gap: 10px; }
.dvd-falt { display: grid; gap: 3px; }
.dvd-falt[hidden] { display: none; }
.dvd-falt > label, .dvd-falt > .dvd-etikett-text { font-size: 13px; font-weight: 600; }
.dvd-falt small { color: var(--dvd-muted); font-size: 12px; line-height: 1.3; }
.dvd-input-rad { display: flex; align-items: center; gap: 6px; }
.dvd-falt input[type="text"], .dvd-falt input[type="number"], .dvd-falt input[type="date"], .dvd-falt select {
  width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff;
}
.dvd-input-rad input[type="number"] { flex: 1; }
.dvd-enhet { color: var(--dvd-muted); white-space: nowrap; font-size: 13px; }
.dvd-input-rad select { width: auto; flex: none; }
.dvd-falt input[type="color"] { width: 44px; height: 30px; padding: 1px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; }
.dvd-bock { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: 13px; cursor: pointer; }
.dvd-val { display: flex; flex-wrap: wrap; gap: 4px; }
.dvd-val.dvd-staplad { flex-direction: column; }
.dvd-val button { border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; text-align: left; }
.dvd-val button[aria-checked="true"] { background: var(--dvd-accent-ljus); border-color: var(--dvd-accent); color: var(--dvd-accent); font-weight: 700; }
.dvd-zonfarger { display: grid; gap: 6px; }
.dvd-zonfarg { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dvd-knapp-rad { display: flex; gap: 6px; flex-wrap: wrap; }
.dvd-knapp { border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.dvd-knapp:hover { background: var(--dvd-accent-ljus); }
.dvd-knapp.dvd-farlig:hover { background: #fee2e2; border-color: #fca5a5; }
/* Primär knapp i dialoger: måste ha egen bakgrund, annars blir vit text på vit knapp */
.dvd-knapp.dvd-v-primar { background: var(--dvd-accent); border-color: var(--dvd-accent); color: #fff; font-weight: 700; }
.dvd-knapp.dvd-v-primar:hover { background: var(--dvd-accent); filter: brightness(1.12); }

/* ---------- Teckenförklaring ---------- */
.dvd-lg-rubrik { font-size: 13px; font-weight: 700; margin: 10px 0 6px; }
.dvd-lg-rubrik:first-child { margin-top: 0; }
.dvd-lg-tom { color: var(--dvd-muted); font-size: 13px; }
.dvd-lg-foraldrat { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin-bottom: 8px; }
.dvd-lg-steg { background: #fff; border: 1px solid var(--dvd-linje); border-radius: 8px; margin-bottom: 8px; padding: 6px 8px; }
.dvd-lg-stegrad { display: flex; align-items: center; gap: 6px; }
.dvd-lg-namn { font-weight: 700; flex: 1; min-width: 0; }
.dvd-lg-mangd { color: var(--dvd-muted); font-size: 12px; white-space: nowrap; }
.dvd-ikon { border: 0; background: transparent; padding: 3px; border-radius: 4px; cursor: pointer; color: var(--dvd-muted); display: inline-flex; }
.dvd-ikon:hover { background: var(--dvd-accent-ljus); color: var(--dvd-accent); }
.dvd-ikon[aria-pressed="true"] { color: var(--dvd-accent); }
.dvd-ikon svg { width: 16px; height: 16px; }
.dvd-prick { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #94a3b8; }
.s-gron { background: var(--dvd-gron); } .s-gul { background: #d97706; } .s-rod { background: var(--dvd-rod); } .s-okand { background: #94a3b8; }
.dvd-lg-zoner { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.dvd-lg-zon { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 8px; align-items: start; }
.dvd-sw { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); margin-top: 1px; }
.dvd-sw.dvd-linje { height: 0; border: 0; border-top: 3px dashed #e11d48; margin-top: 8px; border-radius: 0; }
.dvd-sw.dvd-cirkel { border-radius: 50%; }
.dvd-lg-zonnamn { font-size: 13px; }
.dvd-lg-zonmangd { font-size: 12px; color: var(--dvd-muted); white-space: nowrap; }
.dvd-lg-forkl { grid-column: 2 / 4; font-size: 12px; color: var(--dvd-muted); line-height: 1.3; }
.dvd-lg-klick { cursor: pointer; }
.dvd-lg-klick:hover .dvd-lg-zonnamn { text-decoration: underline; }
.dvd-ritrad { display: grid; grid-template-columns: 18px 1fr auto auto auto auto; gap: 4px 6px; align-items: center; margin-bottom: 4px; }
.dvd-ritrad .dvd-lg-zonnamn { font-size: 13px; }
.dvd-ritrad.dvd-dold .dvd-lg-zonnamn, .dvd-ritrad.dvd-dold .dvd-sw { opacity: .45; }
.dvd-ritrad.dvd-dold .dvd-lg-zonnamn { text-decoration: line-through; }
.dvd-oar { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--dvd-linje); font-size: 12px; }
.dvd-oarhuvud { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dvd-oarhuvud strong { flex: 1; }
.dvd-oarrad { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.dvd-oarnamn { flex: 1; color: var(--dvd-muted); }
.dvd-pil { border: 1px solid #c3ccd6; background: #fff; border-radius: 4px; min-width: 24px; height: 24px; line-height: 1; cursor: pointer; padding: 0 5px; }
.dvd-pil:hover:not(:disabled) { background: var(--dvd-accent-ljus); }
.dvd-pil:disabled { opacity: .4; cursor: not-allowed; }
.dvd-print-profiler { display: none; }
.dvd-egenrad { display: grid; grid-template-columns: 34px 46px 1fr auto; gap: 4px; align-items: center; margin-bottom: 6px; }
.dvd-egenrad input[type="text"] { min-width: 0; padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; }
.dvd-egenrad input[type="color"] { width: 30px; height: 26px; padding: 0; border: 1px solid #c3ccd6; border-radius: 4px; }
.dvd-egenrad .dvd-egen-forkl { grid-column: 1 / 5; }

/* ---------- Kontroller ---------- */
.dvd-sammanfatt { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.dvd-mark { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: #fff; }
.dvd-nyckeltal { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13px; background: #fff; border: 1px solid var(--dvd-linje); border-radius: 6px; }
.dvd-nyckeltal td { padding: 4px 8px; border-bottom: 1px solid var(--dvd-linje); }
.dvd-nyckeltal td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dvd-kon-grupp { font-weight: 700; margin: 12px 0 6px; font-size: 13px; }
.dvd-kon { display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 6px 8px; background: #fff; border: 1px solid var(--dvd-linje); border-radius: 6px; margin-bottom: 6px; }
.dvd-kon .dvd-prick { margin-top: 4px; }
.dvd-kon strong { font-size: 13px; display: block; }
.dvd-kon p { margin: 2px 0 0; font-size: 12px; color: #334155; }
.dvd-kon .dvd-kalla { color: var(--dvd-muted); }
.dvd-meddelande { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin-bottom: 6px; }

/* ---------- Profiler ---------- */
.dvd-nere .dvd-panelinnehall { display: flex; flex-direction: column; }
.dvd-profilbox { flex: 1; min-height: 0; }
.dvd-profilbox.dvd-profilhog { flex: none; }
.dvd-nere .dvd-panelinnehall { overflow: auto; }
.dvd-profilsvg { width: 100%; height: 100%; display: block; }
.dvd-tomt { color: var(--dvd-muted); margin: 12px 4px; }
.dvd-anm { color: var(--dvd-muted); font-size: 12px; margin: 4px 0 0; }

/* ---------- Dialog ---------- */
.dvd-dlg { border: 0; border-radius: 10px; padding: 0; width: min(520px, 94vw); box-shadow: 0 20px 60px rgba(15,23,42,.35); color: var(--dvd-ink); }
.dvd-dlg::backdrop { background: rgba(15,23,42,.45); }
.dvd-dlg-inre { padding: 18px 18px 14px; display: grid; gap: 12px; }
.dvd-dlg h2 { font-size: 1.1rem; margin: 0; }
.dvd-dlg p { margin: 0; }
.dvd-dlg input[type="text"] { width: 100%; padding: 8px; border: 1px solid #c3ccd6; border-radius: 6px; }
.dvd-dlg-knappar { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dvd-sparlista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 44vh; overflow: auto; }
.dvd-sparrad { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--dvd-linje); border-radius: 6px; background: #fff; }
.dvd-sparrad strong { overflow-wrap: anywhere; }
.dvd-sparrad .dvd-liten { grid-column: 1; }
.dvd-sparknappar { display: flex; gap: 4px; flex-wrap: wrap; grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.dvd-sparlank { display: flex; gap: 6px; }
.dvd-sparlank input { flex: 1; }

/* ---------- Info-panel och disclaimer ---------- */
.info-panel { margin-top: 16px; background: #f1f5f9; border-left: 4px solid var(--dvd-accent, #0b5ea8); 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) {
  .dvd-app, .dvd-app.dvd-v-stangd, .dvd-app.dvd-h-stangd, .dvd-app.dvd-n-stangd { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .dvd-verktyg { order: 1; } .dvd-kartyta { order: 2; height: 62vh; min-height: 340px; flex: none; }
  .dvd-nere { order: 3; } .dvd-vanster { order: 4; border-right: 0; border-top: 1px solid var(--dvd-linje); } .dvd-hoger { order: 5; border-left: 0; border-top: 1px solid var(--dvd-linje); }
  .dvd-panelknapp { display: none; }
  .dvd-v-stangd .dvd-panelinnehall, .dvd-h-stangd .dvd-panelinnehall, .dvd-n-stangd .dvd-panelinnehall,
  .dvd-h-stangd .dvd-flikar, .dvd-n-stangd .dvd-flikar { display: block; }
  .dvd-vgrupp { border-right: 0; }
  .dvd-nere .dvd-panelinnehall { display: block; }
  .dvd-profilbox { flex: none; } .dvd-profilsvg { height: auto; }
}

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

/* ---------- Utskrift ---------- */
@media print {
  header, footer, nav, .navbar, .dvd-titel, .dvd-verktyg, .dvd-vanster, .dvd-panelknapp, #dvd-info,
  .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .dvd-status, .dvd-flikar, .dvd-nere .dvd-panelhuvud label { display: none !important; }
  .dvd-sida { padding: 0; max-width: none; font-size: 11px; }
  .dvd-utskrift-huvud { display: block; border-bottom: 2px solid #111; margin-bottom: 8px; padding-bottom: 4px; }
  .dvd-utskrift-huvud h1 { font-size: 16px; margin: 0; }
  .dvd-app, .dvd-app.dvd-h-stangd, .dvd-app.dvd-n-stangd, .dvd-app.dvd-v-stangd { display: block; height: auto; border: 0; overflow: visible; }
  .dvd-kartyta { height: 105mm; break-inside: avoid; margin-bottom: 6px; }
  .dvd-hoger { display: block; border: 0; background: #fff; break-inside: avoid; }
  .dvd-nere { display: none !important; }
  .dvd-print-profiler { display: block; }
  .dvd-print-profil { break-inside: avoid; margin: 0 0 8mm; }
  .dvd-print-profil svg { width: 100% !important; height: auto !important; display: block; }
  .dvd-hoger .dvd-panelinnehall, .dvd-nere .dvd-panelinnehall { display: block !important; overflow: visible; padding: 0; }
  #dvd-legend, #dvd-kontroller { display: block !important; }
  #dvd-legend[hidden], #dvd-kontroller[hidden] { display: block !important; }
  .dvd-panelhuvud { border: 0; padding: 0; min-height: 0; }
  .dvd-ikon, .dvd-egenrad button, #dvd-legend .dvd-knapp, .dvd-pil { display: none !important; }
  .dvd-egenrad input[type="text"] { border: 0 !important; background: none !important; padding: 0 !important; }
  .dvd-egenrad input[type="text"]:placeholder-shown { visibility: hidden; }
  .dvd-nere .dvd-panelinnehall { display: block !important; }
  .dvd-profilbox { flex: none; } .dvd-profilsvg { height: auto; }
  .dvd-lg-steg, .dvd-kon { break-inside: avoid; }
  .disclaimer { break-inside: avoid; font-size: 10px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}