/* ═══════════════════════════════════════════════════════════════════
   COMPONENT PRIMITIVES - built on design-tokens.css
   Reusable utility classes. Consumes only tokens, no hardcoded values.
   Load AFTER design-tokens.css.
═══════════════════════════════════════════════════════════════════ */

/* ─── CARD ──────────────────────────────────────────────────── */
.ds-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base), box-shadow var(--motion-base);
}
.ds-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.ds-card--flat {
    box-shadow: none;
}
.ds-card--flat:hover {
    transform: none;
    box-shadow: var(--shadow-xs);
}
.ds-card--solid {
    background: var(--color-card-solid);
}
.ds-card--compact {
    padding: var(--space-3);
}
.ds-card--roomy {
    padding: var(--space-7);
}

/* ─── KPI STAT ──────────────────────────────────────────────── */
.ds-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.ds-kpi__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-3);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ds-kpi__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-1);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
}
.ds-kpi__delta {
    font-size: var(--font-size-xs);
    color: var(--color-text-3);
}
.ds-kpi__delta--up { color: var(--color-success); }
.ds-kpi__delta--down { color: var(--color-danger); }
.ds-kpi__delta--flat { color: var(--color-text-3); }

/* ─── PILL ──────────────────────────────────────────────────── */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}
.ds-pill--accent {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    line-height: var(--line-height-tight);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--motion-fast), filter var(--motion-fast),
                background var(--motion-fast), border-color var(--motion-fast);
    white-space: nowrap;
    user-select: none;
}
.ds-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.ds-btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.ds-btn--secondary {
    background: var(--color-surface);
    color: var(--color-text-1);
    border-color: var(--color-border);
}
.ds-btn--secondary:hover {
    background: var(--color-surface-hover);
}
.ds-btn--ghost {
    background: transparent;
    color: var(--color-text-2);
}
.ds-btn--ghost:hover {
    background: var(--color-surface);
    color: var(--color-text-1);
}
.ds-btn--danger {
    background: var(--color-danger);
    color: var(--color-on-accent);
}
.ds-btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}
.ds-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-md);
}
.ds-btn--block {
    width: 100%;
}

/* ─── INPUT / SELECT ────────────────────────────────────────── */
.ds-input,
.ds-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: var(--line-height-normal);
    transition: border-color var(--motion-fast), background var(--motion-fast);
    box-sizing: border-box;
}
.ds-input:focus,
.ds-select:focus {
    border-color: var(--color-accent);
    outline: none;
    background: var(--color-surface-hover);
}
.ds-input::placeholder {
    color: var(--color-text-3);
}
.ds-input--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}
.ds-select {
    cursor: pointer;
    appearance: none;
    padding-right: var(--space-7);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right var(--space-4) top 50%, right var(--space-3) top 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

/* ─── DATA ROW ──────────────────────────────────────────────── */
.ds-data-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: background var(--motion-fast);
}
.ds-data-row:hover {
    background: var(--color-surface-hover);
}
.ds-data-row + .ds-data-row {
    margin-top: var(--space-1);
}
.ds-data-row__primary {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-1);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-data-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-3);
}
.ds-data-row__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-1);
    font-variant-numeric: tabular-nums;
}

/* ─── EMPTY STATE ───────────────────────────────────────────── */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-5);
    text-align: center;
    color: var(--color-text-3);
}
.ds-empty__icon {
    font-size: var(--font-size-2xl);
    opacity: 0.5;
    line-height: 1;
}
.ds-empty__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-2);
}
.ds-empty__body {
    font-size: var(--font-size-sm);
    max-width: 320px;
    line-height: var(--line-height-relaxed);
}

/* ─── CHART FRAME ───────────────────────────────────────────── */
.ds-chart-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    box-sizing: border-box;
}
.ds-chart-frame--sm { height: 160px; }
.ds-chart-frame--lg { height: 400px; }
.ds-chart-frame canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}
.ds-badge--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.ds-badge--warn {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}
.ds-badge--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.ds-badge--info {
    background: var(--color-info-bg);
    color: var(--color-info);
}
.ds-badge--neutral {
    background: var(--color-surface);
    color: var(--color-text-2);
}

/* ─── DIVIDER / SPACER ──────────────────────────────────────── */
.ds-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-4) 0;
    border: 0;
}

/* ─── STACK / CLUSTER helpers ──────────────────────────────── */
.ds-stack { display: flex; flex-direction: column; }
.ds-stack--2 { gap: var(--space-2); }
.ds-stack--3 { gap: var(--space-3); }
.ds-stack--4 { gap: var(--space-4); }
.ds-stack--5 { gap: var(--space-5); }

.ds-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ds-cluster--2 { gap: var(--space-2); }
.ds-cluster--3 { gap: var(--space-3); }
.ds-cluster--4 { gap: var(--space-4); }

/* ─── SECTION TITLE ─────────────────────────────────────────── */
.ds-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-1);
}
.ds-section-title__aside {
    font-size: var(--font-size-xs);
    color: var(--color-text-3);
    font-weight: var(--font-weight-regular);
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ds-card { padding: var(--space-4); }
    .ds-card--roomy { padding: var(--space-5); }
    .ds-chart-frame { height: 220px; }
    .ds-kpi__value { font-size: var(--font-size-xl); }
}

/* ─── WORKDESK ──────────────────────────────────────────────── */

/* Header section */
.wd-header-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.wd-stats-bar {
    display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
    background: var(--surface); border-radius: 10px;
    border: 1px solid var(--border);
}
.wd-stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .75rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; white-space: nowrap;
}
.wd-stat--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.wd-stat--amber  { background: rgba(245,158,11,.1); color: var(--amber); }
.wd-stat--info   { background: var(--color-info-bg); color: var(--color-info); }
.wd-stat svg     { flex-shrink: 0; }

/* Toolbar */
.wd-toolbar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; justify-content: space-between;
}
.wd-toolbar-left  { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.wd-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.wd-title {
    font-family: var(--font-brand, inherit); font-size: 1.25rem;
    font-weight: 900; color: var(--text-1); margin: 0; white-space: nowrap;
}

/* Tabs */
.wd-tabs { display: flex; gap: 2px; }
.wd-tab {
    padding: 6px 14px; font-size: .78rem; font-weight: 500;
    border: none; border-bottom: 2px solid transparent;
    background: transparent; color: var(--text-3);
    cursor: pointer; border-radius: 6px 6px 0 0;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s, background .15s;
}
.wd-tab:hover { color: var(--text-1); background: rgba(0,0,0,.03); }
.wd-tab--active {
    font-weight: 700; border-bottom-color: var(--accent);
    color: var(--accent); background: rgba(var(--accent-rgb),.06);
}
.wd-tab-badge {
    font-size: .65rem; font-weight: 700; padding: 1px 6px;
    border-radius: 10px; background: var(--border);
    color: var(--text-3); line-height: 1.5;
}
.wd-tab--active .wd-tab-badge { background: rgba(var(--accent-rgb),.2); color: var(--accent); }

/* Search */
.wd-search-wrap {
    position: relative; display: flex; align-items: center;
}
.wd-search-icon {
    position: absolute; left: 10px; color: var(--text-3);
    pointer-events: none; flex-shrink: 0;
}
.wd-search-input {
    padding: 8px 14px 8px 32px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-1); font-size: .78rem; font-family: inherit;
    width: 220px; transition: border-color .15s, width .2s;
    outline: none;
}
.wd-search-input:focus { border-color: var(--accent); width: 260px; }

/* View toggle */
.wd-view-toggle {
    display: flex; border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
}
.wd-view-btn {
    padding: 7px 11px; border: none; border-right: 1px solid var(--border);
    background: var(--surface); color: var(--text-3);
    cursor: pointer; display: flex; align-items: center;
    transition: background .15s, color .15s;
}
.wd-view-btn:last-child { border-right: none; }
.wd-view-btn:hover { background: var(--surface-hover, var(--border)); color: var(--text-1); }
.wd-view-btn--active { background: var(--accent); color: var(--color-on-accent, #fff); }

/* Primary button */
.wd-btn-primary {
    padding: 8px 16px; border-radius: 8px; border: none;
    background: var(--accent); color: var(--color-on-accent, #fff);
    font-weight: 700; font-size: .82rem; cursor: pointer;
    white-space: nowrap; transition: opacity .15s;
}
.wd-btn-primary:hover { opacity: .88; }

/* Filter bar */
.wd-filter-bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Kanban */
.wd-kanban {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px; align-items: start;
}

/* Column */
.wd-col {
    background: var(--surface); border-radius: 12px;
    padding: 12px; min-height: 200px; min-width: 0;
    overflow: hidden; transition: background .15s, box-shadow .15s;
}
/* Drop-target highlight (touch-drag toggler klassen; mus bruger inline-style) */
.wd-col--drag-over {
    background: rgba(var(--accent-rgb), .06);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.wd-col-header {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 10px; min-width: 0;
}
.wd-col-handle {
    color: var(--text-3); cursor: grab; flex-shrink: 0;
    line-height: 1; padding: 3px 2px; border-radius: 4px;
    display: flex; align-items: center;
    transition: color .15s, background .15s;
}
.wd-col-handle:hover { color: var(--text-1); background: var(--border); }
.wd-col-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.wd-col-name {
    font-weight: 700; font-size: .88rem; color: var(--text-1);
    word-break: break-word; overflow-wrap: anywhere;
    min-width: 0; flex: 1;
}
.wd-col-count {
    font-size: .7rem; color: var(--text-3);
    background: var(--border); padding: 2px 8px;
    border-radius: 10px; flex-shrink: 0;
}
.wd-col-action {
    padding: 4px 6px; border: none; border-radius: 5px;
    background: transparent; color: var(--text-3);
    cursor: pointer; display: flex; align-items: center;
    flex-shrink: 0; transition: color .15s, background .15s;
}
.wd-col-action:hover { color: var(--accent); background: rgba(var(--accent-rgb),.1); }
.wd-col-action--danger:hover { color: var(--color-danger); background: var(--color-danger-bg); }

.wd-col-body {
    display: flex; flex-direction: column; gap: 5px;
    min-height: 80px;
}

.wd-empty-col {
    padding: 24px 16px; text-align: center;
    color: var(--text-3); font-size: .78rem;
    border: 1px dashed var(--border); border-radius: 8px;
    line-height: 1.5;
}

/* Add column button */
.wd-col-add {
    background: transparent; border: 2px dashed var(--border);
    border-radius: 12px; min-height: 200px; color: var(--text-3);
    cursor: pointer; font-family: inherit; font-size: .82rem;
    font-weight: 600; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    transition: border-color .15s, color .15s, background .15s;
}
.wd-col-add:hover {
    border-color: var(--accent); color: var(--accent);
    background: rgba(var(--accent-rgb),.03);
}
.wd-col-add-icon { font-size: 1.6rem; line-height: 1; }

/* Card */
.wd-card {
    background: var(--card, var(--card-bg));
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px; cursor: pointer;
    display: flex; align-items: stretch; gap: 0;
    transition: box-shadow .15s, transform .1s;
    position: relative; overflow: hidden; min-width: 0;
}
.wd-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-1px); }
.wd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Overskreden deadline - tydeligere end kun badget */
.wd-card--overdue { border-left-color: var(--color-danger); }
/* Bulk-valgt kort */
.wd-card--selected { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
/* Bulk-select checkbox - skjult til hover/valgt; altid synlig på touch (ingen hover) */
.wd-sel-cb {
    position: absolute; top: 7px; right: 7px; z-index: 2;
    width: 15px; height: 15px; margin: 0;
    accent-color: var(--accent); cursor: pointer;
    opacity: 0; transition: opacity .12s;
}
.wd-card:hover .wd-sel-cb, .wd-sel-cb:checked { opacity: 1; }
@media (hover: none) { .wd-sel-cb { opacity: 1; } }

.wd-card-drag-handle {
    display: flex; align-items: center; justify-content: center;
    width: 22px; flex-shrink: 0; cursor: grab;
    color: var(--text-3); opacity: 0; transition: opacity .15s;
    padding: 0 4px;
}
.wd-card:hover .wd-card-drag-handle { opacity: 1; }

.wd-card-body {
    flex: 1; min-width: 0; padding: 11px 12px 11px 6px;
    display: flex; flex-direction: column; gap: 5px;
}

.wd-card-title {
    font-weight: 700; font-size: .85rem; color: var(--text-1);
    line-height: 1.35; word-break: break-word;
}
.wd-card-title--done { text-decoration: line-through; }

.wd-card-desc {
    font-size: .74rem; color: var(--text-3);
    line-height: 1.4; word-break: break-word; overflow-wrap: anywhere;
    /* Begræns til 2 linjer på card-niveau - fuld beskrivelse vises i detail-modal.
       Card-titel + assignee + kolonne-header er bevidst IKKE begrænset (brugeren
       skal kunne se hele navnet uden afkortning). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wd-card-badges { display: flex; gap: 5px; flex-wrap: wrap; }

.wd-badge {
    font-size: .62rem; font-weight: 700; padding: 2px 7px;
    border-radius: 4px; white-space: nowrap; line-height: 1.5;
}
.wd-badge--priority {
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    color: var(--badge-color);
}
.wd-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.wd-badge--cat { background: var(--color-info-bg); color: var(--color-info); }

.wd-card-footer {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wd-card-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--color-info));
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 800; color: var(--color-on-accent, #fff);
    flex-shrink: 0; cursor: default;
}
.wd-card-name { font-size: .68rem; color: var(--text-3); word-break: break-word; overflow-wrap: anywhere; }
.wd-card-meta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .67rem; color: var(--text-3); white-space: nowrap;
}
.wd-card-meta svg { flex-shrink: 0; }

/* List view */
.wd-list { display: flex; flex-direction: column; gap: 12px; }
.wd-list-group {
    background: var(--surface); border-radius: 12px;
    border-left: 3px solid var(--accent);
    overflow: hidden;
}
.wd-list-group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: default;
}
.wd-list-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wd-list-group-label { font-size: .72rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }
.wd-list-group-count { font-size: .65rem; color: var(--text-3); }
.wd-list-group-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 5px; }

.wd-list-done { background: var(--surface); border-radius: 12px; border-left: 3px solid var(--accent); overflow: hidden; }
.wd-list-done-summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer; list-style: none;
}
.wd-list-done-summary::-webkit-details-marker { display: none; }
.wd-list-done-arrow { margin-left: auto; font-size: .85rem; color: var(--text-3); transition: transform .2s; }
details[open] .wd-list-done-arrow { transform: rotate(90deg); }

/* Empty global */
.wd-empty-global {
    text-align: center; padding: 60px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wd-empty-title { font-weight: 700; font-size: .9rem; color: var(--text-2); }
.wd-empty-sub { font-size: .72rem; color: var(--text-3); }

/* Mobile */
@media (max-width: 768px) {
    .wd-kanban { grid-template-columns: 1fr; }
    .wd-toolbar { flex-direction: column; align-items: flex-start; }
    .wd-toolbar-right { width: 100%; justify-content: flex-end; }
    .wd-search-input { width: 100% !important; }
    .wd-search-wrap { width: 100%; }
    .wd-filter-bar { gap: 6px; }
    .wd-filter-bar select { flex: 1; min-width: 120px; }
    .wd-tabs { overflow-x: auto; }
    .wd-tab { white-space: nowrap; }
    .wd-col { min-height: 80px; }
    .wd-col-add { min-height: 80px; }
    .wd-title { font-size: 1.1rem; }
}

/* color-mix fallback for older browsers */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .wd-badge--priority { background: rgba(128,128,128,.12); }
}