/* The virk area's shared styles - every /firma, /person and browse page links this file,
   the same per-area pattern as kommune.css and statistik.css. It was the inline partial
   Pages/Shared/Virk/_Stil.cshtml until V4b of the merge (16.08.2026); a stylesheet
   rendered as markup on 12 pages was the port's own design system running beside the
   house's, and moving it here is what ended that. Ported from cvrviden's ui.css (V1) and
   re-skinned: every colour resolves to a gv.css token through the --v-* aliases below, so
   the pages sit on grundviden's palette in both themes without touching gv.css itself.

   The --d1..--d4 categorical chart slots are NEW tokens, not redeclarations - gv.css has
   no chart palette. The values are cvrviden's MEASURED ones (dataviz validator: lightness
   band, chroma, CVD separation, contrast, both themes - see their tokens.css history);
   re-run the validator before changing any of the eight. */
:root {
  --v-blaa: var(--accent); --v-tekst: var(--fg); --v-dis: var(--muted); --v-svag: var(--muted);
  --v-flade: var(--panel); --v-kant: var(--line); --v-hoej: var(--card);
  --v-ok: var(--pos); --v-ok-flade: var(--posbg);
  --v-fare: var(--neg); --v-fare-flade: var(--negbg);
  --v-fare-kant: color-mix(in srgb, var(--neg) 30%, transparent);
  --v-advarsel: var(--warn); --v-advarsel-flade: var(--warnbg);
  --v-advarsel-kant: color-mix(in srgb, var(--warn) 30%, transparent);
  --v-doed: var(--muted); --v-doed-flade: var(--panel);
  --v-rund: var(--radius-s);
  --d1: #2a78d6; --d2: #008300; --d3: #e87ba4; --d4: #eda100;
}
@media (prefers-color-scheme: dark) {
  :root { --d1: #4a86e8; --d2: #2f9e44; --d3: #d15fa8; --d4: #bb8129; }
}

main.virk { max-width: 56rem; margin: 0 auto; padding: 1.2rem 1rem 3rem }

nav.sti { font-size: .85rem; color: var(--v-svag); margin: 0 0 .6rem }
nav.sti a { color: var(--v-dis); text-decoration: none }
nav.sti a:hover { text-decoration: underline }
nav.sti .skil { margin: 0 .35rem }

.dis { color: var(--v-dis) }
.svag { color: var(--v-svag) }
.kort { background: var(--v-hoej); border: 1px solid var(--v-kant); border-radius: var(--v-rund); padding: 1rem; margin: .6rem 0 }
.kort table { border-collapse: collapse; width: 100% }
.kort th, .kort td { text-align: left; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--v-kant); vertical-align: top }
.kort th { font-weight: 600; color: var(--v-dis) }
td.tal, th.tal { text-align: right; font-variant-numeric: tabular-nums }
.kort tr:last-child > td, .kort tr:last-child > th { border-bottom: 0 }
.kilde { font-size: .78rem; color: var(--v-svag); margin: .5rem 0 0 }
/* "Se N selskaber paa kortet" - the map deep link on /firma and /person (V4). A button-like link
   in the area accent, so it reads as an action rather than a sentence. */
.paakort { margin: .5rem 0 .7rem }
.paakort a { display: inline-block; font-weight: 600; color: var(--v-blaa); text-decoration: none;
  border: 1px solid var(--v-kant); border-radius: var(--v-rund); padding: .35rem .7rem; background: var(--v-hoej) }
.paakort a:hover { text-decoration: underline; border-color: var(--v-blaa) }
.tom { color: var(--v-dis); background: var(--v-hoej); border: 1px dashed var(--v-kant); border-radius: var(--v-rund); padding: .8rem 1rem; margin: .6rem 0 }
.mere { margin: .4rem 0 0 }
.mere summary { font-size: .82rem; color: var(--v-blaa); cursor: pointer }
.mere .lag, .mere table { margin-top: .4rem }

/* Status badges + full-width banners. The active/ceased BOUNDARY lives in the read
   model (er_ophoert); these classes only colour what the page already knows. */
.badge { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1;
  padding: .3rem .5rem; border-radius: .35rem; vertical-align: .12rem; white-space: nowrap }
.badge-ok      { color: var(--v-ok);   background: var(--v-ok-flade) }
.badge-fare    { color: var(--v-fare); background: var(--v-fare-flade) }
.badge-doed    { color: var(--v-doed); background: var(--v-doed-flade) }
.badge-neutral { color: var(--v-dis);  background: var(--v-flade); border: 1px solid var(--v-kant) }
.banner { border-radius: var(--v-rund); padding: .7rem 1rem; margin: .8rem 0; font-weight: 500 }
.banner-doed { background: var(--v-doed-flade); color: var(--v-doed); border: 1px solid var(--v-kant) }
.banner-fare { background: var(--v-fare-flade); color: var(--v-fare); border: 1px solid var(--v-fare-kant) }

/* Chip links - the toplist cross-navigation (/top, /top/{metrik}/{omraade}). Added in V3;
   the entity pages load this file too but do not use it, which costs a rule and no ink. */
main.virk .chip { display: inline-block; font-size: .8rem; line-height: 1.2; padding: .2rem .55rem;
  margin: .12rem .3rem .12rem 0; border: 1px solid var(--v-kant); border-radius: 1rem;
  color: var(--v-blaa); text-decoration: none; white-space: nowrap }
main.virk .chip:hover { border-color: var(--v-blaa) }

/* Estimates: the badge that marks every estimate, and the band headline. */
.beregnet-badge { font-size: .7rem; font-weight: 600; vertical-align: middle; color: var(--v-advarsel);
  background: var(--v-advarsel-flade); border-radius: .4rem; padding: .1rem .45rem; margin-left: .3rem }
.vaerdibaand { font-size: 1.45rem; font-weight: 700; margin: .2rem 0 .6rem; font-variant-numeric: tabular-nums }

/* The key-figures strip. auto-FILL, not auto-fit: auto-fit collapses the empty tracks,
   so a company with one tile got a single box stretched across the whole page. */
.fliser { display: grid; gap: .5rem; margin: .8rem 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)) }
.flise { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem;
  background: var(--v-hoej); border: 1px solid var(--v-kant); border-radius: var(--v-rund);
  color: var(--v-tekst); text-decoration: none }
.flise:hover { border-color: var(--v-blaa) }
.f-lab { font-size: .76rem; color: var(--v-dis) }
.f-val { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.f-sub { font-size: .72rem; color: var(--v-svag) }
.f-lab .beregnet-badge { font-size: .62rem; padding: 0 .3rem; margin-left: .25rem }

/* Copy-to-clipboard button (the [data-kopi] contract in del.js). The confirmation is
   rendered from data-kvittering, which the script sets and clears - no second element to
   keep in sync. */
.kopiknap { display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-left: .25rem; padding: 0; vertical-align: -.35rem;
  background: none; border: 1px solid transparent; border-radius: .35rem;
  color: var(--v-dis); cursor: pointer }
.kopiknap:hover { color: var(--v-blaa); border-color: var(--v-kant) }
.kopiknap svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round }
.kopiknap.kopi-ok { color: var(--v-ok) }
.kopiknap.kopi-fejl { color: var(--v-fare) }
.kopiknap[data-kvittering]::after { content: attr(data-kvittering); position: absolute;
  margin-left: 2.2rem; font-size: .72rem; font-weight: 600; white-space: nowrap; color: inherit }

/* The name-history foldout sits inside a table cell, so it must not inherit the
   block margins .mere uses elsewhere on the page. */
.navnehistorik { margin: .3rem 0 0 }
.navnehistorik ul { margin: .3rem 0 0; padding-left: 1.1rem }
.navnehistorik li { margin: .1rem 0 }

/* Signals: facts with definitions, never a score. The measured association is smaller
   than the definition and set off by a rule rather than a colour, because it must not
   read as part of the warning: it is a statement about a population of other companies,
   and colouring it would lend this company the statistic. */
.signaler { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 }
.signal { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem;
  border-radius: var(--v-rund); border: 1px solid var(--v-kant); background: var(--v-hoej) }
.signal.fare { border-color: var(--v-fare-kant); background: var(--v-fare-flade) }
.signal.advarsel { border-color: var(--v-advarsel-kant); background: var(--v-advarsel-flade) }
.signal .navn { font-weight: 600 }
.signal .def { font-size: .82rem; color: var(--v-dis) }
.signal.fare .navn { color: var(--v-fare) }
.signal.advarsel .navn { color: var(--v-advarsel) }
.signal .maalt { display: block; margin-top: .35rem; padding-top: .3rem;
  border-top: 1px solid var(--v-kant); font-size: .75rem; color: var(--v-dis) }

/* Mergers and demergers: one block per event, label above the parties - the party list
   has no bound worth designing around (one demerger names 92 companies). */
.haendelse { padding: .5rem 0; border-top: 1px solid var(--v-kant) }
.haendelse:first-child { padding-top: 0; border-top: 0 }
.haendelse:last-child { padding-bottom: 0 }
.hnavn { font-weight: 600 }
.hnavn .svag { font-weight: 400; font-size: .85rem; margin-left: .35rem }
.hparter { margin-top: .15rem; line-height: 1.5 }

/* Status history. */
.statusliste { list-style: none; margin: 0; padding: 0 }
.statusliste li { padding: .4rem 0; border-top: 1px solid var(--v-kant); line-height: 1.6 }
.statusliste li:first-child { padding-top: 0; border-top: 0 }
.statusliste li:last-child { padding-bottom: 0 }
.statusper { margin: 0 .4rem }
.statusliste li.krise { border-left: 3px solid var(--v-fare-kant); padding-left: .5rem }
.krisevarsel { background: var(--v-advarsel-flade); border: 1px solid var(--v-advarsel-kant);
  border-radius: var(--v-rund); padding: .6rem .75rem; margin: .6rem 0; line-height: 1.6 }

/* Charts. Scroll container parked at the right end via direction, so the newest years
   are what a phone sees first (the C# puts axis labels at the right edge to match). */
.diagram-boks { overflow-x: auto; margin: .5rem 0 .2rem; -webkit-overflow-scrolling: touch; direction: rtl }
.diagram { display: block; max-width: none; direction: ltr }
.diagram-pos { fill: var(--v-blaa) }
.diagram-neg { fill: var(--v-fare) }
.diagram-net { stroke: var(--v-kant); stroke-width: 1 }
.diagram-nul { stroke: var(--v-svag); stroke-width: 1 }
.diagram-linje { fill: none; stroke: var(--v-blaa); stroke-width: 2; stroke-linejoin: round }
.diagram-punkt { fill: var(--v-blaa) }
.diagram-akse, .diagram-x { font-size: 10px; fill: var(--v-svag); font-variant-numeric: tabular-nums }
.diagram-baand { width: 100%; height: 12px; border-radius: 3px }
.d-1 { fill: var(--d1) } .d-2 { fill: var(--d2) } .d-3 { fill: var(--d3) } .d-4 { fill: var(--d4) }
.diagram-ramme { margin: .9rem 0 }
.diagram-ramme h3 { font-size: .95rem; margin: 0 0 .1rem }
.diagram-ramme .enhed { font-size: .8rem; color: var(--v-svag); margin: 0 }
.diagram-ramme .kilde { margin: .15rem 0 0 }
.forklaring { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--v-dis); margin: .3rem 0 0 }
.forklaring span { display: inline-flex; align-items: center }
.forklaring span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; flex: none;
  border-radius: 2px; margin-right: .35rem; background: var(--swatch, currentColor) }

/* Benchmark. A NEUTRAL track, deliberately: a red-to-green gradient is a score drawn as
   decoration ([[a-cosmetic-change-can-carry-a-claim]]). The marker carries the information. */
.percentil { background: var(--v-hoej); border: 1px solid var(--v-kant); border-radius: var(--v-rund); padding: .7rem .8rem; margin: .6rem 0 }
.percentil .spor { position: relative; height: 8px; border-radius: 4px; background: var(--v-flade); border: 1px solid var(--v-kant); margin: .5rem 0 .3rem }
.percentil .maerke { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--v-blaa) }
.percentil .ender { display: flex; justify-content: space-between; font-size: .75rem; color: var(--v-svag) }

.roller td.svag { white-space: nowrap }

/* The ownership graph: three bands in flow, not an SVG - SVG cannot wrap text, and here
   the text IS the content. */
.ejergraf { margin: .3rem 0 .2rem; text-align: center }
.ejergraf .baandnavn { font-size: .78rem; color: var(--v-svag); margin: .2rem 0 .3rem; text-transform: uppercase; letter-spacing: .03em }
.ejergraf .lag { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center }
.ejergraf .stik { width: 0; height: 1rem; margin: .1rem auto; border-left: 2px solid var(--v-kant) }
.knude { display: block; text-align: left; text-decoration: none; color: var(--v-tekst);
  min-width: 9rem; max-width: 15rem; padding: .4rem .55rem; font-size: .86rem;
  line-height: 1.3; border: 1px solid var(--v-kant); border-radius: var(--v-rund); background: var(--v-hoej) }
.knude:hover { border-color: var(--v-blaa) }
/* Person vs company must not be colour-alone: persons get a small figure glyph before
   the name. Keyed on the href, so every band gets it with no view-model flag. */
.knude[href^="/person/"] .navn::before {
  content: ""; display: inline-block; width: .75em; height: .75em; margin-right: .35em;
  background: currentColor; vertical-align: -1px;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='4.5'/><path d='M3.5 21c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='4.5'/><path d='M3.5 21c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5z'/></svg>") center/contain no-repeat }
.knude .navn { display: block; font-weight: 600 }
.knude .pct { display: block; font-size: .78rem; color: var(--v-dis); font-variant-numeric: tabular-nums }
.knude .knudevaerdi { display: block; font-size: .74rem; color: var(--v-advarsel); font-variant-numeric: tabular-nums }
.knude-selv { display: inline-block; border-color: var(--v-blaa); background: var(--v-flade) }
.knude-doed .navn { color: var(--v-doed) }
.koncernlinje, .egenandel { font-size: .88rem; padding: .5rem .7rem; border-radius: var(--v-rund); background: var(--v-flade); border: 1px solid var(--v-kant) }
.koncernlinje { margin: .2rem 0 .5rem }
.egenandel { margin: .6rem 0 .2rem }
.kaede { list-style: none; margin: .4rem 0 .8rem; padding: 0 }
.kaede li { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem }
.kaede .knude { margin: 0 }
.kaede .kaedeandel { font-size: .8rem; color: var(--v-dis); padding: .1rem 0 .1rem 1rem }

/* Koncern box on a person page: several roles inside one group are ONE relationship. */
.koncernboks { border-left: 3px solid var(--v-blaa) }
.koncernboks .baandnavn { font-size: .78rem; color: var(--v-svag); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .03em }

/* Career timeline. Percentage widths on a shared axis, no SVG - the company name is the
   content and has to wrap. Length is the data; only a CURRENT role gets the ink. */
.tidslinje { display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0 }
.tidslinje .rk { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: .5rem; align-items: center; font-size: .84rem }
.tidslinje .etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tidslinje .spor { position: relative; height: 10px; border-radius: 5px; background: var(--v-flade); border: 1px solid var(--v-kant) }
.tidslinje .bjaelke { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--v-kant); min-width: 3px }
.tidslinje .bjaelke.nu { background: var(--v-blaa) }
.tidslinje .aar { color: var(--v-svag); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap }

/* Property blocks. */
.ejendom { padding: .8rem .9rem }
.ejhoved { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-weight: 600 }
.ejhoved a, .ejhoved span:first-child { overflow-wrap: anywhere }
.ejlinje { font-size: .88rem; margin-top: .15rem }
.ejtal { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         gap: .5rem .9rem; margin: .7rem 0 0; align-items: start }
.ejtal > div { min-width: 0 }
.ejtal dd.under { font-size: .82rem; font-weight: 400; color: var(--v-dis) }
.ejtal:empty { display: none }
.ejtal dt { font-size: .78rem; color: var(--v-dis); line-height: 1.3 }
.ejtal dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere }

@media (max-width: 480px) {
  main.virk h1 { font-size: 1.35rem }
  .kort th, .kort td { padding-right: .4rem }
  /* Role tables carry four columns and at 390px they forced the whole page to scroll
     sideways to 602px. Stacking each row is the only fix that keeps all four facts. */
  .roller, .roller tbody, .roller tr, .roller td { display: block; width: auto }
  .roller tr { border-bottom: 1px solid var(--v-kant); padding: .4rem 0 }
  .roller td { border: 0; padding: 0 }
  .roller td:empty { display: none }
  .roller td.dis, .roller td.svag { font-size: .82rem }
  /* The facts box, stacked for the same reason. Scoped to `.fakta`, never `.kort table`:
     the accounts table has seven columns and the unit table four, and stacking either
     would be worse than the problem ([[hoisting-css-is-not-refactoring]]). */
  .fakta, .fakta tbody, .fakta tr, .fakta th, .fakta td { display: block; width: auto }
  .fakta tr { border-bottom: 1px solid var(--v-kant); padding: .4rem 0 }
  .fakta tr:last-child { border-bottom: 0 }
  .fakta th, .fakta td { border: 0; padding: 0 }
  /* Every other table: let a long branche label or street name break so auto layout fits
     the viewport - but NOT on the header cell, which is a label we wrote
     ("Soliditetsgrad" must not become "Soliditetsgr / ad"). */
  .kort table td { overflow-wrap: anywhere }
  .kort table th { overflow-wrap: break-word; hyphens: auto }
  .tidslinje .rk { grid-template-columns: minmax(5rem, 8rem) 1fr auto; font-size: .8rem }
}