/* Front page (Views/Home.cshtml) in the intranet design language.
Only kb tokens (wwwroot/kb/tokens.css), so the page follows light and dark. The page head and cards come from
wwwroot/kb/shell.css (.kb-page-head, .kb-card), the skeleton and reveal from wwwroot/kb/components/list.css
(kb.loading.track); this file lays out the widget grid and the card frame (.home-w), plus the server-drawn content:
the rich text from Umbraco, the changelog, the ticket guide and the activity list.
Layer kb.pages: wins over the components, legacy CSS and the shell. */
@layer kb.pages {
.home {
--home-link: var(--kb-status-new-ink);
color: var(--kb-text);
container: home / inline-size;
}
.home [hidden] { display: none !important; }
/* legacy base.css styles plain paragraphs and links: set what this page uses */
:where(.home) p { margin: 0; }
:where(.home) :where(a:not(.kb-btn)) {
color: var(--home-link);
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-offset: 2px;
transition: none; /* legacy base.css fades the link colour even under reduced motion */
}
@media (prefers-reduced-motion: no-preference) {
:where(.home) :where(a:not(.kb-btn)) { transition: color .2s; }
}
:where(.home) a:focus-visible {
outline: 2px solid var(--kb-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
.home__sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- page head ---------- */
.home__head { margin-bottom: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
.home__head > .kb-page-head__text { flex: 0 1 auto; }
.home__head .home__actions { justify-content: flex-start; margin-left: 0; }
.home__kicker {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--kb-text-muted);
}
.home__kicker svg { flex: none; }
.home .home__title { font-size: 30px; }
.home__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin: 8px 0 0;
padding: 0;
list-style: none;
font-size: 15px;
color: var(--kb-text-muted);
}
.home__meta li {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow-wrap: anywhere;
}
.home__meta svg { flex: none; }
/* ---------- the widget grid (spec 7.1) ----------
Fixed column widths: 1 / 2 / 3 / 4 columns below 600 / 1000 / 1500 px of page width and above, each at most
420 px wide, so cards are not stretched on an ultrawide screen. The layout is an ordered list; dense flow fills
the holes a wide or tall card leaves. */
.home-grid {
position: relative;
--home-cols: 1;
--home-gap: 16px;
display: grid;
grid-template-columns: repeat(var(--home-cols), minmax(0, 1fr));
grid-auto-rows: 220px;
grid-auto-flow: dense;
gap: var(--home-gap);
max-width: calc(var(--home-cols) * 420px + (var(--home-cols) - 1) * var(--home-gap));
}
@container home (min-width: 600px) {
.home-grid { --home-cols: 2; }
/* wide and large take two columns; on one column every card is one wide */
.home-w--wide,
.home-w--large { grid-column: span 2; }
}
@container home (min-width: 1000px) { .home-grid { --home-cols: 3; } }
@container home (min-width: 1500px) { .home-grid { --home-cols: 4; } }
/* .home-w below sets the one-row value; two classes win over it */
.home-w:is(.home-w--tall, .home-w--large) { grid-row: span 2; }
.home-w__resize { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center;
border: 0; border-radius: var(--kb-radius); background: var(--kb-card); color: var(--kb-text-muted); cursor: nwse-resize; touch-action: none; }
.home-w__resize:hover { background: var(--kb-hover); color: var(--kb-text); }
.home-w__resize:focus-visible { outline: 2px solid var(--kb-focus-ring); }
.home-w__resize svg { width: 16px; height: 16px; }
/* ---------- the card frame ----------
The body gets the actual space remaining below its header. It is the card's only vertical scroll area;
widget frames grow with their content instead of imposing a guessed body height. */
.home-w {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.home-w__head {
display: flex;
flex: none;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
}
.home-w__icon {
display: grid;
flex: none;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--kb-radius);
background: var(--kb-status-new-bg);
color: var(--kb-status-new-ink);
}
.home-w__icon svg { display: block; }
.home-w__titles { flex: 1; min-width: 0; align-self: center; }
.home .home-w__title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--kb-text);
overflow-wrap: anywhere;
}
.home-w__sub { margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--kb-text-muted); }
.home-w__open { flex: none; }
.home-w__body {
display: block;
flex: 1;
min-height: 0;
min-width: 0;
overflow-wrap: anywhere;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--kb-line-strong) transparent;
}
.home-w__body > .kb-loading-real { height: 100%; min-width: 0; min-height: 0; }
.home-w__body > .kb-loading-real > * { min-width: 0; max-width: 100%; }
.home-w .kb-chart__row { grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; }
.home-w .kb-chart__hbar { min-width: 0; }
/* A table's intrinsic minimum width otherwise defeats the chart's 1px screen-reader box. */
.home-w .kb-chart__table { display: block; }
.home-w__scroll,
.home__timeline {
max-height: none;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
border-radius: var(--kb-radius);
}
.home-w__scroll:focus-visible,
.home__timeline:focus-visible,
.home-w__body:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: -2px; }
/* generic skeleton: three bars (shown only while kb.loading.track waits > 200 ms) */
.home .home-w__skel { display: block; height: 14px; margin: 0 0 12px; }
.home .home-w__skel:nth-of-type(2) { width: 78%; --d: .11s; }
.home .home-w__skel:nth-of-type(3) { width: 56%; --d: .22s; }
/* the card's error: compact, so it fits a one-row card */
.home .home-w__error {
min-height: 100%;
align-content: center;
gap: 4px;
padding: 4px 8px;
}
.home-w__error .kb-btn { margin-top: 6px; }
.home-w:not(.home-w--tall, .home-w--large) .home-w__error .home__state-icon { display: none; }
/* ---------- customise mode (home-edit.js): grip (.kb-grip from check.css), menu and remove per card ---------- */
.home__note { margin-top: 8px; font-size: 14px; color: var(--kb-text-muted); }
.home--editing .home-w { outline: 1px dashed var(--kb-control-edge); outline-offset: -1px; }
.home--editing .home-w__open { display: none; }
.home .home-w__grip { align-self: center; margin: 0 -4px 0 -6px; touch-action: none; }
.home-w__tools { display: flex; flex: none; gap: 4px; }
.home-w.is-dragging,
.home-w.is-lifted { position: relative; z-index: 5; box-shadow: var(--kb-shadow-pop); }
.home-w.is-lifted { outline: 2px solid var(--kb-focus-ring); }
:is(.is-dragging, .is-lifted) > .home-w__head .home-w__grip { color: var(--kb-primary); }
/* the size and variant menu: a popover in the look of kb.select's panel and options */
.home-menu {
position: fixed;
inset: auto;
min-width: 180px;
max-height: calc(100dvh - 16px);
overflow-y: auto;
margin: 0;
padding: 6px;
border: 1px solid var(--kb-line);
border-radius: var(--kb-radius-card);
background: var(--kb-card);
color: var(--kb-text);
box-shadow: var(--kb-shadow-pop);
}
.home .home-menu__label { padding: 6px 8px 2px; font-size: 12px; font-weight: 700; color: var(--kb-text-muted); }
.home-menu .kb-select__opt { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.home-menu .kb-select__opt:hover { background: var(--kb-hover); }
.home-menu .kb-select__opt[aria-checked="true"] { background: color-mix(in srgb, var(--kb-primary) 10%, transparent); }
.home-menu .kb-select__opt:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: -2px; }
/* an empty front page */
.home__empty {
max-width: 420px;
padding: 40px 16px;
border: 1px dashed var(--kb-line);
border-radius: var(--kb-radius-card);
}
.home__empty .kb-btn { margin-top: 10px; }
/* ---------- news: rich text written in Umbraco ---------- */
.home__rte {
max-width: 72ch;
font-size: 16px;
line-height: 1.55;
overflow-wrap: anywhere;
}
.home__rte :is(h1, h2, h3, h4, h5, h6) {
margin: 0 0 8px;
font-weight: 700;
line-height: 1.25;
color: var(--kb-text);
}
.home__rte h1 { font-size: 22px; letter-spacing: -.01em; }
.home__rte h2 { font-size: 19px; }
.home__rte h3 { font-size: 17px; }
.home__rte :is(h4, h5, h6) { font-size: 16px; }
.home__rte * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 20px; }
.home__rte :is(p, ul, ol, blockquote, pre, figure, table) { margin: 0 0 12px; }
.home__rte > :last-child { margin-bottom: 0; }
.home__rte :is(ul, ol) { padding-left: 1.4em; }
.home__rte li + li { margin-top: 4px; }
.home__rte blockquote {
padding: 2px 0 2px 14px;
border-left: 3px solid var(--kb-line-strong);
color: var(--kb-text-muted);
}
.home__rte img { height: auto; border-radius: var(--kb-radius); }
.home__rte hr { margin: 16px 0; border: 0; border-top: 1px solid var(--kb-line); }
.home__rte :is(code, pre) {
font-family: var(--kb-font-mono);
font-size: .9em;
border-radius: var(--kb-radius);
background: var(--kb-chip);
}
.home__rte code { padding: 1px 5px; }
.home__rte pre { padding: 10px 12px; overflow-x: auto; }
.home__rte pre code { padding: 0; background: none; }
/* a wide table scrolls inside the card */
.home__rte table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.home__rte :is(th, td) { padding: 6px 10px; border: 1px solid var(--kb-line); text-align: left; vertical-align: top; }
.home__rte th { font-weight: 700; background: color-mix(in srgb, var(--kb-text) 4%, var(--kb-card)); }
/* Inline colours in the rich text were picked by the editors for a white page. In dark they would sit on a dark
card, so there the text takes the theme's text colour; the content itself is never changed. A text colour
(style="color: …", not background-color, or ) gets --kb-text; text on an inline background
(a highlight, picked light for a white page) gets the dark page colour; the text-colour rule uses :where so the
highlight rule always wins where both apply. !important beats the inline style. Light keeps the editors' colours. */
:root[data-theme="dark"] .home__rte :where([style^="color" i], [style*=" color" i], [style*=";color" i], font[color]) {
color: var(--kb-text) !important;
}
:root[data-theme="dark"] .home__rte :is([style*="background" i], [style*="background" i] *) {
color: var(--kb-page) !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .home__rte :where([style^="color" i], [style*=" color" i], [style*=";color" i], font[color]) {
color: var(--kb-text) !important;
}
:root:not([data-theme]) .home__rte :is([style*="background" i], [style*="background" i] *) {
color: var(--kb-page) !important;
}
}
/* ---------- changelog (block list) ---------- */
.home__changelog {
max-width: 72ch;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--kb-line);
}
.home .home__changelog-title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--kb-text);
}
.home__changelog-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.home__changelog-list li {
position: relative;
padding-left: 16px;
line-height: 1.4;
}
.home__changelog-list li::before {
content: "";
position: absolute;
left: 2px;
top: .55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--kb-status-new);
}
.home__changelog-list strong { font-weight: 600; color: var(--kb-text); }
.home__changelog-date {
margin-left: 6px;
font-size: 13px;
color: var(--kb-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.home__changelog-empty { margin-top: 16px; color: var(--kb-text-muted); }
/* ---------- ticket guide ---------- */
.home__ticket p,
.home__steps { max-width: 72ch; line-height: 1.5; }
.home__steps {
display: grid;
gap: 8px;
margin: 10px 0 0;
padding-left: 1.4em;
}
.home__steps li::marker { color: var(--kb-text-muted); font-weight: 700; }
/* ---------- activity ---------- */
.home__timeline { list-style: none; }
.home__tl-item {
position: relative;
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 0 12px;
padding: 10px 0;
}
.home__tl-item + .home__tl-item { border-top: 1px solid var(--kb-line); }
.home__tl-marker {
width: 10px;
height: 10px;
margin: 5px 3px 0;
border-radius: 50%;
background: var(--kb-status-new);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-status-new) 18%, transparent);
}
.home__tl-time {
font-size: 13px;
color: var(--kb-text-muted);
font-variant-numeric: tabular-nums;
}
.home__tl-desc {
margin-top: 2px;
font-size: 15px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.home .home__tl-link { text-decoration: none; }
.home .home__tl-link:hover { text-decoration: underline; }
.home__tl-author {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: var(--kb-radius);
background: var(--kb-chip);
color: var(--kb-text);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
vertical-align: 1px;
}
/* skeleton in the shape of the rows (shown only while kb.loading.track waits > 200 ms) */
.home__skel-row {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 0 12px;
padding: 10px 0;
}
.home__skel-row + .home__skel-row { border-top: 1px solid var(--kb-line); }
.home .home__skel-dot { width: 10px; height: 10px; margin: 5px 3px 0; border-radius: 50%; }
.home__skel-lines { display: grid; gap: 7px; }
.home .home__skel-time { width: 120px; height: 10px; }
.home .home__skel-desc { height: 13px; }
.home__skel-row:nth-child(2) .kb-skel { --d: 0s; }
.home__skel-row:nth-child(3) .kb-skel { --d: .11s; }
.home__skel-row:nth-child(4) .kb-skel { --d: .22s; }
.home__skel-row:nth-child(5) .kb-skel { --d: .33s; }
.home__skel-row:nth-child(6) .kb-skel { --d: .44s; }
.home__skel-row:nth-child(2) .home__skel-desc { width: 72%; }
.home__skel-row:nth-child(3) .home__skel-desc { width: 54%; }
.home__skel-row:nth-child(4) .home__skel-desc { width: 80%; }
.home__skel-row:nth-child(5) .home__skel-desc { width: 46%; }
.home__skel-row:nth-child(6) .home__skel-desc { width: 64%; }
/* empty and error */
.home__state {
display: grid;
justify-items: center;
gap: 6px;
padding: 28px 12px;
text-align: center;
}
.home__state-icon { color: var(--kb-text-muted); }
.home__state-icon svg { display: block; }
.home .home__state-title {
margin: 4px 0 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--kb-text);
}
.home__state-text { font-size: 14px; color: var(--kb-text-muted); overflow-wrap: anywhere; }
.home__state--error .home__state-icon,
.home .home__state--error .home__state-title { color: var(--kb-status-err-ink); }
/* ---------- the gallery "Tilføj widget" (a kb.panel; its body is a .home too) ---------- */
.home-gal, .home-gal section { display: grid; gap: 12px; }
.home .home-gal__group { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--kb-text-muted); }
.home-gal__item {
display: grid;
gap: 8px;
padding: 12px;
border: 1px solid var(--kb-line);
border-radius: var(--kb-radius-card);
}
.home-gal__head, .home-gal__foot { display: flex; align-items: center; gap: 8px; }
.home .home-gal__name { flex: 1; margin: 0; font-size: 15px; font-weight: 700; }
.home-gal :is(.home-gal__desc, .home-gal__taken, .home-gal__na) { font-size: 13px; color: var(--kb-text-muted); }
.home-gal__sizes { display: flex; align-items: flex-end; gap: 3px; }
.home-gal__size { width: 8px; height: 8px; border-radius: 2px; background: var(--kb-control-edge); }
.home-gal__size--wide, .home-gal__size--large { width: 18px; }
.home-gal__size--tall, .home-gal__size--large { height: 18px; }
.home-gal__tabs { overflow-x: auto; }
.home-gal__taken, .home-gal__taken[hidden] + .kb-btn { margin-left: auto; }
.home-gal__preview .home-w { min-height: 220px; }
.home-gal__preview :is(.home-w--tall, .home-w--large) { min-height: 456px; }
.home-gal__none { padding: 24px 0; text-align: center; color: var(--kb-text-muted); }
/* ---------- Påmindelser (widgets/reminders.js; the dialog and "Alle påmindelser" are kb.panels outside .home) ---------- */
.rem { display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
.rem__new { display: flex; gap: 8px; }
.rem__new .kb-field { flex: 1; }
.home .rem__scroll { flex: 1; min-height: 0; }
.rem__all { align-self: flex-start; }
.rem ul, .rem-all ul { margin: 0; padding: 0; list-style: none; }
.rem__empty { padding: 8px 0; font-size: 14px; color: var(--kb-text-muted); }
.rem__fold summary { padding: 8px 0 4px; font-size: 14px; font-weight: 600; color: var(--kb-text-muted); cursor: pointer; }
.rem__fold summary:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; }
.rem__fold .kb-checklist > [data-id] { padding-inline-start: 34px; } /* in line with the rows above, which have a grip */
/* the badge and link go under the text when the row is narrow */
:is(.rem, .rem-all) .kb-checklist > [data-id] { flex-wrap: wrap; }
:is(.rem, .rem-all) .kb-checklist > [data-id] > .kb-check { flex: 1 1 9em; }
:is(.rem, .rem-all) .rem__link { color: var(--kb-status-new-ink); font-weight: 600; text-decoration: underline; }
:is(.rem-form, .rem-all) [hidden] { display: none !important; }
.rem-all { overflow-x: clip; }
.rem-all__title { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--kb-text-muted); }
.rem-all__title:first-child { margin-top: 0; }
.rem-form { display: grid; gap: 14px; }
.rem-form__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.rem-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* segments and weekday chips: native radios and checkboxes, visually hidden, on a 4 px chip */
.rem-seg, .rem-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rem-days legend { width: 100%; }
:is(.rem-seg, .rem-days) label { position: relative; }
:is(.rem-seg, .rem-days) input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
:is(.rem-seg, .rem-days) span {
display: block;
padding: 6px 12px;
border: 1px solid var(--kb-control-edge);
border-radius: var(--kb-radius);
background: var(--kb-card);
color: var(--kb-text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
:is(.rem-seg, .rem-days) input:checked + span { border-color: var(--kb-primary); background: var(--kb-primary); color: var(--kb-primary-ink); }
:is(.rem-seg, .rem-days) input:focus-visible + span { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; }
:is(.rem-seg, .rem-days) label:hover input:not(:checked) + span { border-color: var(--kb-primary); }
/* ---------- Det nåede du (widgets/achievements.js; "Det her tæller med" is a .home-menu popover) ---------- */
.ach { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.ach__top { display: flex; align-items: center; gap: 8px; }
.ach__top .kb-tabs { flex: 1; min-width: 0; }
/* minmax(0, 1fr): a chart's svg must not hold the column wider than the card (it redraws at the new width) */
.home .ach__scroll { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-height: 0; max-height: none; }
.ach__main { display: grid; gap: 10px 20px; }
.home-w:is(.home-w--wide, .home-w--large) .ach__main { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.ach ul, .home-menu ul { margin: 0; padding: 0; list-style: none; }
.ach__main ul { display: grid; gap: 6px; font-size: 14px; }
.ach__main li > * { display: inline-flex; align-items: center; gap: 6px; }
.ach__main li svg { flex: none; color: var(--kb-text-muted); }
.ach :is(p, small) { font-size: 13px; color: var(--kb-text-muted); }
.ach .ach__empty { padding: 16px 0; font-size: 14px; text-align: center; }
.ach .ach__rh { font-weight: 700; }
.ach__rh + ul { display: grid; gap: 6px; font-size: 14px; }
.ach__rh + ul small { display: block; }
.home-menu ul { display: grid; gap: 4px; max-width: 280px; padding: 2px 8px 6px; font-size: 14px; }
.home-menu li::before { content: "• "; color: var(--kb-text-muted); }
/* ---------- CFS Shop admin, Købsanmodninger (widgets/cfs-shop-admin.requests.js) ---------- */
.cfsr { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfsr__h { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--kb-text-muted); }
.cfsr__tabs { flex: none; }
.cfsr__list { display: grid; margin: 0; padding: 0; list-style: none; }
.cfsr__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 4px 12px;
padding: 8px 4px;
border-bottom: 1px solid var(--kb-line);
font-size: 14px;
cursor: pointer;
}
.cfsr__row:hover { background: var(--kb-hover); }
.cfsr__car { overflow: hidden; color: var(--kb-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.cfsr__bid { font-variant-numeric: tabular-nums; }
.cfsr .cfsr__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
/* ---------- Biler til salg, Advarsler (widgets/cars-for-sale.warnings.js) ---------- */
.cfsw { min-width: 0; }
.cfsw__list { display: grid; margin: 0; padding: 0; list-style: none; }
.cfsw__item { border-bottom: 1px solid var(--kb-line); }
.cfsw__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 4px 12px;
padding: 8px 4px;
color: var(--kb-text);
font-size: 14px;
text-decoration: none;
}
.cfsw__row:hover { background: var(--kb-hover); }
.cfsw__num { font-variant-numeric: tabular-nums; }
.cfsw__num.is-warn { color: var(--kb-status-warn-ink); }
.cfsw__spark { padding: 0 4px 6px; }
.cfsw .cfsw__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
/* ---------- Deadlines, Mine deadlines (widgets/deadlines.mine.js) ---------- */
.dlm { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 100%; }
.dlm__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dlm__top[hidden], .dlm__list[hidden] { display: none; }
.dlm .kb-chart--ring .kb-chart__fig { width: 104px; }
.dlm__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 14px; font-weight: 600; }
.dlm__ring + .dlm__sum { flex: 1 1 6em; flex-direction: column; align-items: flex-start; }
.home .dlm__list { flex: 1; min-height: 0; }
.dlm .dlm__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
/* ---------- Tickets, Mine sager (widgets/tickets.mine.js) ---------- */
.tkw { min-width: 0; }
.tkw__sum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font-size: 14px; color: var(--kb-text-muted); }
.tkw__sum[hidden], .tkw__empty[hidden] { display: none; }
.tkw__sum strong { color: var(--kb-text); font-variant-numeric: tabular-nums; }
.tkw__sum strong.is-warn { color: var(--kb-status-err-ink); }
.tkw__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.tkw__item { border-bottom: 1px solid var(--kb-line); }
.tkw__row {
display: flex;
align-items: center;
gap: 4px 8px;
padding: 8px 4px;
color: var(--kb-text);
font-size: 14px;
text-decoration: none;
}
.tkw__row:hover { background: var(--kb-hover); }
.tkw__title { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tkw .kb-badge { flex: none; white-space: nowrap; }
.tkw .tkw__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
/* ---------- Feriekalender, Mine fridage (widgets/holiday.mine.js) ---------- */
.hol { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 100%; }
.hol__list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; }
.hol__item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--kb-line); font-size: 14px; }
.hol__when { flex: 1 1 8em; min-width: 0; font-weight: 600; }
.hol__days { color: var(--kb-text-muted); }
.hol .kb-badge { flex: none; white-space: nowrap; }
.hol__sum { margin: 0; font-size: 14px; color: var(--kb-text-muted); }
.hol__sum[hidden], .hol__empty[hidden] { display: none; }
.hol .hol__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
.hol-ap { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 100%; color: var(--kb-text); text-decoration: none; }
.hol-ap:hover .hol-ap__t { text-decoration: underline; }
.hol-ap__n { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.hol-ap__t { font-size: 14px; color: var(--kb-text-muted); }
/* ---------- Lagerbiler, Aktivitet og prisforslag (widgets/sales-activity.js); the proposals variant reuses .hol-ap ---------- */
.sad { display: flex; align-items: center; gap: 8px 16px; min-width: 0; min-height: 100%; }
.sad__main { flex: 1; min-width: 0; }
.sad__cap { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--kb-text-muted); }
.sad__chart[hidden], .sad__empty[hidden] { display: none; }
.sad .sad__empty { padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
.sad__ftz { display: flex; flex: none; flex-direction: column; gap: 2px; max-width: 9em; color: var(--kb-text); text-decoration: none; }
.sad__ftz:hover .sad__t { text-decoration: underline; }
.sad__n { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.sad__t { font-size: 14px; color: var(--kb-text-muted); }
/* ---------- Biloversigt, Mine salg og indkøb (widgets/car-list.my-sales.js) ---------- */
.mys { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; min-width: 0; min-height: 100%; }
.mys__nums { display: grid; grid-template-columns: auto auto; gap: 4px 24px; min-width: 0; }
/* clip: the chart screen-reader table is absolute and would stretch the scroll area */
.mys__stat, .mys__chart { min-width: 0; overflow: clip; }
.mys__lbl { margin: 0 0 2px; font-size: 14px; color: var(--kb-text-muted); }
.mys__bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); align-content: center; gap: 0 16px; min-width: 0; }
.mys__chart .mys__lbl { margin: 0; font-size: 13px; line-height: 16px; }
.mys__note { grid-column: 1 / -1; margin: 0; max-width: 20em; font-size: 12px; line-height: 16px; color: var(--kb-text-muted); }
.mys .mys__msg { grid-column: 1 / -1; padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
.mys[hidden], .mys__msg[hidden], .mys__nums[hidden], .mys__bars[hidden], .mys__note[hidden] { display: none; }
@media (max-width: 640px) { .mys { grid-template-columns: 1fr; } .mys__nums { grid-template-columns: 1fr 1fr; } }
/* ---------- Byttepris, Hurtig beregning (widgets/trade-in.js, trade-in-calc.js) ----------
The card body owns scrolling in every layout. From 560 px of card: the fields sit in one row; in Wide the
result sits beside them, in Large below them with the price box and the specs side by side. */
.tiq { container: tiq / inline-size; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 100%; }
.tiq__tabs { flex: none; }
.tiq__calc, .tiq__hist { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; }
.tiq__calc { min-width: 0; margin: 0; }
.tiq :is(.tiq__calc, .tiq__hist)[hidden] { display: none; } /* also over the grid below */
.tiq__form { display: flex; flex: none; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.tiq__v { flex: 1 1 11em; }
.tiq__km { flex: 1 1 7em; }
.tiq__form > .kb-btn { flex: none; margin-top: 22px; } /* level with the inputs, under their labels */
.tiq .tiq__out { flex: none; max-height: none; margin: 0; padding: 0; overflow: visible; }
.tiq__hint { margin: 0; font-size: 14px; color: var(--kb-text-muted); }
.tiq__box { min-width: 0; }
.tiq__h { margin: 0; font-size: 14px; font-weight: 600; color: var(--kb-text); }
.tiq__h:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; border-radius: var(--kb-radius); }
.tiq__amount { margin: 2px 0 4px; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--kb-status-ok-ink); font-variant-numeric: tabular-nums; }
.tiq__hyb { margin: 6px 0; padding: 6px 8px; border: 2px solid var(--kb-status-err); border-radius: var(--kb-radius);
background: var(--kb-status-err-bg); color: var(--kb-status-err-ink); font-size: 12px; font-weight: 700; line-height: 1.35; }
.tiq__miss, .tiq__note { margin: 4px 0; font-size: 13px; line-height: 1.4; color: var(--kb-text-muted); }
.tiq__miss strong { color: var(--kb-status-err-ink); }
.tiq__problems { margin: 4px 0; padding-left: 18px; font-size: 13px; color: var(--kb-text-muted); }
.tiq__link { font-size: 13px; }
.tiq__specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 6px 12px; margin: 10px 0 0; }
.tiq__fact { min-width: 0; }
.tiq__fact dt { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--kb-text-muted); }
.tiq__fact dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--kb-text); overflow-wrap: anywhere; }
.tiq .tiq__list { flex: 1; min-height: 0; max-height: none; margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; }
.tiq__list[hidden], .tiq__empty[hidden] { display: none; }
.tiq__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2px 12px;
padding: 6px 4px;
border-bottom: 1px solid var(--kb-line);
font-size: 14px;
cursor: pointer;
}
.tiq__row:hover { background: var(--kb-hover); }
.tiq__use { grid-column: 1; display: grid; min-width: 0; padding: 0; border: 0; background: none; color: var(--kb-text); font: inherit; text-align: left; cursor: pointer; }
.tiq__use:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; border-radius: var(--kb-radius); }
.tiq__car { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tiq__meta { font-size: 12px; color: var(--kb-text-muted); }
.tiq__row > :is(kb-vin, .tiq__id) { grid-row: 2; grid-column: 1; justify-self: start; font-size: 13px; }
.tiq__price { grid-row: 1; grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.tiq .tiq__empty { margin: 0; padding: 16px 0; font-size: 14px; text-align: center; color: var(--kb-text-muted); }
@container tiq (min-width: 560px) {
.tiq__form { flex-wrap: nowrap; }
.tiq__v { flex: 0 1 12em; }
.tiq__km { flex: 0 1 7.5em; }
.tiq .tiq__calc { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 20px; }
.tiq .tiq__out { margin: 0; }
.home-w--large .tiq .tiq__calc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.home-w--large .tiq__out:has(.tiq__box) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 0 20px; }
.home-w--large .tiq__amount { font-size: 36px; }
.home-w--large .tiq__specs { margin: 0; }
.tiq__row { grid-template-columns: minmax(0, 1fr) auto auto; }
.tiq__row > :is(kb-vin, .tiq__id) { grid-row: 1; grid-column: 2; }
.tiq__price { grid-column: 3; }
}
@media (max-width: 480px) {
.home .home__title { font-size: 26px; }
}
}