/* Shared primitives. Page CSS may define contextual layout and size variants. */
button,input,select,textarea {
  font:inherit
}

button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-6);
  background:var(--accent);
  color:var(--color-on-primary);
  padding:var(--space-10) var(--space-16);
  border:1px solid transparent;
  border-radius:var(--radius-control);
  cursor:pointer;
  font-weight:550;
  line-height:1.2;
  white-space:nowrap
}

button:hover,.button:hover {
  filter:brightness(.96);
  text-decoration:none
}

.secondary {
  background:var(--color-surface);
  color:var(--color-secondary-text);
  border-color:var(--color-input-border)
}

button[aria-disabled="true"] {
  opacity:.65;
  cursor:not-allowed;
}

.danger {
  background:var(--color-danger)
}

.text-button {
  background:transparent;
  border:0;
  color:var(--muted);
  padding:var(--space-6)
}

.ui-help-button {
  flex-shrink:0;
  padding:0;
  min-width:var(--space-24);
  min-height:var(--space-24);
}
.ui-help-button > span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--space-20);
  height:var(--space-20);
  border:1px solid var(--color-secondary-text);
  border-radius:50%;
  font-size:var(--font-size-12);
  line-height:1;
}

.panel {
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  margin-bottom:20px;
  overflow:hidden
}

summary {
  cursor:pointer;
  color:var(--color-primary);
  font-size:var(--font-size-12);
  font-weight:550;
  list-style-position:inside
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:var(--font-size-12)
}

th {
  padding:13px var(--space-22);
  background:#fafbfd;
  color:#7d8aa0;
  font-size:var(--font-size-11);
  font-weight:550;
  text-align:left;
  white-space:nowrap
}

td {
  padding:var(--space-18) var(--space-22);
  border-top:1px solid #edf0f6;
  vertical-align:top;
  line-height:1.55
}

.status {
  font-size:var(--font-size-10);
  white-space:nowrap;
  padding:var(--space-4) var(--space-8);
  border-radius:var(--radius-badge);
  background:var(--color-neutral-soft);
  color:var(--color-neutral);
  display:inline-flex
}

.status-succeeded,.status-settled,.status-enabled,.status-credit {
  background:var(--color-success-soft);
  color:var(--color-success)
}

.status-running,.status-polling,.status-submitting,.status-reserved {
  background:var(--color-primary-soft);
  color:var(--color-primary)
}

.status-failed,.status-disabled {
  background:var(--color-danger-soft);
  color:var(--color-danger)
}

.status-pending_usage,.status-pending_payment,.status-draining,.status-unverified {
  background:var(--color-warning-soft);
  color:var(--color-warning)
}

input,select,textarea {
  border:1px solid var(--color-input-border);
  background:var(--color-surface);
  color:var(--color-field-text);
  border-radius:var(--radius-sm);
  padding:9px 11px;
  min-width:100px;
  max-width:100%;
  outline:none;
  font-size:var(--font-size-12)
}

input:focus,select:focus,textarea:focus {
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px #517bf015
}

input[type=checkbox] {
  min-width:0;
  width:15px;
  height:15px;
  accent-color:var(--accent)
}

.notice {
  padding:var(--space-14) var(--space-18);
  background:var(--color-warning-soft);
  color:var(--color-warning);
  border:1px solid var(--color-warning-border);
  border-radius:var(--radius-control);
  margin:0 0 var(--space-20);
  font-size:var(--font-size-12);
  line-height:1.7
}

.notice.success {
  background:var(--color-success-soft);
  border-color:var(--color-success-border);
  color:var(--color-success)
}

.notice.error {
  background:var(--color-danger-soft);
  border-color:var(--color-danger-border);
  color:var(--color-danger)
}

.empty {
  display:grid;
  justify-items:center;
  padding:46px var(--space-20) 38px;
  color:#a0acbf
}

.empty strong {
  font-size:var(--font-size-13);
  font-weight:500;
  color:#718299
}

.empty p {
  font-size:var(--font-size-11);
  margin-bottom:0
}

.task-facts {
  margin:0;
  display:grid;
  gap:var(--space-12)
}

.task-facts>div {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:var(--space-12)
}

.task-facts dt {
  color:var(--muted);
  font-size:var(--font-size-12)
}

.task-facts dd {
  margin:0;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}

.ui-number-control { display: flex; position: relative; width: 100%; }
.ui-number-control > input { width: 100%; padding-right: var(--space-32); appearance: textfield; -moz-appearance: textfield; }
.ui-number-control > input::-webkit-inner-spin-button, .ui-number-control > input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ui-number-actions { position: absolute; right: var(--space-4); top: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; }
.ui-number-actions > button { padding: 0 var(--space-6); min-height: 0; flex: 1; line-height: 1; font-size: var(--font-size-12); }
.copy-value {
  display:inline-flex;
  gap:var(--space-8);
  align-items:center;
  max-width:100%
}

.copy-value>button {
  flex:none;
  font-size:var(--font-size-11);
  padding:var(--space-4) var(--space-8);
  min-height:26px
}
.ui-button-sm { padding: var(--space-6) var(--space-10); min-height: 30px; font-size: var(--font-size-12); }
.ui-field { display:grid; gap:var(--space-8); }
.ui-field input, .ui-field select { width:100%; min-width:0; }
.ui-field small { color:var(--muted); font-size:var(--font-size-12); }
[aria-invalid="true"] { border-color:var(--color-danger); }
.ui-field .ui-field-error { color:var(--color-danger); }