/* LEDGER, analysen (P-206 til P-211). Scopet til #view-vederlag og bygger paa
   Ledgers egne tokens og klasser (vl-kort, vl-tabel, vl-skift ...), som
   advisor-danske.html definerer paa viewet. Nye elementer hedder vlx-. */
#view-vederlag .vlx-hoved { display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; }
#view-vederlag .vlx-aar { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-soft); }
#view-vederlag .vlx-aar select, #view-vederlag .vlx-felt select, #view-vederlag .vlx-felt input {
  font:inherit; font-size:13.5px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); min-height:40px; min-width:0;
}
#view-vederlag .vlx-felt input:focus, #view-vederlag .vlx-felt select:focus { outline:none; border-color:var(--maerke); box-shadow:0 0 0 3px rgba(0,55,85,.1); }
#view-vederlag .vlx-vaerktoej { margin-bottom:14px; }
#view-vederlag .vlx-raekke { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
#view-vederlag .vlx-felt { display:flex; flex-direction:column; gap:4px; min-width:0; }
#view-vederlag .vlx-felt > span { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
#view-vederlag .vlx-soeg { flex:1 1 220px; }
#view-vederlag .vlx-skift { align-self:flex-end; margin-bottom:3px; }
#view-vederlag .vlx-forkl { font-size:12.5px; color:var(--ink-soft); margin:10px 0 0; line-height:1.5; }
#view-vederlag .vlx-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px; }
#view-vederlag .vlx-chip { font:inherit; font-size:12px; font-weight:600; border:1px solid var(--maerke); background:#e6f0f5; color:var(--maerke); border-radius:99px; padding:5px 11px; cursor:pointer; min-height:30px; }
#view-vederlag .vlx-link { background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:#0a6e72; cursor:pointer; }
#view-vederlag .vlx-link:hover { text-decoration:underline; }
#view-vederlag .vlx-sum { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 2px 12px; font-size:14px; color:var(--ink-soft); }
#view-vederlag .vlx-sum b { color:var(--ink); font-family:var(--tal-font); }
#view-vederlag .vlx-sum-h { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#view-vederlag .vl-kort + .vl-kort { margin-top:14px; }
#view-vederlag .vlx-pivot td, #view-vederlag .vlx-pivot th, #view-vederlag .vlx-linjer td { white-space:nowrap; }
#view-vederlag .vlx-pivot td.tal, #view-vederlag .vlx-linjer td.tal, #view-vederlag .vl-tabel td.tal { font-family:var(--tal-font); font-variant-numeric:tabular-nums; font-size:13px; }
#view-vederlag .vl-tabel .r { text-align:right; }
#view-vederlag .vl-tabel td.neg { color:var(--brick); }
#view-vederlag .vl-tabel td.pos { color:var(--positive); }
#view-vederlag .vl-tabel td .u, #view-vederlag .vl-tabel td.u { color:var(--ink-faint); font-size:12px; }
#view-vederlag .vlx-pivot td.hv .u { display:block; }
#view-vederlag .vlx-klik { cursor:pointer; transition:background .12s; }
#view-vederlag .vlx-klik:hover, #view-vederlag .vlx-klik:focus-visible { background:#f4f7f9; outline:none; }
#view-vederlag .vlx-ukendt td { background:#fdf6f4; }
#view-vederlag .vl-tabel.vlx-smal { min-width:0; }
#view-vederlag .vl-tabel.vlx-smal td, #view-vederlag .vl-tabel.vlx-smal th { padding-left:8px; padding-right:8px; }
#view-vederlag .vlx-prik { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
#view-vederlag .vlx-sider { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:12px; font-family:var(--tal-font); font-size:13px; color:var(--ink-soft); }
#view-vederlag .vlx-sider .vl-knap[disabled] { opacity:.45; cursor:default; }

#view-vederlag .vlx-aarkort { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:14px; }
#view-vederlag .vlx-aarkort .box { border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px 18px; }
#view-vederlag .vlx-aarkort .box.hero { background:var(--moerk, #003755); border-color:var(--moerk, #003755); color:#faf8f3; }
#view-vederlag .vlx-aarkort .aar { font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--ink-soft); }
#view-vederlag .vlx-aarkort .aar span { font-weight:500; letter-spacing:0; color:var(--ink-faint); }
#view-vederlag .vlx-aarkort .hero .aar, #view-vederlag .vlx-aarkort .hero .aar span { color:rgba(250,248,243,.75); }
#view-vederlag .vlx-aarkort .n { font-family:var(--display); font-size:28px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums lining-nums; }
#view-vederlag .vlx-aarkort .hero .n { color:var(--vl-messing-paa-dyb, #d4b06a); }
#view-vederlag .vlx-aarkort .u { font-size:12px; color:var(--ink-faint); margin-top:2px; }
#view-vederlag .vlx-aarkort .hero .u { color:rgba(250,248,243,.7); }
#view-vederlag .vlx-aarkort .aendr { font-size:12.5px; font-weight:700; margin-top:8px; }
#view-vederlag .vlx-aarkort .aendr.op { color:var(--positive); }
#view-vederlag .vlx-aarkort .aendr.ned { color:var(--brick); }
#view-vederlag .vlx-aarkort .hero .aendr.op { color:#8fd3b0; }
#view-vederlag .vlx-aarkort .hero .aendr.ned { color:#f0a594; }
#view-vederlag .vlx-to { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
#view-vederlag .vlx-to .vl-kort + .vl-kort { margin-top:0; }

#view-vederlag .vlx-kpi4 { grid-template-columns:1.3fr repeat(3,1fr); }
#view-vederlag .vl-kpi .n.op { color:var(--positive); }
#view-vederlag .vl-kpi .n.ned { color:var(--brick); }
#view-vederlag .vlx-bar { display:inline-block; width:90px; height:7px; border-radius:99px; background:var(--line-soft); overflow:hidden; vertical-align:middle; margin-right:8px; }
#view-vederlag .vlx-bar i { display:block; height:100%; border-radius:99px; }
#view-vederlag .vlx-editor { margin-bottom:14px; }
#view-vederlag .vlx-b-raekke { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 40px; gap:10px; align-items:end; padding:8px 0; border-top:1px solid var(--line-soft); }
#view-vederlag .vlx-b-raekke:first-child { border-top:0; }
#view-vederlag .vlx-fjern { width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:18px; cursor:pointer; }
#view-vederlag .vlx-fjern:hover { border-color:var(--brick); color:var(--brick); }
#view-vederlag .vlx-editor-fod { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
#view-vederlag .vlx-editor-fod > div { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#view-vederlag .vlx-fejl { color:var(--brick); font-size:13px; }
#view-vederlag .vl-hoved-knap.primaer { background:var(--maerke); border-color:var(--maerke); color:#fff; }

#view-vederlag .vlx-modal.modal-bg { align-items:flex-start; }
#view-vederlag .vlx-modal .modal-kort { margin:5vh auto; max-width:640px; }
#view-vederlag .vlx-luk { position:absolute; right:14px; top:14px; width:40px; height:40px; border-radius:50%; border:0; background:var(--line-soft); cursor:pointer; font-size:20px; color:var(--ink-soft); }
#view-vederlag .vlx-h2 { font-family:var(--display); font-weight:500; font-size:24px; margin:10px 0 6px; color:var(--ink); }
#view-vederlag .vlx-ingress { font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55; }
#view-vederlag .vlx-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#view-vederlag .vlx-periode { display:grid; grid-template-columns:100px repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
#view-vederlag .vlx-modal-fod { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:18px; }
#view-vederlag .vlx-adgang { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line-soft); }
#view-vederlag .vlx-adgang:first-child { border-top:0; }
#view-vederlag .vlx-adgang b { display:block; font-size:14px; }
#view-vederlag .vlx-adgang span { font-size:12.5px; color:var(--ink-faint); }

@media (max-width: 900px) {
  #view-vederlag .vlx-to { grid-template-columns:minmax(0,1fr); }
  #view-vederlag .vlx-kpi4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-vederlag .vlx-kpi4 .box.hero { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  #view-vederlag .vlx-raekke > .vlx-felt { flex:1 1 calc(50% - 12px); }
  #view-vederlag .vlx-raekke > .vlx-soeg { flex-basis:100%; }
  #view-vederlag .vlx-b-raekke { grid-template-columns:minmax(0,1fr) 40px; }
  #view-vederlag .vlx-b-raekke .vlx-felt { grid-column:1; }
  #view-vederlag .vlx-b-raekke .vlx-fjern { grid-column:2; grid-row:1; align-self:end; }
  #view-vederlag .vlx-grid, #view-vederlag .vlx-periode { grid-template-columns:minmax(0,1fr); }
  #view-vederlag .vlx-modal .modal-kort { margin:0 auto; padding:24px 18px; }
  #view-vederlag .vlx-hoved { width:100%; }
  #view-vederlag .vlx-skift { max-width:100%; overflow-x:auto; }
}