/* The control plane's one visual difference (docs/82 IMPL-236).

   Everything else is the product's own theme, deliberately: an operator should not have to learn
   a second set of conventions to suspend a customer. What this does is make the two
   distinguishable at a glance, because acting in the wrong tab here means suspending a live one. */
.bs-app-layout.control .bs-topbar {
  background: #1f2937;
  color: #f9fafb;
  border-bottom: 3px solid #f59e0b;
}

.bs-app-layout.control .bs-topbar .session-user { color: #f9fafb; }

.bs-app-layout.control .locale button { color: #f9fafb; }

.control-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f59e0b;
  color: #1f2937;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.control-card {
  margin-bottom: var(--bs-spacing-lg, 20px);
  padding: var(--bs-spacing-lg, 20px);
}

.control-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.control-reason {
  font-size: var(--bs-font-size-xs);
  opacity: 0.7;
}

.control-error {
  margin-bottom: var(--bs-spacing-md, 16px);
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

/* Sign-in: a narrow column, because there are two fields and nothing else to look at. */
.control-signin {
  max-width: 360px;
  margin: 8vh auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.control-signin-form { display: flex; flex-direction: column; gap: 14px; }
.control-signin-hint { opacity: 0.7; font-size: var(--bs-font-size-sm); margin: 0; }
.control-signin-error { color: #b91c1c; font-size: var(--bs-font-size-sm); }