.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color .15s;
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:disabled { opacity: .6; cursor: not-allowed; }
.btn--ghost   { color: var(--color-text); border: 1px solid var(--color-border); background: transparent; }
.btn--ghost:hover { background: var(--color-bg); }
.btn--danger  { background: var(--color-danger); color: white; }
.btn--sm      { padding: var(--space-1) var(--space-3); font-size: .875rem; }

.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.form__field label { font-size: .875rem; color: var(--color-text-muted); }
.form__field input,
.form__field select,
.form__field textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.form__field input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form__field--error input { border-color: var(--color-danger); }

/* Controles fora de .form__field (ex.: barras de filtro) seguem o tema. */
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.filter-bar select:focus,
.filter-bar input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form__error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: .875rem;
}
.form__error[hidden] { display: none; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.card + .card { margin-top: var(--space-4); }
.card__title { font-size: 1.125rem; margin-bottom: var(--space-4); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.table th { background: var(--color-bg); font-weight: 600; }

.status { padding: 2px 8px; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 600; }
.status--success { background: var(--color-success-bg); color: var(--color-success); }
.status--failed  { background: var(--color-danger-bg);  color: var(--color-danger);  }
.status--running { background: var(--color-warn-bg);    color: var(--color-warn);    }
.status--cancelled { background: var(--color-border);   color: var(--color-text-muted); }

.toast {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: var(--color-primary-contrast);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
}
.toast--error { background: var(--color-danger); }