/* Kravspec — Contract dashboard surface.
   Fuldsides kontraktside: headerbånd med statuspill, KPI-række, indholdskort
   i to kolonner (stamdata + faser / parter + ændringslog). Deler tokens med
   kravspec.theme.css og designsproget fra Business Case-modulet
   (kravspec.businesscase.css). Alle klasser er cd-præfiksede. */

.cd-page { display: flex; flex-direction: column; gap: 1rem; }

@keyframes cd-enter { from { opacity: 0; transform: translateY(10px); } }
.cd-in { animation: cd-enter .4s var(--k-ease) backwards; }

/* ---------- headerbånd ---------- */
.cd-head {
    position: relative; overflow: hidden;
    background: var(--k-surface); border: 1px solid var(--k-line-soft); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-sm); padding: 1.15rem 1.4rem 1.25rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.cd-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--k-faint), var(--k-muted)); }
.cd-head--active::before     { background: linear-gradient(90deg, #2fae6b, var(--k-success)); }
.cd-head--expired::before    { background: linear-gradient(90deg, #e0a72f, var(--k-warning)); }
.cd-head--terminated::before { background: linear-gradient(90deg, #e05d4f, #a83226); }

.cd-head-top { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.cd-icon {
    width: 46px; height: 46px; border-radius: var(--k-radius-md); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--k-accent-tint); color: var(--k-accent); font-size: 1.35rem;
}
.cd-head--active .cd-icon     { background: var(--k-success-bg); color: var(--k-success); }
.cd-head--expired .cd-icon    { background: var(--k-warning-bg); color: var(--k-warning); }
.cd-head--terminated .cd-icon { background: var(--k-danger-bg); color: var(--k-danger); }

.cd-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--k-faint); }
.cd-eyebrow a { color: inherit; text-decoration: none; }
.cd-eyebrow a:hover { color: var(--k-accent); text-decoration: underline; }
.cd-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--k-ink); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cd-head-sub { font-size: .85rem; color: var(--k-muted); margin: 0; max-width: 72ch; }
.cd-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.cd-provenance {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; color: var(--k-muted);
}
.cd-provenance i { color: var(--k-accent); }

/* statuspiller (kontrakt + faser) */
.cd-pill {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem;
    border-radius: var(--k-radius-pill); font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.cd-pill--draft      { background: var(--k-fill); color: var(--k-muted); border: 1px solid var(--k-line-soft); }
.cd-pill--active     { background: var(--k-success-bg); color: var(--k-success); border: 1px solid var(--k-success-border); }
.cd-pill--expired    { background: var(--k-warning-bg); color: var(--k-warning); border: 1px solid var(--k-warning-border); }
.cd-pill--terminated { background: var(--k-danger-bg); color: var(--k-danger); border: 1px solid var(--k-danger-border); }
.cd-pill--progress   { background: var(--k-accent-tint); color: var(--k-accent); border: 1px solid var(--k-accent-border); }
.cd-pill--info       { background: var(--k-info-bg); color: var(--k-info); border: 1px solid var(--k-info-border); }

/* ---------- KPI-række ---------- */
.cd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cd-kpi {
    position: relative; overflow: hidden; background: var(--k-surface); border: 1px solid var(--k-line-soft);
    border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-sm); padding: .9rem 1.05rem .95rem;
    display: flex; flex-direction: column; gap: .15rem;
    transition: transform .18s var(--k-ease), box-shadow .18s var(--k-ease);
}
.cd-kpi:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-md); }
.cd-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.cd-kpi--end::after      { background: linear-gradient(90deg, var(--k-accent-light), var(--k-accent)); }
.cd-kpi--duration::after { background: linear-gradient(90deg, #e0a72f, var(--k-warning)); }
.cd-kpi--value::after    { background: linear-gradient(90deg, #2fae6b, var(--k-success)); }
.cd-kpi--parties::after  { background: linear-gradient(90deg, #8f6fd8, var(--k-info)); }
.cd-kpi-label { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.cd-kpi-value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; color: var(--k-ink); }
.cd-kpi--end .cd-kpi-value   { color: var(--k-accent); }
.cd-kpi--value .cd-kpi-value { color: var(--k-success); }
.cd-kpi-sub { font-size: .74rem; color: var(--k-muted); }

/* ---------- layoutgitter ---------- */
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }

/* Jævnere fordeling til sider hvor sidefeltet bærer rigtigt indhold
   (fristsiden: forpligtelser + optioner) */
.cd-grid--split { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); }

.cd-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ---------- kort ---------- */
.cd-card {
    background: var(--k-surface); border: 1px solid var(--k-line-soft); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-sm); padding: 1.05rem 1.2rem 1.15rem;
}
.cd-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.cd-card-icon {
    width: 34px; height: 34px; border-radius: var(--k-radius); flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    background: var(--k-bg); color: var(--k-ink-soft);
}
.cd-card-icon--accent  { background: var(--k-accent-tint); color: var(--k-accent); }
.cd-card-icon--success { background: var(--k-success-bg); color: var(--k-success); }
.cd-card-icon--warning { background: var(--k-warning-bg); color: var(--k-warning); }
.cd-card-icon--info    { background: var(--k-info-bg); color: var(--k-info); }
.cd-card-title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--k-ink); }
.cd-card-sub { font-size: .74rem; color: var(--k-muted); }
.cd-card-spacer { margin-left: auto; }

.cd-add {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; cursor: pointer;
    border: 1px dashed var(--k-accent-border); border-radius: var(--k-radius-pill);
    background: var(--k-accent-tint); color: var(--k-accent-strong); font-size: .74rem; font-weight: 600;
    transition: border-color .15s ease;
}
.cd-add:hover:not(:disabled) { border-color: var(--k-accent); }
.cd-add:disabled { opacity: .5; cursor: default; }

.cd-form {
    padding: .8rem .9rem; margin-bottom: .8rem;
    border: 1px solid var(--k-accent-border); border-radius: var(--k-radius-md); background: var(--k-bg-alt);
    animation: cd-enter .25s var(--k-ease) backwards;
}

.cd-subhead { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); margin: .9rem 0 .35rem; }
.cd-empty-hint { font-size: .8rem; color: var(--k-faint); padding: .3rem 0; }

/* ---------- stamdata-fakta ---------- */
.cd-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.4rem; row-gap: .45rem; margin: 0; }
.cd-facts dt { font-size: .74rem; font-weight: 600; color: var(--k-muted); padding-top: .1rem; }
.cd-facts dd { margin: 0; font-size: .86rem; color: var(--k-ink); }
.cd-facts dd .cd-fact-note { color: var(--k-muted); font-size: .78rem; }

/* ---------- tags (roller, moduler) ---------- */
.cd-tag {
    display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem;
    border-radius: var(--k-radius-pill); font-size: .68rem; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent; text-decoration: none;
}
.cd-tag--info    { background: var(--k-info-bg); color: var(--k-info); border-color: var(--k-info-border); }
.cd-tag--success { background: var(--k-success-bg); color: var(--k-success); border-color: var(--k-success-border); }
.cd-tag--accent  { background: var(--k-accent-tint); color: var(--k-accent-strong); border-color: var(--k-accent-border); }
.cd-tag--warning { background: var(--k-warning-bg); color: var(--k-warning); border-color: var(--k-warning-border); }
.cd-tag--neutral { background: var(--k-fill); color: var(--k-muted); border-color: var(--k-line-soft); }
a.cd-tag:hover { filter: brightness(.96); }

/* personchips (kontraktmanagere, fasedeltagere) */
.cd-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .4rem .22rem .22rem;
    border-radius: var(--k-radius-pill); background: var(--k-fill); border: 1px solid var(--k-line-soft);
    font-size: .78rem; color: var(--k-ink-soft);
}
.cd-chip-avatar {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--k-accent-tint); color: var(--k-accent-strong); font-size: .62rem; font-weight: 700;
}
.cd-chip-x {
    border: none; background: transparent; color: var(--k-faint); cursor: pointer; padding: 0 .15rem;
    font-size: .72rem; line-height: 1; border-radius: var(--k-radius-sm);
    transition: color .15s ease;
}
.cd-chip-x:hover { color: var(--k-danger); }
.cd-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ---------- kontraktparter ---------- */
.cd-party { padding: 1rem .15rem 1.05rem; border-bottom: 1px solid var(--k-line-soft); }
.cd-party:last-child { border-bottom: none; padding-bottom: .35rem; }
.cd-party-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.cd-party-name { font-size: .88rem; font-weight: 700; color: var(--k-ink); }
.cd-party-cvr { font-size: .74rem; color: var(--k-faint); }
.cd-contact { display: flex; align-items: center; gap: .6rem; padding: .45rem 0 .45rem .25rem; font-size: .8rem; color: var(--k-ink-soft); }
.cd-contact-star { border: none; background: transparent; padding: 0; cursor: pointer; color: var(--k-faint); font-size: .8rem; }
.cd-contact-star:hover { color: var(--k-warning); }
.cd-contact-star--primary { color: var(--k-warning); cursor: default; }
.cd-contact-meta { color: var(--k-faint); font-size: .72rem; }

/* diskrete slet-knapper */
.cd-row-del {
    flex: none; border: none; background: transparent; color: var(--k-faint); cursor: pointer;
    padding: .1rem .3rem; border-radius: var(--k-radius-sm); font-size: .8rem;
    opacity: .35; transition: opacity .15s ease, color .15s ease;
}
.cd-party:hover .cd-row-del, .cd-phase:hover > .cd-phase-head .cd-row-del, .cd-contact:hover .cd-row-del { opacity: 1; }
.cd-row-del:hover { color: var(--k-danger); }
/* faint-at-low-opacity disappears on dark surfaces; lift one step */
:root[data-theme="dark"] .cd-row-del { color: var(--k-muted); }

/* ---------- faser ---------- */
.cd-phase {
    position: relative; border: 1px solid var(--k-line-soft); border-radius: var(--k-radius-md);
    padding: .8rem .95rem .85rem 1.1rem; margin-bottom: .7rem; background: var(--k-surface);
    overflow: hidden;
}
.cd-phase:last-child { margin-bottom: 0; }
.cd-phase::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--k-line-soft); }
.cd-phase--now::before  { background: linear-gradient(180deg, var(--k-accent-light), var(--k-accent)); }
.cd-phase--done::before { background: linear-gradient(180deg, #2fae6b, var(--k-success)); }
.cd-phase-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cd-phase-name { font-size: .92rem; font-weight: 700; color: var(--k-ink); }
.cd-phase-dates { font-size: .74rem; color: var(--k-faint); }
.cd-phase-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; margin-top: .65rem; }

@media (max-width: 900px) {
    .cd-phase-body { grid-template-columns: 1fr; }
}

/* ---------- kalender-tidslinje (UI-4) ---------- */
.cd-cal-month {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--k-muted); margin: 1rem 0 .35rem; padding-bottom: .25rem;
    border-bottom: 1px solid var(--k-line-soft);
}
.cd-cal-month:first-of-type { margin-top: 0; }

.cd-cal-row {
    display: flex; align-items: center; gap: .7rem; padding: .45rem .25rem;
    border-radius: var(--k-radius); font-size: .84rem; color: var(--k-ink-soft);
    transition: background-color .15s ease;
}
.cd-cal-row:hover { background: var(--k-bg); }
.cd-cal-row--handled { opacity: .55; }
.cd-cal-row--handled .cd-cal-title { text-decoration: line-through; }

.cd-cal-date {
    width: 46px; flex: none; text-align: center; border-radius: var(--k-radius);
    background: var(--k-bg); border: 1px solid var(--k-line-soft); padding: .2rem 0 .25rem;
    line-height: 1.15;
}
.cd-cal-date b { display: block; font-size: .95rem; font-weight: 700; color: var(--k-ink); }
.cd-cal-date span { font-size: .6rem; font-weight: 600; text-transform: uppercase; color: var(--k-muted); }
.cd-cal-date--overdue { background: var(--k-danger-bg); border-color: var(--k-danger-border); }
.cd-cal-date--overdue b, .cd-cal-date--overdue span { color: var(--k-danger); }

.cd-cal-title { font-weight: 600; color: var(--k-ink); min-width: 0; }
.cd-cal-meta { font-size: .72rem; color: var(--k-faint); }
.cd-cal-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; flex: none; }

.cd-cal-done {
    color: var(--k-success); font-size: .95rem; flex: none;
}

/* ---------- deadline-rækker (forpligtelser/optioner) ---------- */
.cd-dl { padding: .6rem .15rem; border-bottom: 1px solid var(--k-line-soft); }
.cd-dl:last-child { border-bottom: none; }
.cd-dl-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cd-dl-title { font-size: .86rem; font-weight: 700; color: var(--k-ink); }
.cd-dl-desc { font-size: .78rem; color: var(--k-muted); margin: .15rem 0 0; }
.cd-dl-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .25rem; font-size: .74rem; color: var(--k-faint); }
.cd-dl-meta i { margin-right: .25rem; }

/* ---------- ændringsanmodninger (UI-5) ---------- */
.cd-word {
    border-left: 3px solid var(--k-line); background: var(--k-bg-alt);
    border-radius: 0 var(--k-radius) var(--k-radius) 0;
    padding: .55rem .8rem; margin: .3rem 0;
    font-size: .84rem; color: var(--k-ink-soft); white-space: pre-line;
}
.cd-word--before { border-left-color: var(--k-line); }
.cd-word--after  { border-left-color: var(--k-success); background: var(--k-success-bg); }
.cd-word--counselor { border-left-color: var(--k-accent); background: var(--k-accent-tint); }
.cd-word-label {
    display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--k-muted); margin-bottom: .15rem;
}

/* trin i regelvurderingen */
.cd-step { display: flex; gap: .7rem; padding: .55rem 0; }
.cd-step-num {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--k-accent-tint); color: var(--k-accent-strong);
    font-size: .72rem; font-weight: 700;
}
.cd-step-body { min-width: 0; flex: 1; }
.cd-step-q { font-size: .84rem; font-weight: 600; color: var(--k-ink); margin-bottom: .25rem; }

/* notat Q&A */
.cd-qa { padding: .45rem 0; border-bottom: 1px solid var(--k-line-soft); }
.cd-qa:last-child { border-bottom: none; }
.cd-qa-prompt { font-size: .8rem; font-weight: 600; color: var(--k-ink); }
.cd-qa-answer { font-size: .82rem; color: var(--k-ink-soft); white-space: pre-line; margin: .1rem 0 0; }

/* ---------- ændringslog ---------- */
.cd-chg { display: flex; gap: .55rem; padding: .4rem 0; font-size: .78rem; border-bottom: 1px solid var(--k-line-soft); color: var(--k-ink-soft); }
.cd-chg:last-child { border-bottom: none; }
.cd-chg > i { color: var(--k-accent); flex: none; margin-top: .1rem; }
.cd-chg-meta { color: var(--k-faint); font-size: .7rem; }

/* ---------- responsivt ---------- */
@media (max-width: 1100px) {
    .cd-grid { grid-template-columns: 1fr; }
    .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .cd-in, .cd-form { animation: none; }
    .cd-kpi:hover { transform: none; }
}