/* Legacy global components.
   New portal surfaces should use sr-ui-* primitives from ui-primitives.css.
   Keep these aliases for older/simple forms that still rely on global styles. */
.card {
  background: var(--sr-ui-color-panel-bg, #0f1621);
  border: 1px solid var(--sr-ui-color-panel-border, #1b2a3a);
  border-radius: var(--sr-ui-radius-panel, 14px);
  padding: 16px;
}

h1 { margin:0 0 12px 0; }
h2 { margin:0 0 10px 0; }
h3 { margin:0 0 10px 0; }

label { display:block; margin-top:10px; margin-bottom:6px; color:var(--sr-ui-color-form-label, #b9c7d6); }

input, select, textarea {
  width:100%;
  background:#0b0f14;
  border:1px solid #24374a;
  color:var(--sr-ui-color-text, #e8eef6) !important;
  caret-color:var(--sr-ui-color-text, #e8eef6) !important;
  padding:10px 12px;
  border-radius:var(--sr-ui-radius-control, 10px);
  box-sizing:border-box;
  font-size:14px;
}
input::placeholder, textarea::placeholder { color:#93a4b7 !important; opacity:1; }

.btn {
  display:inline-block;
  margin-top:12px;
  background:var(--sr-ui-color-surface-strong, #1b2a3a);
  border:1px solid var(--sr-ui-color-control-border, #2a415a);
  color:var(--sr-ui-color-text, #e8eef6);
  padding:10px 12px;
  border-radius:var(--sr-ui-radius-control, 10px);
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
}
.btn.primary { background:var(--sr-ui-color-primary, #157ba3); border-color:var(--sr-ui-color-action-border, #249cc8); }
.btn.danger { background:#3a1b1b; border-color:#6a2a2a; }

.error {
  background:rgba(119, 39, 48, .20);
  padding:8px 10px;
  border-radius:var(--sr-ui-radius-control, 10px);
  border:1px solid #65343c;
  color:#f3a0a7;
  margin-bottom:10px;
}
.muted { color:var(--sr-ui-color-muted, #93a4b7); }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }

.row { display:flex; gap:10px; align-items:center; }
.row input, .row select { flex:1; }

.row-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
@media (max-width: 700px){
  .row-between { flex-direction:column; align-items:flex-start; }
}

.list { list-style:none; padding:0; margin:10px 0 0 0; }
.list li { padding:8px 0; border-bottom:1px solid #182535; }

.badge {
  padding:3px 8px;
  border-radius:999px;
  margin-left:8px;
  font-size:12px;
  border:1px solid var(--sr-ui-color-control-border, #2a415a);
}
.badge.queued { background:#1b2a3a; }
.badge.running { background:#3b2a1b; }
.badge.done { background:#1b3a24; }
.badge.failed { background:#3a1b1b; }

.table { width:100%; border-collapse: collapse; margin-top:10px; }
.table th, .table td { border-bottom:1px solid #182535; padding:8px 6px; text-align:left; }

.formgrid { display:grid; grid-template-columns: 1fr; gap:10px; }
.formgrid .section { margin-top:10px; font-weight:700; color:var(--sr-ui-color-form-label, #b9c7d6); }
.formgrid .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

.kv { display:grid; grid-template-columns: 160px 1fr; gap:8px 12px; }
.kv .k { color:var(--sr-ui-color-form-label, #b9c7d6); }
.kv .v { color:var(--sr-ui-color-text, #e8eef6); }
@media (max-width: 700px){
  .kv { grid-template-columns: 1fr; }
  .kv .k { margin-top:10px; }
}