/* DeFa.Forms — single global stylesheet. Tier 1 tokens, Tier 2 semantics, Tier 3 per component. */

:root {
    /* Tier 1 — design tokens */
    --defa-token-color-surface: #ffffff;
    --defa-token-color-surface-raised: #f7f8fa;
    --defa-token-color-text: #1f2329;
    --defa-token-color-text-muted: #6b7280;
    --defa-token-color-border: #e3e6ea;
    --defa-token-color-neutral: #8a94a6;
    --defa-token-color-danger: #d63b3b;

    --defa-token-space-1: 0.25rem;
    --defa-token-space-2: 0.5rem;
    --defa-token-space-3: 1rem;
    --defa-token-space-4: 1.5rem;

    --defa-token-radius-sm: 0.375rem;
    --defa-token-radius-md: 0.75rem;
    --defa-token-radius-pill: 999px;

    --defa-token-shadow-card: 0 1px 2px rgba(0, 0, 0, .06);
    --defa-token-font-size-sm: 0.8125rem;
    --defa-token-font-size-xs: 0.75rem;
    --defa-token-color-backdrop: rgba(0, 0, 0, .5);
    --defa-token-color-accent: #2563eb;
    --defa-token-color-warning: #b45309;
    --defa-token-color-warning-bg: #fef3c7;

    /* Tier 2 — semantic */
    --defa-sem-card-bg: var(--defa-token-color-surface);
    --defa-sem-card-border: var(--defa-token-color-border);
    --defa-sem-text: var(--defa-token-color-text);
    --defa-sem-text-muted: var(--defa-token-color-text-muted);
    --defa-sem-default-pill-color: var(--defa-token-color-neutral);
    --defa-sem-pill-text-color: #ffffff;
    --defa-sem-overdue-color: var(--defa-token-color-danger);
    --defa-sem-backdrop: var(--defa-token-color-backdrop);
    --defa-sem-accent: var(--defa-token-color-accent);
    --defa-sem-accent-text: #ffffff;
    --defa-sem-kpi-accent: var(--defa-token-color-accent);
    --defa-sem-kpi-warn: var(--defa-token-color-warning);
    --defa-sem-kpi-danger: var(--defa-token-color-danger);

    /* Tier 3 — components */
    --defa-task-card-border-width: 4px;
    --defa-task-card-radius: var(--defa-token-radius-md);
    --defa-task-card-padding: var(--defa-token-space-3);
    --defa-task-card-gap: var(--defa-token-space-2);
    --defa-task-card-progress-height: 6px;
    --defa-task-card-progress-bg: var(--defa-token-color-border);
    --defa-task-card-progress-fill: var(--defa-sem-accent);
    --defa-pill-padding-x: var(--defa-token-space-2);
    --defa-pill-padding-y: var(--defa-token-space-1);
    --defa-pill-font-size: var(--defa-token-font-size-xs);
    --defa-empty-state-padding: var(--defa-token-space-4);
    --defa-list-group-header-bg: var(--defa-token-color-surface-raised);
    --defa-list-group-header-color: var(--defa-sem-text);
    --defa-list-group-header-padding: var(--defa-token-space-2) var(--defa-token-space-3);
    --defa-shell-gap: var(--defa-token-space-3);
    --defa-sheet-backdrop: var(--defa-sem-backdrop);
    --defa-sheet-radius: var(--defa-token-radius-md);

    --defa-message-radius: var(--defa-token-radius-md);
    --defa-message-padding: var(--defa-token-space-2) var(--defa-token-space-3);
    --defa-message-gap: var(--defa-token-space-1);
    --defa-message-bg-other: var(--defa-token-color-surface-raised);
    --defa-message-bg-own: var(--defa-sem-accent);
    --defa-message-text-own: var(--defa-sem-accent-text);
    --defa-message-max-width: 80%;
    --defa-message-quote-border: 3px;
    --defa-message-quote-padding: var(--defa-token-space-1) var(--defa-token-space-2);
    --defa-message-quote-font-size: var(--defa-token-font-size-xs);

    --defa-composer-radius: var(--defa-token-radius-md);
    --defa-composer-padding: var(--defa-token-space-3);
    --defa-composer-gap: var(--defa-token-space-2);
    --defa-composer-border: var(--defa-sem-card-border);

    --defa-connection-banner-bg: var(--defa-token-color-warning-bg);
    --defa-connection-banner-color: var(--defa-token-color-warning);
    --defa-connection-banner-padding: var(--defa-token-space-2) var(--defa-token-space-3);

    --defa-chat-gap: var(--defa-token-space-2);
    --defa-chat-messages-gap: var(--defa-token-space-2);
    --defa-chat-day-separator-color: var(--defa-sem-text-muted);
    --defa-chat-day-separator-bg: var(--defa-token-color-surface-raised);
    --defa-chat-day-separator-padding: var(--defa-token-space-1) var(--defa-token-space-3);
    --defa-chat-day-separator-font-size: var(--defa-token-font-size-xs);

    --defa-info-panel-padding: var(--defa-token-space-3);
    --defa-info-panel-gap: var(--defa-token-space-3);
    --defa-info-panel-section-gap: var(--defa-token-space-2);
    --defa-info-panel-label-color: var(--defa-sem-text-muted);
    --defa-info-panel-border: var(--defa-sem-card-border);

    --defa-task-detail-gap: var(--defa-token-space-2);

    --defa-time-log-gap: var(--defa-token-space-2);
    --defa-time-log-label-color: var(--defa-sem-text-muted);
    --defa-time-log-border: var(--defa-sem-card-border);
    --defa-time-log-active-color: var(--defa-sem-accent);

    --defa-task-tabs-indicator: var(--defa-sem-accent);
    --defa-task-tabs-border: var(--defa-sem-card-border);

    --defa-kanban-column-width: 16rem;
    --defa-kanban-gap: var(--defa-token-space-3);
    --defa-kanban-header-color: var(--defa-sem-pill-text-color);
}

[data-bs-theme="dark"] {
    --defa-token-color-surface: #1a1d21;
    --defa-token-color-surface-raised: #23272c;
    --defa-token-color-text: #e8e8e8;
    --defa-token-color-text-muted: #9aa3ae;
    --defa-token-color-border: #333941;
    --defa-token-color-neutral: #6d7684;
    --defa-token-shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
    --defa-token-color-accent: #3b82f6;
    --defa-token-color-warning: #fbbf24;
    --defa-token-color-warning-bg: #3f2f0d;
}

/* Pills and badges: colour arrives per tenant from the API as --defa-pill-color. */
.defa-status-pill,
.defa-priority-badge,
.defa-type-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--defa-pill-padding-y) var(--defa-pill-padding-x);
    border-radius: var(--defa-token-radius-pill);
    font-size: var(--defa-pill-font-size);
    line-height: 1.2;
    white-space: nowrap;
    background: var(--defa-pill-color, var(--defa-sem-default-pill-color));
    color: var(--defa-sem-pill-text-color);
}

.defa-task-card {
    display: flex;
    flex-direction: column;
    gap: var(--defa-task-card-gap);
    padding: var(--defa-task-card-padding);
    border: 1px solid var(--defa-sem-card-border);
    border-left: var(--defa-task-card-border-width) solid var(--defa-pill-color, var(--defa-sem-default-pill-color));
    border-radius: var(--defa-task-card-radius);
    background: var(--defa-sem-card-bg);
    color: var(--defa-sem-text);
    box-shadow: var(--defa-token-shadow-card);
}

.defa-task-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--defa-token-space-2);
}

.defa-task-card__code {
    color: var(--defa-sem-text-muted);
    font-size: var(--defa-token-font-size-sm);
}

.defa-task-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--defa-token-space-2);
    align-items: center;
}

.defa-task-card.is-overdue .defa-task-card__deadline {
    color: var(--defa-sem-overdue-color);
    font-weight: 600;
}

.defa-task-card--row {
    padding: var(--defa-token-space-2) var(--defa-token-space-3);
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    border-right: none;
}

.defa-task-card--kanban {
    padding: var(--defa-token-space-2);
}

.defa-task-card__progress {
    height: var(--defa-task-card-progress-height);
    border-radius: var(--defa-token-radius-pill);
    background: var(--defa-task-card-progress-bg);
    overflow: hidden;
}

.defa-task-card__progress-fill {
    height: 100%;
    background: var(--defa-task-card-progress-fill);
}

/* A tasks-only reload (a tab click) dims the layout instead of replacing it with a spinner. */
.defa-task-list.is-busy {
    opacity: .6;
}

/* Grouped list (mockup 03b): a sticky header per external reference. */
.defa-task-list__group-label {
    color: var(--defa-sem-text-muted);
    font-size: var(--defa-token-font-size-xs);
    text-transform: uppercase;
    padding: var(--defa-token-space-2) var(--defa-token-space-3) 0;
}

.defa-list-group__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--defa-token-space-2);
    padding: var(--defa-list-group-header-padding);
    background: var(--defa-list-group-header-bg);
    color: var(--defa-list-group-header-color);
    font-weight: 600;
}

.defa-list-group__count {
    border-radius: var(--defa-token-radius-pill);
    padding: 0 var(--defa-token-space-2);
    background: var(--defa-sem-default-pill-color);
    color: var(--defa-sem-pill-text-color);
    font-size: var(--defa-token-font-size-xs);
}

/* Kanban (mockup 03d): columns by status, scrolled horizontally, read-only. */
.defa-kanban {
    display: flex;
    gap: var(--defa-kanban-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.defa-kanban__column {
    flex: 0 0 var(--defa-kanban-column-width);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-2);
    border: 1px solid var(--defa-sem-card-border);
    border-radius: var(--defa-token-radius-md);
    background: var(--defa-token-color-surface-raised);
    overflow: hidden;
}

.defa-kanban__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--defa-token-space-2);
    padding: var(--defa-token-space-2) var(--defa-token-space-3);
    background: var(--defa-pill-color, var(--defa-sem-default-pill-color));
    color: var(--defa-kanban-header-color);
    font-weight: 600;
}

.defa-kanban__body {
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-2);
    padding: 0 var(--defa-token-space-2) var(--defa-token-space-2);
}

.defa-kanban__empty {
    margin: 0;
    padding: var(--defa-token-space-3) 0;
    color: var(--defa-sem-text-muted);
    font-size: var(--defa-token-font-size-sm);
    text-align: center;
}

.defa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--defa-token-space-2);
    padding: var(--defa-empty-state-padding);
    color: var(--defa-sem-text-muted);
}

/* Shell — both panes above md, one at a time below it. */
.defa-shell__master,
.defa-shell__detail {
    display: none;
}

.defa-shell__master.is-mobile-visible,
.defa-shell__detail.is-mobile-visible {
    display: block;
}

@media (min-width: 768px) {
    .defa-shell__master,
    .defa-shell__detail {
        display: block;
    }
}

/* Sheet */
.defa-sheet__backdrop {
    position: fixed;
    inset: 0;
    background: var(--defa-sheet-backdrop);
    z-index: 1040;
}

.defa-sheet__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--defa-sem-card-bg);
    border-top-left-radius: var(--defa-sheet-radius);
    border-top-right-radius: var(--defa-sheet-radius);
    z-index: 1045;
}

.defa-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--defa-token-space-3);
    border-bottom: 1px solid var(--defa-sem-card-border);
}

.defa-sheet__body {
    padding: var(--defa-token-space-3);
}

/* Message bubble */
.defa-message {
    display: flex;
    flex-direction: column;
    gap: var(--defa-message-gap);
    max-width: var(--defa-message-max-width);
    padding: var(--defa-message-padding);
    border-radius: var(--defa-message-radius);
    background: var(--defa-message-bg-other);
    color: var(--defa-sem-text);
}

.defa-message.is-own {
    align-self: flex-end;
    background: var(--defa-message-bg-own);
    color: var(--defa-message-text-own);
}

.defa-message.is-sending {
    opacity: .6;
}

.defa-message.is-failed {
    outline: 1px solid var(--defa-sem-overdue-color);
}

.defa-message.is-deleted {
    font-style: italic;
    color: var(--defa-sem-text-muted);
}

/* Quoted message above a reply's own text. Marked out by a rule in currentColor rather than by a surface
   of its own, so it reads on the caller's accent bubble and on everyone else's alike. */
.defa-message__quote {
    display: flex;
    flex-direction: column;
    padding: var(--defa-message-quote-padding);
    border-left: var(--defa-message-quote-border) solid currentColor;
    font-size: var(--defa-message-quote-font-size);
    opacity: .8;
}

.defa-message__quote-author {
    font-weight: 600;
}

/* One line: the quote points at a message, it does not reproduce it. */
.defa-message__quote-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defa-message__meta {
    display: flex;
    gap: var(--defa-token-space-2);
    font-size: var(--defa-token-font-size-xs);
    opacity: .8;
}

.defa-message__actions {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-1);
    font-size: var(--defa-token-font-size-xs);
}

/* Chat composer */
.defa-composer {
    display: flex;
    flex-direction: column;
    gap: var(--defa-composer-gap);
    padding: var(--defa-composer-padding);
    border-top: 1px solid var(--defa-composer-border);
    border-radius: var(--defa-composer-radius);
    background: var(--defa-sem-card-bg);
}

.defa-composer--read-only {
    color: var(--defa-sem-text-muted);
    text-align: center;
}

.defa-composer__reply-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--defa-token-space-2);
    padding: var(--defa-token-space-2);
    border-radius: var(--defa-token-radius-sm);
    background: var(--defa-token-color-surface-raised);
}

.defa-composer__reply-info {
    display: flex;
    flex-direction: column;
    font-size: var(--defa-token-font-size-sm);
}

.defa-composer__reply-author {
    font-weight: 600;
}

/* Connection banner */
.defa-connection-banner {
    padding: var(--defa-connection-banner-padding);
    background: var(--defa-connection-banner-bg);
    color: var(--defa-connection-banner-color);
    text-align: center;
    font-size: var(--defa-token-font-size-sm);
}

/* Task chat */
.defa-chat {
    display: flex;
    flex-direction: column;
    gap: var(--defa-chat-gap);
    height: 100%;
}

.defa-chat__messages {
    display: flex;
    flex-direction: column;
    gap: var(--defa-chat-messages-gap);
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Centred pill, and never squeezed by the flex column the bubbles are laid out in. */
.defa-chat__day-separator {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.defa-chat__day-separator > span {
    padding: var(--defa-chat-day-separator-padding);
    border-radius: var(--defa-token-radius-pill);
    background: var(--defa-chat-day-separator-bg);
    color: var(--defa-chat-day-separator-color);
    font-size: var(--defa-chat-day-separator-font-size);
}

.defa-chat__load-older-row {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.defa-chat__load-older-error {
    color: var(--defa-sem-overdue-color);
    font-size: var(--defa-token-font-size-sm);
    text-align: center;
}

.defa-chat__delete-error {
    padding: var(--defa-token-space-2) var(--defa-token-space-3);
    color: var(--defa-sem-overdue-color);
    font-size: var(--defa-token-font-size-sm);
}

/* Task info panel */
.defa-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--defa-info-panel-gap);
    padding: var(--defa-info-panel-padding);
}

.defa-info-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--defa-info-panel-section-gap);
}

.defa-info-panel__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--defa-token-space-2);
}

.defa-info-panel__code {
    color: var(--defa-sem-text-muted);
    font-size: var(--defa-token-font-size-sm);
}

.defa-info-panel__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--defa-token-space-2);
}

.defa-info-panel__description {
    color: var(--defa-sem-text);
    white-space: pre-wrap;
}

.defa-info-panel__dates,
.defa-info-panel__external,
.defa-info-panel__assignees,
.defa-info-panel__percentage {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-2);
}

.defa-info-panel__field-label {
    color: var(--defa-info-panel-label-color);
    font-size: var(--defa-token-font-size-sm);
    font-weight: 600;
}

.defa-info-panel__time {
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-1);
    padding-top: var(--defa-info-panel-section-gap);
    border-top: 1px solid var(--defa-info-panel-border);
}

.defa-info-panel__time-row {
    display: flex;
    justify-content: space-between;
}

.defa-info-panel__error {
    color: var(--defa-sem-overdue-color);
    font-size: var(--defa-token-font-size-sm);
}

.defa-info-panel.is-overdue .defa-info-panel__end-date {
    color: var(--defa-sem-overdue-color);
    font-weight: 600;
}

/* Task detail composer */
.defa-task-detail,
.defa-task-detail__master {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--defa-task-detail-gap);
}

.defa-task-detail__info-toggle {
    align-self: flex-end;
}

/* ── Time log ─────────────────────────────────────────── */
.defa-time-log-tabs {
    display: flex;
    border-bottom: 1px solid var(--defa-time-log-border);
    margin-bottom: var(--defa-token-space-3);
}

.defa-time-log-tabs__tab {
    flex: 1;
    padding: var(--defa-token-space-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--defa-time-log-label-color);
    font-weight: 600;
}

.defa-time-log-tabs__tab.is-active {
    color: var(--defa-time-log-active-color);
    border-bottom-color: var(--defa-time-log-active-color);
}

.defa-time-log__duration {
    display: flex;
    gap: var(--defa-time-log-gap);
}

.defa-time-log__field {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-1);
    flex: 1;
}

.defa-time-log__label {
    display: block;
    font-size: var(--defa-token-font-size-xs);
    font-weight: 600;
    color: var(--defa-time-log-label-color);
    margin: var(--defa-token-space-2) 0 var(--defa-token-space-1);
}

.defa-time-log__buttons {
    display: flex;
    gap: var(--defa-time-log-gap);
    margin-top: var(--defa-token-space-3);
}

.defa-time-log__error {
    color: var(--defa-sem-overdue-color);
    font-size: var(--defa-token-font-size-sm);
    margin-top: var(--defa-token-space-1);
}

.defa-time-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.defa-time-history__row {
    padding: var(--defa-token-space-2) 0;
    border-bottom: 1px solid var(--defa-time-log-border);
}

.defa-time-history__top {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.defa-time-history__note {
    color: var(--defa-time-log-label-color);
    font-size: var(--defa-token-font-size-sm);
}

.defa-time-history__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--defa-token-font-size-xs);
    color: var(--defa-time-log-label-color);
}

.defa-time-history__error {
    color: var(--defa-token-color-danger);
    font-size: var(--defa-token-font-size-sm);
}

/* Checklist */
.defa-checklist {
    --defa-checklist-done-color: var(--defa-sem-text-muted);
    --defa-checklist-counter-color: var(--defa-sem-accent);
}

.defa-checklist__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--defa-token-space-2);
}

.defa-checklist__title {
    font-size: var(--defa-token-font-size-sm);
    color: var(--defa-sem-text-muted);
    text-transform: uppercase;
}

.defa-checklist__counter {
    font-size: var(--defa-token-font-size-xs);
    font-weight: 700;
    color: var(--defa-checklist-counter-color);
}

.defa-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.defa-checklist__item {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-2);
    padding: var(--defa-token-space-1) 0;
}

.defa-checklist__item.is-done .defa-checklist__text {
    color: var(--defa-checklist-done-color);
    text-decoration: line-through;
}

.defa-checklist__error {
    color: var(--defa-token-color-danger);
    font-size: var(--defa-token-font-size-sm);
}

/* Task files */
.defa-task-files {
    --defa-task-files-icon-color: var(--defa-sem-text-muted);
    --defa-task-files-border: var(--defa-sem-card-border);
}

.defa-task-files__header {
    margin-bottom: var(--defa-token-space-2);
}

.defa-task-files__title {
    font-size: var(--defa-token-font-size-sm);
    color: var(--defa-sem-text-muted);
    text-transform: uppercase;
}

.defa-task-files__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.defa-task-files__row {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-2);
    padding: var(--defa-token-space-2) 0;
    border-bottom: 1px solid var(--defa-task-files-border);
}

.defa-task-files__icon {
    color: var(--defa-task-files-icon-color);
}

.defa-task-files__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.defa-task-files__open {
    padding: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defa-task-files__meta {
    font-size: var(--defa-token-font-size-xs);
    color: var(--defa-sem-text-muted);
}

.defa-task-files__upload {
    display: inline-flex;
    align-items: center;
    gap: var(--defa-token-space-2);
    margin-top: var(--defa-token-space-2);
    cursor: pointer;
}

.defa-task-files__error {
    color: var(--defa-token-color-danger);
    font-size: var(--defa-token-font-size-sm);
}

/* KPI card */
.defa-kpi-card {
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-1);
    padding: var(--defa-token-space-3);
    background: var(--defa-sem-card-bg);
    border: 1px solid var(--defa-sem-card-border);
    border-radius: var(--defa-token-radius-md);
    box-shadow: var(--defa-token-shadow-card);
}

.defa-kpi-card__icon { font-size: 1.25rem; color: var(--defa-kpi-tone); }
.defa-kpi-card__value { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--defa-kpi-tone); }
.defa-kpi-card__label { font-size: var(--defa-token-font-size-xs); color: var(--defa-sem-text-muted); }

.defa-kpi-card--accent { --defa-kpi-tone: var(--defa-sem-kpi-accent); }
.defa-kpi-card--warn { --defa-kpi-tone: var(--defa-sem-kpi-warn); }
.defa-kpi-card--danger { --defa-kpi-tone: var(--defa-sem-kpi-danger); }

/* Filter chips */
.defa-filter-chips {
    display: flex;
    gap: var(--defa-token-space-2);
    overflow-x: auto;
    padding-bottom: var(--defa-token-space-1);
    scrollbar-width: none;
}

.defa-filter-chips::-webkit-scrollbar { display: none; }

.defa-filter-chips__chip {
    flex: 0 0 auto;
    border-radius: var(--defa-token-radius-pill);
    background: var(--defa-token-color-surface-raised);
    color: var(--defa-sem-text);
    border: 1px solid var(--defa-sem-card-border);
    font-size: var(--defa-token-font-size-xs);
}

.defa-filter-chips__chip--active {
    background: var(--defa-sem-accent);
    color: var(--defa-sem-accent-text);
    border-color: var(--defa-sem-accent);
}

/* Type tabs: the chip row, drawn as a scrollable tab strip (mockup 03c). */
.defa-task-tabs {
    border-bottom: 1px solid var(--defa-task-tabs-border);
    padding-bottom: 0;
    gap: 0;
}

.defa-task-tabs .defa-filter-chips__chip {
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    padding: var(--defa-token-space-2) var(--defa-token-space-3);
}

.defa-task-tabs .defa-filter-chips__chip--active {
    background: transparent;
    color: var(--defa-task-tabs-indicator);
    border-bottom-color: var(--defa-task-tabs-indicator);
}

/* Status distribution */
.defa-distribution__bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: var(--defa-token-radius-sm);
    background: var(--defa-token-color-surface-raised);
}

.defa-distribution__segment { background: var(--defa-pill-color, var(--defa-sem-default-pill-color)); }

.defa-distribution__legend {
    list-style: none;
    margin: var(--defa-token-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-2);
}

.defa-distribution__row {
    display: flex;
    align-items: center;
    gap: var(--defa-token-space-2);
    font-size: var(--defa-token-font-size-sm);
}

.defa-distribution__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--defa-pill-color, var(--defa-sem-default-pill-color));
}

.defa-distribution__label { flex: 1 1 auto; color: var(--defa-sem-text); }
.defa-distribution__share { color: var(--defa-sem-text-muted); }
.defa-distribution__count { font-weight: 600; min-width: 1.5rem; text-align: right; }

/* Dashboard */
.defa-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--defa-token-space-3);
}

.defa-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--defa-token-space-2);
}

.defa-dashboard__distribution {
    padding: var(--defa-token-space-3);
    background: var(--defa-sem-card-bg);
    border: 1px solid var(--defa-sem-card-border);
    border-radius: var(--defa-token-radius-md);
    box-shadow: var(--defa-token-shadow-card);
}

.defa-dashboard__section-title {
    margin: 0 0 var(--defa-token-space-2);
    font-size: var(--defa-token-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--defa-sem-text-muted);
}

.defa-dashboard__see-all { width: 100%; }

@media (min-width: 768px) {
    .defa-dashboard__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}