.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    padding: 10px 12px;
    border: var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--color-heading);
    background: var(--surface-card);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    border-color: var(--ds-indigo);
    box-shadow: var(--focus-ring);
}
.ds-select { appearance: none; cursor: pointer; }
.ds-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
/* Input with icon — wrap + icon + padded input */
.ds-input-wrap { position: relative; }
.ds-input-wrap .ds-input,
.ds-input-wrap .ds-select,
.ds-input-wrap .ds-textarea { padding-left: 36px; }
.ds-input-icon {
    position: absolute;
    top: 50%; left: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
}
.ds-input-icon svg { width: 16px; height: 16px; stroke: var(--color-faint); fill: none; }
.ds-textarea-icon {
    position: absolute;
    top: 12px; left: 12px;
    pointer-events: none;
    display: flex;
}
.ds-textarea-icon svg { width: 16px; height: 16px; stroke: var(--color-faint); fill: none; }
.ds-select-chevron {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ds-select-chevron svg { width: 16px; height: 16px; stroke: var(--color-faint); fill: none; }
/* ╔══════════════════════════════════════════════════════════
   ║  TOOLBAR (search + filters row)
   ╚══════════════════════════════════════════════════════════ */
.ds-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.ds-toolbar .ds-input-wrap { flex: 1; min-width: 200px; }
.ds-toolbar .ds-select { width: auto; padding: 10px 12px; }
/* ╔══════════════════════════════════════════════════════════
   ║  STATUS / TYPE PILLS
   ╚══════════════════════════════════════════════════════════ */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.ds-pill svg { width: 11px; height: 11px; }
.ds-pill--green  { background: var(--color-green-light);  color: var(--color-green); }
.ds-pill--red    { background: var(--color-red-light);    color: var(--color-red); }
.ds-pill--amber  { background: var(--color-amber-light);  color: var(--color-amber); }
.ds-pill--blue   { background: var(--color-blue-light);   color: var(--color-blue); }
.ds-pill--purple { background: var(--color-purple-light); color: var(--color-purple); }
.ds-pill--gray   { background: var(--surface-subtle);     color: var(--color-muted); }
.ds-pill--indigo { background: var(--ds-indigo-light);    color: var(--ds-indigo); }