/**
 * Prompt 52 — Commercial Tenant Administration's own small amount of
 * layout the shared Design System has no reason to define (a secondary
 * tab bar, a compact invite/create form row, a security summary list).
 * Every color/spacing/radius/font value below is one of
 * packages/design-system/src/tokens.css's existing tokens — mirrors
 * onboarding.css's own "module-specific layout only" convention, no new
 * palette invented here.
 */

.beheer-tabs {
  display: flex;
  gap: var(--senviq-space-2);
  border-bottom: 1px solid var(--senviq-border);
  margin-bottom: var(--senviq-space-5);
  flex-wrap: wrap;
}

.beheer-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-2);
  padding: var(--senviq-space-3) var(--senviq-space-4);
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  color: var(--senviq-muted);
  font-size: var(--senviq-fs-body);
  cursor: pointer;
}

.beheer-tabs__tab--active {
  border-bottom-color: var(--senviq-blue);
  color: var(--senviq-navy);
  font-weight: var(--senviq-fw-medium);
}

.beheer-tabs__tab:hover {
  color: var(--senviq-navy);
}

.beheer-actions {
  display: flex;
  gap: var(--senviq-space-3);
  margin-top: var(--senviq-space-4);
  flex-wrap: wrap;
}

.beheer-invite-form {
  display: flex;
  gap: var(--senviq-space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.beheer-invite-form .senviq-field {
  min-width: 180px;
  flex: 1;
}

.beheer-security-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--senviq-space-2);
  color: var(--senviq-navy);
  font-size: var(--senviq-fs-body);
}

@media (max-width: 480px) {
  .beheer-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .beheer-invite-form {
    flex-direction: column;
    align-items: stretch;
  }

  .beheer-invite-form .senviq-field {
    min-width: 0;
  }
}