/* Kravspec — Kravbank (Requirement Bank) surface.
   Depends on theme + base + components. Only the Kravbank-specific patterns live
   here; shared primitives (k-btn, k-card, k-modal, k-field, k-tabs, k-toolbar,
   k-search, k-chip, k-select, tm-req-chip base, k-empty, k-banner, tm-req-num …)
   come from kravspec.components.css. Loaded after it, so anything here wins. */

/* ---------- page ---------- */
.kravbank-page { padding: 1.5rem 1.75rem 3rem; max-width: 1500px; margin: 0 auto; }
.kravbank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
/* The shared .k-toolbar primitive carries no bottom margin, so the toolbar would sit
   flush against the rail/list. Restore the breathing room the design calls for. */
.kravbank-page .k-toolbar { margin-bottom: 1.25rem; }

/* ---------- layout: rail / list / detail ---------- */
.bank-grid { display: grid; grid-template-columns: 272px minmax(340px, 1fr) minmax(360px, 430px); gap: 1rem; align-items: start; }
.bank-grid > * { min-width: 0; }
@media (max-width: 1240px) {
    .bank-grid { grid-template-columns: 240px 1fr; }
    .detail-col { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 40; overflow-y: auto;
        box-shadow: var(--k-shadow-xl); transform: translateX(105%); transition: transform .18s var(--k-ease); border-radius: 0; }
    .detail-col.open { transform: none; }
}
@media (max-width: 800px) { .bank-grid { grid-template-columns: 1fr; } .rail-col { position: static; } }
.rail-col { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.detail-col { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ---------- rail: category tree ---------- */
.rail-head { padding: .85rem 1rem .6rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--k-muted); border-bottom: 1px solid var(--k-line-soft); }
.tree { padding: .5rem .5rem .6rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1px; }
/* No width:100%: the rows are flex items in a column flex container, so they already
   stretch. Combining it with .tree-sub's margin-left made sub rows overflow the rail,
   which pushed the count out of view and gave .tree a horizontal scrollbar.
   font-size is explicit because this app's body has none (it falls back to 16px), while
   the design sizes this text at .875rem. */
.tree-row { display: flex; align-items: center; gap: .45rem; text-align: left; font-size: .875rem; padding: .45rem .6rem; border: none; background: transparent; border-radius: var(--k-radius); color: var(--k-ink-soft); font-weight: 500; cursor: pointer;
    transition: background-color var(--k-dur-fast) ease, color var(--k-dur-fast) ease; }
.tree-row:hover { background: var(--k-bg); color: var(--k-ink); }
.tree-row.on { background: var(--k-accent-tint); color: var(--k-accent-strong); font-weight: 600; }
.tree-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .ct { font-size: .74rem; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.tree-row.on .ct { color: var(--k-accent-strong); }
.tree-row .chev { flex: none; width: 14px; height: 14px; color: var(--k-faint); transition: transform var(--k-dur-fast) ease; }
.tree-row .chev.open { transform: rotate(90deg); }
.tree-sub { margin-left: 1.3rem; }
.tree-group-label, .tax-group-label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-soft); padding: .8rem .6rem .3rem; }
.tree-group-label:first-child, .tax-group-label:first-child { padding-top: .2rem; }
.tree-hint { font-size: .74rem; color: var(--k-faint); padding: .1rem .6rem .55rem; line-height: 1.4; }
.tree-row.inactive .nm { color: var(--k-muted); text-decoration: line-through; text-decoration-color: #c4cdde; }
.tag-inaktiv { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); border: 1px dashed #c4cdde; border-radius: var(--k-radius-pill); padding: .05rem .4rem; flex: none; }
.rail-foot { border-top: 1px solid var(--k-line-soft); padding: .55rem .6rem; }

/* ---------- list ---------- */
/* All bank-row rules are scoped under .rows: a bare .row selector would clobber
   Bootstrap's grid .row on every page that loads this stylesheet (it broke the
   phase-card grid on the project page with an inherited gap + padding). */
.rows { overflow: hidden; }
.rows .row { display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left; padding: .85rem 1rem .8rem 1.15rem; border: none; border-bottom: 1px solid var(--k-line-soft);
    border-left: 3px solid transparent; background: var(--k-surface); cursor: pointer;
    transition: background-color var(--k-dur-fast) ease, border-color var(--k-dur-fast) ease; }
.rows .row:last-child { border-bottom: none; }
.rows .row:hover { background: var(--k-accent-tint); }
.rows .row:hover .row-title { color: var(--k-accent); }
.rows .row.on { background: var(--k-accent-tint); border-left-color: var(--k-accent); }
.rows .row .body { flex: 1; min-width: 0; }
/* Explicit size: this app's body sets none, so it would inherit the browser's 16px. */
.row-title { font-size: .875rem; font-weight: 600; color: var(--k-ink); line-height: 1.35; transition: color var(--k-dur-fast) ease; text-wrap: balance; }
.row-cat { margin-top: .2rem; font-size: .78rem; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.row-ver { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .78rem; color: var(--k-muted); }
.rows .row.dim { opacity: .62; }
.rows .row.on .tm-req-num, .rows .row:hover .tm-req-num { background: rgba(255, 255, 255, .7); }
:root[data-theme="dark"] .rows .row.on .tm-req-num,
:root[data-theme="dark"] .rows .row:hover .tm-req-num { background: rgba(255, 255, 255, .12); }

/* ---------- Kravbank-specific chips ---------- */
.tm-req-chip--firm { color: var(--k-petrol); background: var(--k-petrol-bg); border-color: var(--k-petrol-border); } /* calm petrol for "ufravigeligt", not danger-red */
.k-role--org { color: var(--k-accent-strong); background: var(--k-accent-tint); border-color: var(--k-accent-border); }
.k-role--dept { color: var(--k-info); background: var(--k-info-bg); border-color: var(--k-info-border); }
/* Sentence case ("Obligatorisk", not "OBLIGATORISK"), which also lines it up with the
   .cond chip it sits next to: same size, weight and padding, no transform or tracking. */
.obl { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: var(--k-radius-pill); border: 1px solid transparent; white-space: nowrap; }
/* The type chip reuses tm-req-chip colours but must match the row's other chips in size/weight. */
.row-chips .tm-req-chip { font-size: .68rem; font-weight: 600; padding: .1rem .5rem; }
.obl--must { color: var(--k-accent-strong); background: var(--k-accent-tint); border-color: var(--k-accent-border); }
.obl--opt { color: var(--k-muted); background: var(--k-fill); border-color: var(--k-line); }
.cond { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; color: var(--k-warning); background: var(--k-warning-bg); border: 1px solid var(--k-warning-border); padding: .1rem .5rem; border-radius: var(--k-radius-pill); white-space: nowrap; }

/* ---------- detail panel ---------- */
.detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--k-muted); padding: 3rem 1.5rem; gap: .5rem; }
.detail-inner { padding: 1.25rem 1.25rem 1.5rem; }
/* Same as the toolbar: the shared .k-tabs primitive has no bottom margin, so the
   first field (Beskrivelse) would sit right under the tab strip. */
.detail-inner .k-tabs { margin-bottom: 1.1rem; }
.detail-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; }
.detail-title { font-size: 1.05rem; font-weight: 600; color: var(--k-ink); line-height: 1.3; margin: 0; flex: 1; text-wrap: balance; }
.detail-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.detail-actions { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fld { margin-bottom: 1.1rem; }
.fld-l { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--k-muted); margin-bottom: .3rem; }
.fld-v { white-space: pre-wrap; color: var(--k-ink-soft); max-width: 62ch; font-size: .875rem; }
.fld-v.dash { color: var(--k-faint); font-style: italic; }
.evalbox { background: var(--k-bg-alt); border: 1px solid var(--k-line-soft); border-radius: var(--k-radius-md); padding: .7rem .85rem; }
.evalbox .hint { color: var(--k-muted); font-size: .8rem; margin-left: .45rem; }
.evalbox .method { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--k-line); color: var(--k-ink-soft); font-size: .82rem; white-space: pre-wrap; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: .25rem .8rem; font-size: .85rem; margin: 0; }
.kv dt { color: var(--k-muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--k-ink-soft); }
.tpl-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: .3rem .6rem; font-size: .8rem; color: var(--k-ink-soft); background: var(--k-bg-alt); margin: 0 .4rem .4rem 0; }
.tpl-chip .bi { color: var(--k-muted); }
.meta-foot { border-top: 1px solid var(--k-line-soft); margin-top: 1.25rem; padding-top: .7rem; color: var(--k-muted); font-size: .76rem; }

/* ---------- versions ---------- */
.ver-list { list-style: none; padding: 0; margin: 0 0 .25rem; display: flex; flex-direction: column; }
/* Two lines per version: name gets the full row width, the date sits below. */
.ver { display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left; padding: .55rem .55rem; border: none; background: transparent; border-bottom: 1px dashed var(--k-line); border-radius: var(--k-radius-sm); cursor: pointer; transition: background-color var(--k-dur-fast) ease; }
.ver:last-child { border-bottom: none; }
.ver:hover { background: var(--k-bg); }
.ver.on { background: var(--k-accent-tint); }
.ver-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ver-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ver-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; margin-top: .3rem; background: var(--k-faint); box-shadow: 0 0 0 3px rgba(91, 102, 120, .12); }
.ver.cur .ver-dot { background: var(--k-accent); box-shadow: 0 0 0 3px rgba(45, 95, 176, .15); }
.ver .vn { font-weight: 600; font-size: .8rem; width: 2rem; flex: none; color: var(--k-ink); }
.ver .who { flex: 1; min-width: 0; font-size: .82rem; color: var(--k-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver .dt { font-size: .74rem; color: var(--k-muted); flex: none; }
.badge-cur { font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--k-success-bg); color: var(--k-success); border: 1px solid var(--k-success-border); border-radius: var(--k-radius-pill); padding: .08rem .45rem; flex: none; }
.ver-preview { border: 1px solid var(--k-line); border-radius: var(--k-radius-md); background: var(--k-bg-alt); padding: 1rem; margin-top: .85rem; }
.ver-preview .ph { display: flex; align-items: center; gap: .55rem; margin-bottom: .75rem; }
.ver-preview .ph .t { font-weight: 600; flex: 1; color: var(--k-ink); line-height: 1.3; }
.ver-hint { color: var(--k-muted); font-size: .78rem; margin-top: .6rem; text-align: center; }

/* ---------- form helpers (create/edit + wizard + taxonomy) ---------- */
.k-alert-err { background: var(--k-danger-bg); border: 1px solid var(--k-danger-border); border-left: 3px solid var(--k-danger); color: var(--k-danger); border-radius: var(--k-radius); padding: .6rem .75rem; font-size: .8rem; line-height: 1.45; margin-bottom: 1rem; }
.evalcards { display: flex; flex-direction: column; gap: .4rem; }
.evalcard { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: .55rem .75rem; cursor: pointer; transition: border-color var(--k-dur-fast) ease, background-color var(--k-dur-fast) ease; }
.evalcard:hover { border-color: #b9cce8; }
.evalcard.on { border-color: var(--k-accent); background: var(--k-accent-tint); }
.evalcard input { width: auto; margin-top: .25rem; accent-color: var(--k-accent); box-shadow: none; }
.evalcard .ec-t { font-weight: 600; font-size: .85rem; color: var(--k-ink); }
.evalcard .ec-d { color: var(--k-muted); font-size: .78rem; }
.iconbtn { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--k-muted); flex: none; background: transparent; border: none; cursor: pointer; transition: background-color var(--k-dur-fast) ease, color var(--k-dur-fast) ease; }
.iconbtn:hover { background: var(--k-bg); color: var(--k-ink); }
hr.soft { border: none; border-top: 1px solid var(--k-line-soft); margin: 1.25rem 0 1rem; }

/* ---------- taxonomy modal ---------- */
.tax-cols { display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0; overflow: hidden; }
.tax-cols > * { min-width: 0; } /* let the columns shrink instead of being forced wide by their content */
@media (max-width: 700px) { .tax-cols { grid-template-columns: 1fr; } .tax-list { border-right: none; border-bottom: 1px solid var(--k-line); max-height: 200px; } }
.tax-list { border-right: 1px solid var(--k-line); padding: .75rem; overflow-y: auto; }
/* width:100% is needed here (.tax-list is a block, not a flex column). font-size is explicit
   for the same reason as .tree-row: this app's body sets no size, so it would inherit 16px. */
.tax-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; font-size: .875rem; padding: .5rem .65rem; border: none; background: transparent; border-radius: var(--k-radius); color: var(--k-ink-soft); font-weight: 500; cursor: pointer; transition: background-color var(--k-dur-fast) ease; }
.tax-item:hover { background: var(--k-bg); }
.tax-item.on { background: var(--k-accent-tint); color: var(--k-accent-strong); font-weight: 600; }
.tax-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tax-item .ct { font-size: .74rem; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.tax-item.inactive .nm { color: var(--k-muted); text-decoration: line-through; text-decoration-color: #c4cdde; }
.tax-detail { padding: 1.25rem 1.5rem; overflow-y: auto; }
/* The owner chip is a department name that can be long and never wraps, so the row must be
   allowed to wrap; otherwise the activate/deactivate button is pushed past the panel edge
   and .tax-detail (overflow-y:auto, so overflow-x resolves to auto) grows a scrollbar.
   The button keeps itself right aligned on whichever line it lands. */
.tax-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.tax-detail-head .k-btn { margin-left: auto; flex: none; }
.subrow { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); margin-bottom: .4rem; background: var(--k-surface); }
.subrow .nm { flex: 1; min-width: 0; }
.subrow .nm .n { font-weight: 500; color: var(--k-ink); font-size: .875rem; }
.subrow .nm .d { font-size: .76rem; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subrow.inactive { opacity: .6; background: var(--k-bg); }
.subrow.inactive .nm .n { text-decoration: line-through; text-decoration-color: #c4cdde; }
.subedit { border: 1px solid var(--k-accent-border); background: var(--k-accent-tint); border-radius: var(--k-radius); padding: .75rem; margin-bottom: .4rem; }
.subedit input, .subedit textarea { margin-bottom: .5rem; background: var(--k-surface); }
.subedit textarea { min-height: 56px; }
.subedit .acts { display: flex; gap: .5rem; justify-content: flex-end; }

/* ---------- guided wizard ---------- */
.k-modal.wiz { max-width: 640px; }
.wiz-steps { display: flex; align-items: center; gap: .35rem; padding: .1rem 1.5rem 1rem; flex-wrap: wrap; }
.wiz-step { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--k-muted); font-weight: 500; }
.wiz-step .n { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; background: var(--k-bg); color: var(--k-muted); border: 1px solid var(--k-line);
    transition: background-color var(--k-dur-fast) ease, color var(--k-dur-fast) ease, border-color var(--k-dur-fast) ease; }
.wiz-step.done .n { background: var(--k-success-bg); color: var(--k-success); border-color: var(--k-success-border); }
.wiz-step.on { color: var(--k-ink); font-weight: 600; }
.wiz-step.on .n { background: var(--k-accent); color: #fff; border-color: var(--k-accent); }
.wiz-step .lbl { white-space: nowrap; }
@media (max-width: 620px) { .wiz-step .lbl { display: none; } }
.wiz-sep { flex: 1; height: 1px; min-width: .5rem; background: var(--k-line); }
.wiz-h { font-size: 1rem; font-weight: 600; color: var(--k-ink); margin: 0 0 .25rem; }
.wiz-p { font-size: .85rem; color: var(--k-muted); margin: 0 0 1.1rem; line-height: 1.5; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-grid--rows { grid-template-columns: 1fr; }
.choice { display: flex; gap: .7rem; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--k-line); border-radius: var(--k-radius-md); padding: .9rem 1rem; background: var(--k-surface); cursor: pointer; transition: border-color var(--k-dur-fast) ease, background-color var(--k-dur-fast) ease, box-shadow var(--k-dur-fast) ease; }
.choice:hover { border-color: #b9cce8; }
.choice.on { border-color: var(--k-accent); background: var(--k-accent-tint); box-shadow: 0 0 0 1px var(--k-accent); }
.choice-ic { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--k-accent-tint); color: var(--k-accent-strong); box-shadow: 0 0 0 1px var(--k-accent-border) inset; }
.choice.on .choice-ic { background: var(--k-surface); }
.choice > span:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.choice-t { display: block; font-weight: 600; font-size: .9rem; color: var(--k-ink); }
.choice-d { display: block; font-size: .78rem; color: var(--k-muted); line-height: 1.4; }
.catpick { display: flex; flex-direction: column; gap: .3rem; max-height: 300px; overflow-y: auto; padding-right: .15rem; }
/* Same as .tree-row: no width:100%, or .catpick-row.sub's margin-left overflows the picker. */
.catpick-row { display: flex; align-items: center; gap: .5rem; text-align: left; padding: .5rem .7rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); cursor: pointer; transition: border-color var(--k-dur-fast) ease, background-color var(--k-dur-fast) ease; }
.catpick-row:hover { border-color: #b9cce8; }
.catpick-row.on { border-color: var(--k-accent); background: var(--k-accent-tint); }
.catpick-row.sub { margin-left: 1.4rem; }
.catpick-row .nm { flex: 1; font-size: .86rem; color: var(--k-ink); }
.tpl-list { display: flex; flex-direction: column; gap: .4rem; }
.tpl-item { display: flex; gap: .65rem; align-items: center; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: .6rem .8rem; cursor: pointer; transition: border-color var(--k-dur-fast) ease, background-color var(--k-dur-fast) ease; }
.tpl-item:hover { border-color: #b9cce8; }
.tpl-item.on { border-color: var(--k-accent); background: var(--k-accent-tint); }
.tpl-item input { width: auto; margin: 0; accent-color: var(--k-accent); }
.tpl-item .ic { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--k-bg); color: var(--k-muted); }
.tpl-item .nm { flex: 1; min-width: 0; }
.tpl-item .nm .t { font-weight: 600; font-size: .86rem; color: var(--k-ink); }
.tpl-item .nm .k { font-size: .74rem; color: var(--k-muted); }
/* ---------- ankerwizard (Aktivér systemstyret generering) ---------- */
.wiz-cats { display: flex; flex-direction: column; gap: .4rem; max-height: 300px; overflow-y: auto; }
/* flex: none is load-bearing: the scrolling column flex parent would otherwise
   shrink these (overflow: hidden zeroes their automatic minimum size) and
   collapse every category to a sliver. */
.wiz-cat { flex: none; border: 1px solid var(--k-line-soft); border-radius: var(--k-radius); overflow: hidden; }
.wiz-cat-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; cursor: pointer; font-size: .85rem; font-weight: 600; margin: 0; color: var(--k-ink); }
.wiz-cat-row:hover { background: var(--k-fill); }
.wiz-cat-row--sub { padding-left: 2rem; font-weight: 500; font-size: .82rem; border-top: 1px dashed var(--k-line-soft); color: var(--k-ink-soft); }
.wiz-cat-row input { width: 15px; height: 15px; accent-color: var(--k-accent); flex: none; }
.wiz-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-catchall { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .75rem; margin: 0;
    border: 1px dashed var(--k-line); border-radius: var(--k-radius); font-size: .8rem; color: var(--k-muted); cursor: pointer; }
.wiz-catchall input { width: 15px; height: 15px; accent-color: var(--k-accent); flex: none; margin-top: .1rem; }
.wiz-catchall strong { color: var(--k-ink-soft); }

.wiz-modes { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.wiz-mode { flex: 1 1 240px; border: 1px solid var(--k-line); border-radius: var(--k-radius);
    background: var(--k-surface); padding: .7rem .85rem; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: .2rem; font: inherit; color: var(--k-ink); }
.wiz-mode:hover { border-color: var(--k-accent-border); }
.wiz-mode.on { border-color: var(--k-accent); background: var(--k-accent-tint); box-shadow: 0 0 0 1px var(--k-accent); }
.wiz-mode-title { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; flex-wrap: wrap; }
.wiz-mode-badge { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--k-success-bg); color: var(--k-success); border: 1px solid var(--k-success-border);
    border-radius: var(--k-radius-pill); padding: .05rem .45rem; }
.wiz-mode-sub { font-size: .74rem; color: var(--k-muted); line-height: 1.4; }

.wiz-order { border: 1px solid var(--k-line-soft); border-radius: var(--k-radius); }
.wiz-order-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; font-size: .84rem; border-bottom: 1px solid var(--k-line-soft); }
.wiz-order-row:last-child { border-bottom: none; }
.wiz-order-nr { flex: none; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.wiz-order-mv { display: flex; gap: .25rem; }
.wiz-order-mv button { border: 1px solid var(--k-line); background: var(--k-surface); border-radius: var(--k-radius-sm);
    width: 1.5rem; height: 1.3rem; font-size: .6rem; cursor: pointer; color: var(--k-muted);
    display: inline-flex; align-items: center; justify-content: center; }
.wiz-order-mv button:disabled { opacity: .35; cursor: default; }

.wiz-code-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .7rem;
    border: 1px solid var(--k-line-soft); border-radius: var(--k-radius); margin-bottom: .4rem; font-size: .82rem; }
.wiz-code-row code { font-size: .7rem; color: var(--k-petrol); background: var(--k-petrol-bg);
    padding: .1rem .45rem; border-radius: var(--k-radius-sm); }

.wiz-hint { display: flex; gap: .5rem; align-items: flex-start; font-size: .78rem; color: var(--k-ink-soft);
    background: var(--k-petrol-bg); border: 1px solid var(--k-petrol-border); border-radius: var(--k-radius);
    padding: .5rem .75rem; margin-top: .7rem; line-height: 1.45; }
.wiz-hint .bi { color: var(--k-petrol); flex: none; margin-top: .05rem; }

.wiz-receipt { border: 1px solid var(--k-success-border); background: var(--k-success-bg);
    border-radius: var(--k-radius); padding: .6rem .85rem; }
.wiz-receipt-title { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--k-success); margin-bottom: .35rem; }
.wiz-receipt-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; padding: .15rem 0; color: var(--k-ink-soft); }
.wiz-receipt-row .bi { color: var(--k-success); flex: none; }
.wiz-receipt-meta { color: var(--k-muted); font-size: .74rem; }

.wiz-summary { display: grid; grid-template-columns: 120px 1fr; gap: .35rem .9rem; font-size: .85rem; margin-top: .5rem; }
.wiz-summary dt { color: var(--k-muted); font-weight: 500; }
.wiz-summary dd { margin: 0; color: var(--k-ink-soft); }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
/* .toasts .toast, not bare .toast: Bootstrap's own `.toast:not(.show) { display: none }`
   out-specifies a single class and would hide every toast (it silently did, for months). */
.toasts .toast { background: var(--k-ink); color: #fff; border: 0; border-radius: var(--k-radius); padding: .55rem 1rem; font-weight: 500; font-size: .82rem; box-shadow: var(--k-shadow-md); display: flex; width: auto; gap: .5rem; align-items: center; }
.toasts .toast .bi { color: #7ed6a2; }

/* ---------- read-only fullsize viewer (Vis kravet) ---------- */
.k-modal.kb-view { max-width: 1040px; }
.kb-view-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.kb-view-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.75rem; align-items: start; padding-top: .5rem; }
.kb-view-side { border-left: 1px solid var(--k-line-soft); padding-left: 1.5rem; min-width: 0; }
@media (max-width: 860px) {
    .kb-view-cols { grid-template-columns: 1fr; }
    .kb-view-side { border-left: none; padding-left: 0; }
}
/* The wide column is a reading surface: roomier type than the cramped detail panel. */
.kb-view-main .fld-v { max-width: none; font-size: .95rem; line-height: 1.65; }
.kb-view-doc { border: 1px solid var(--k-line); background: var(--k-bg-alt); border-radius: var(--k-radius-md); padding: 1.1rem 1.3rem; white-space: pre-wrap; color: var(--k-ink-soft); font-size: .95rem; line-height: 1.7; }
.kb-view-notice { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--k-warning-bg); color: var(--k-warning); border: 1px solid var(--k-warning-border); border-radius: var(--k-radius-md); padding: .55rem .8rem; font-size: .82rem; font-weight: 500; margin-bottom: 1rem; }
.kb-view-notice-link { background: none; border: none; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.kb-view-foot-hint { font-size: .78rem; color: var(--k-muted); }

/* ---------- feedback fra projektafslutninger (detaljepanelets tredje fane) ---------- */
.kb-fb-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kb-fb { border: 1px solid var(--k-line-soft); border-radius: var(--k-radius); background: var(--k-fill); padding: .55rem .7rem; }
.kb-fb-text { font-size: .84rem; color: var(--k-ink-soft); line-height: 1.5; white-space: pre-wrap; }
.kb-fb-meta { margin-top: .3rem; font-size: .72rem; color: var(--k-muted); }

/* ---------- slim grouped bank list (.bnk-*) ----------
   Shared by Kravbank and Paradigmebank (2026-09 redesign): one-line rows so far
   more items fit on screen, grouped under kategori headers with underkategori
   sub-headers. Everything beyond name + a few chips lives in the detail panel. */
.bnk { padding: 0.15rem 0.6rem 0.6rem; }
.bnk-grp { font-size: .92rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-ink-soft);
    padding: .85rem .2rem .35rem; }
.bnk-subgrp { font-size: .84rem; font-weight: 600; color: var(--k-muted);
    padding: .45rem .2rem .2rem .9rem; }
.bnk-subgrp .bi { font-size: .68rem; color: var(--k-faint); margin-right: .15rem; }
.bnk-row { display: flex; align-items: center; gap: .55rem; width: 100%;
    border: 1px solid var(--k-line-soft); border-radius: var(--k-radius);
    background: var(--k-surface); text-align: left; cursor: pointer;
    padding: .38rem .6rem; margin-bottom: .3rem; font: inherit; color: var(--k-ink); }
.bnk-row:hover { background: var(--k-fill); border-color: var(--k-line); }
.bnk-row.on { background: var(--k-accent-tint); border-color: var(--k-accent); }
.bnk-row.dim { opacity: .55; }
/* min-width guarantees the title always wins over the markers on narrow screens. */
.bnk-name { flex: 1; min-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .84rem; font-weight: 550; }

/* Diskrete markører (variant B): en prik for obligationen, mikro-etiketter for
   type og afdelingsejerskab. Rækkens tooltip bærer de fulde ord. */
.bnk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.bnk-dot--obl { background: var(--k-warning); }
.bnk-dot--vur { background: var(--k-faint); }

/* Kortets hoved: brødkrumme til venstre, farveforklaring til højre. Inde i
   kortet, så de tre kolonners hvide bokse flugter i toppen. */
.bnk-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .55rem .2rem .5rem; border-bottom: 1px solid var(--k-line-soft); }
.bnk-head-spacer { flex: 1; }
.bnk-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--k-muted); white-space: nowrap; }
.bnk-mini { flex: none; font-size: .58rem; font-weight: 700; letter-spacing: .02em; color: var(--k-muted);
    background: var(--k-fill); border: 1px solid var(--k-line-soft); border-radius: var(--k-radius-sm);
    padding: .05rem .3rem; white-space: nowrap; }
.bnk-mini--type { color: var(--k-petrol); background: var(--k-petrol-bg); border-color: var(--k-petrol-border); }
.bnk-count { flex: none; font-size: .7rem; color: var(--k-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bnk-ver { flex: none; font-size: .7rem; color: var(--k-muted); font-family: ui-monospace, Consolas, monospace; }