/* Medarbejdere (pages/staff.js) and the Danløn import on Datagrundlag (pages/data.js). */
.staff{ display:flex; flex-direction:column; gap:16px; min-width:0 }
.staff > *{ min-width:0 }
.staff-lede{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-2); max-width:96ch }
.staff-lede b{ color:var(--ink); font-weight:650 }
/* five tiles in a row where each can hold "1,4 mio. kr.", fewer below that, one on a phone */
.staff-tiles{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
table.t.staff-t td.lbl{ max-width:min(340px,52vw) }
/* long column heads ("Ikke overført af Danløn, betales selv") wrap instead of widening the table */
table.t.staff-wrap thead th{ white-space:normal; vertical-align:bottom; min-width:84px }
table.t.staff-wrap thead th:first-child{ min-width:0; white-space:nowrap }
.staff-subhead{ margin:0; padding:18px 20px 8px; font-size:13.5px; font-weight:650; letter-spacing:0 }

/* Medarbejderne (administrator): the two short lists and the sortable table */
.staff-movers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; padding:2px 20px 16px }
.staff-movers > div{ min-width:0 }
.staff-movers h3{ font-size:13px; font-weight:650; letter-spacing:0; margin:0 0 2px }
.staff-movers ol{ list-style:none; margin:0; padding:0 }
.staff-movers li{ display:flex; gap:14px; justify-content:space-between; align-items:baseline; padding:6px 0;
  border-bottom:1px solid var(--hair); font-size:13px }
.staff-movers li:last-child{ border-bottom:0 }
.staff-movers small{ display:block; font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis }
.staff-movers .sm-who{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.staff-movers .sm-amt{ flex:none; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.staff-sort{ border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; white-space:nowrap }
.staff-sort:hover{ color:var(--ink) }
.staff-sort:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }
table.t th[aria-sort] .staff-sort{ color:var(--ink) }
table.t.staff-list td.lbl{ max-width:190px }
table.t.staff-list thead th .staff-sort{ white-space:normal; text-align:inherit }
table.t.staff-list thead th{ min-width:94px }
/* a person's months: stays in view while the wide table scrolls sideways */
table.t tr td.staff-detail{ position:static; white-space:normal; text-align:left; padding:10px 12px 14px; background:var(--sunk) }
.staff-detail-in{ position:sticky; left:12px; width:max-content; max-width:min(620px, calc(100vw - 64px)); overflow:auto }
.staff-detail-in p{ margin:0 0 8px; font-size:12.5px; color:var(--ink-2); line-height:1.5 }
td.staff-detail table.t{ width:auto }
td.staff-detail table.t th, td.staff-detail table.t td{ position:static; background:transparent }
.staff-people > header .tools{ flex-wrap:wrap; justify-content:flex-end }
@media (max-width: 760px){
  .staff-movers{ grid-template-columns:1fr }
  table.t.staff-t td.lbl, table.t.staff-list td.lbl{ max-width:150px }
  .staff-people > header .tools{ justify-content:flex-start; width:100% }
  .staff-people > header .tools input[type="search"], .staff-people > header .tools select{ flex:1 1 150px; min-width:0; max-width:none !important; width:auto !important }
}

/* Datagrundlag: the Danløn import */
.dl-body{ display:flex; flex-direction:column; gap:16px; padding:4px 20px 18px; min-width:0 }
.dl-h{ display:block; font-size:13.5px; font-weight:650; margin:0 0 6px; color:var(--ink) }
.dl-steps{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:1.55; max-width:78ch }
.dl-steps .faint{ font-size:12.5px }
.dl-mark{ display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; margin:8px 0 6px }
.dl-mark .btn{ cursor:grab }
.dl-drag{ font-size:13px; color:var(--ink-2); font-weight:600 }
.dl-drag.on{ color:var(--accent) }
.dl-reads{ font-size:13px; line-height:1.55; color:var(--ink-2); max-width:78ch }
.dl-reads p{ margin:0 0 6px }
.dl-reads p b{ color:var(--ink); font-weight:650 }
.dl-stages{ display:flex; flex-direction:column; gap:10px }
.dl-stage{ border:1px solid var(--hair-2); border-radius:11px; padding:12px 14px; background:var(--sunk);
  display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.5; min-width:0 }
.dl-stage.hl{ border-color:var(--accent); background:var(--wash); box-shadow:0 0 0 3px var(--wash-2) }
.dl-stage p{ margin:0; overflow-wrap:anywhere }
.dl-stage details.more{ margin-top:2px; font-size:13px }
.dl-warn{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-2) }

/* a button that reads as a link inside running text */
.linkbtn{ border:0; background:none; padding:0; margin:0; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer }
.linkbtn:hover{ color:var(--accent-hi) }
.linkbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }
.linkbtn[disabled]{ color:var(--ink-3); cursor:default }